文章目录
显示
这节课，我们会学习：如何制作首页的sidebar和添加热门标签。
首先我们看一下首页，现在要做的就是这块区域
在这里，我们把“用户登录”改为热门文章，最新留言的功能保留，网友投票的功能删除。
首先，创建sidebar.php文件，从index.php把以下代码拷贝到sidebar.php：
<div style="width: 262px; height: 856px;" class="page_other_msg right">
<div class="left_row"></div>
<div class="left_row">
<div class="list">
<p></p>
<div class="list_bar">// 用户登录</div>
<div class="list_content">
<div id="div">分类目录</div>
</div>
</div>
</div>
<div class="left_row">
<div class="list">
<div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">最新留言</a></div>
<div class="list_content">
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 <br/>qq2205526845 </div>
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 我只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 <br/> </div>
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 我想要赚点外块，够我付房费就可以了， </div>
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 我只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 <br/>QQ：964546238 </div>
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 我只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 </div>
</div>
</div>
</div>
<div class="left_row">
<div class="list">
<div class="list_bar">// 网友投票</div>
<div class="list_content"><script language="javascript">
function check_votes(allowCount) {
var voteItems=document.getElementsByName('voteItems');
var count = 0;
for(var i=0;i<voteItems.length;i++)
{
if(voteItems[i].checked){
count++;
}
}
if(count==allowCount&&allowCount>1){
for(var i=0;i<voteItems.length;i++){
if(!voteItems[i].checked){
voteItems[i].disabled = true;
}
}
return true;
}
else{
for(var i=0;i<voteItems.length;i++){
voteItems[i].disabled = false;
}
}
if(count==0){
alert("对不起，请至少选择一个投票项！");
return false;0
}
return true;
}
</script>
<form name="votes" action="https://www.xuhss.com/jeecms/VoteResult.jspx" method="post" target="_blank">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" colspan="2" align="left">你是从哪儿得知本站的？
<input type="hidden" name="topicId" value="1"/></td>
</tr>
<tr>
<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="1"/></td>
<td width="88%" align="left">朋友介绍</td>
</tr>
<tr>
<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="2"/></td>
<td width="88%" align="left">门户网站的搜索引擎</td>
</tr>
<tr>
<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="3"/></td>
<td width="88%" align="left">Google或百度搜索</td>
</tr>
<tr>
<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="4"/></td>
<td width="88%" align="left">别的网站上的链接</td>
</tr>
<tr>
<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="5"/></td>
<td width="88%" align="left">其它途径</td>
</tr>
<tr>
<td height="30" colspan="2" align="center">
<input type="submit" value="投 票" onClick="return check_votes(1)" style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;"/> <input type="button" value="查看结果" onclick="window.open ('/jeecms/VoteResult.jspx?topicId=1', 'newwindow', 'height=300, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, status=no') " style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div></div>
<div style="clear: both;"></div>
<div></div>
<!--主体下End--><!--友情链接Begin--><!--页脚End--></div>然后，在index.php中调用：
</div>
<?php get_sidebar();?>
</div>刷新一下网站前台，没有变化，OK
首先把“用户登陆”更改为“图文广告”
<div class="left_row">
<div class="list">
<p></p>
<div class="list_bar">// 图文广告</div>
<div class="list_content">
<div id="div">在sidebar.php中添加广告图片和文字</div>
</div>
</div>
</div>这里删除多余的p标签：
<p></p>
<div class="list_bar">// 图文广告</div>保存，来到网站前台刷新，是我们想要的的效果：
这样可以方便用户修改模板。
“热门文章”功能添加
侧边栏的容器代码都是放在left_row这个div里面：
<div class="left_row"></div>在这里，我们把“最新留言”的left_row拷贝一遍，在它的基础上进行修改，最后改成这样：
<div class="left_row">
<div class="list">
<div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">热门文章</a></div>
<div class="list_content">
</div>
</div>
</div>这里我们改一下div的格式：
<div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">热门文章</a></div>
<div class="orderlist">
</div>
</div>然后添加“热门文章”的循环的标签代码：
<?php
$post_num = 10; // 设置调用条数
$args = array(
'post_password' => '',
'post_status' => 'publish', // 只选公开的文章.
'post__not_in' => array($post->ID),//排除当前文章
'caller_get_posts' => 1, // 排除置頂文章.
'orderby' => 'comment_count', // 依評論數排序.
'posts_per_page' => $post_num
);
$query_posts = new WP_Query();
$query_posts->query($args);
while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a><br/>
<?php } wp_reset_query();?>网站前台的效果变成这样：
热门文章是根据评论的数量来显示的，评论越多，越靠前。
最新留言
先删除多余代码，留下最后一条留言即可：
最后剩下这段代码：
<div class="list_content">
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 <br/>qq2205526845 </div>
</div>然后我们拷贝“最新留言”调用的方式，粘贴到仅剩下的那条留言下面：
<div class="list_content">
<div class="msg_title">匿名网友:</div>
<div class="msg_content"> 只是想在网上赚点钱，哪怕只是一点点，够我生活费就行 <br/>qq2205526845 </div>
<?php
$comments = get_comments('status=approve&number=5&order=asc');
foreach($comments as $comment) :
$output ='<div class="msg_title">' .get_comment_author().'发表评论说：</div><div class="msg_content"> <a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . $comment->comment_content . '</a><br/></div>';
echo $output;
endforeach;?>
</div>在这里，我们只需要对照div的样式，你会发现都是一样的，因为我预先调整好了。
然后，把参考代码删除掉，最后的效果就像这样：
<?php
$comments = get_comments('status=approve&number=5&order=asc');
foreach($comments as $comment) :
$output ='<div class="msg_title">' .get_comment_author().'发表评论说：</div><div class="msg_content"> <a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . $comment->comment_content . '</a><br/></div>';
echo $output;
endforeach;?>
网友投票
那在这里，不需要这个功能，所以直接把代码删除掉即可。
热门标签
在最新留言下面，我们来添加“热门标签”的侧边栏：
基于“最新留言”的代码进行修改，然后添加对热门标签的调用：
最终的代码就像这样：
<div class="left_row">
<div class="list">
<div class="list_bar">// 热门标签</div>
<div class="list_content">
<?php wp_tag_cloud('smallest=8&largest=36&'); ?> // 可以设置标签的最小河最大的数量
</div>
</div>
</div>现在因为我们的文章没有添加标签，所以这里不会有显示，你需要到文章中添加标签就没问题。
侧边栏的功能基本就是这些，随着文章内容增加，侧边栏的数据也会跟着丰富。、
友情链接
我们先把多余的代码删除掉，只保留一个div:
<?php get_sidebar();?>
</div>
<div>
<div class="page_row">
</div>
<?php get_footer();?>然后，在这个div里面进行一个友情链接的调用：
<div class="page_row">
<div class="left foot_msg">
<a href="https://www.xuhss.com" target="_blank">虚幻私塾</a> |
<a href="http://www.oxox.work" target="_blank">虚幻大学</a> |
<a href="https://www.xuhss.com" target="_blank">虚幻私塾</a>
</div>
</div> 来到网站前台，刷新：
