這節課，我們會學習：如何制作首頁的sidebar和添加熱門标簽。
首先我們看一下首頁，現在要做的就是這塊區域
wordpress側邊欄 - WordpressCMS主題開發05-首頁sidebar制作和友情連結添加
在這裡，我們把“使用者登入”改為熱門文章，最新留言的功能保留，網友投票的功能删除。
建立sidebar.php檔案
首先，建立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="http://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
修改sidebar.php
首先把“使用者登陸”更改為“圖文廣告”
<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> 儲存，來到網站前台重新整理，是我們想要的的效果：
wordpress圖文廣告 - WordpressCMS主題開發05-首頁sidebar制作和友情連結添加
這樣可以友善使用者修改模闆。
“熱門文章”功能添加
側邊欄的容器代碼都是放在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();?> 網站前台的效果變成這樣：
wordpress熱評文章的效果 - WordpressCMS主題開發05-首頁sidebar制作和友情連結添加
熱門文章是根據評論的數量來顯示的，評論越多，越靠前。
最新留言
先删除多餘代碼，留下最後一條留言即可：
最後剩下這段代碼：
<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;?> wordpress最新留言 - WordpressCMS主題開發05-首頁sidebar制作和友情連結添加
網友投票
那在這裡，不需要這個功能，是以直接把代碼删除掉即可。
熱門标簽
在最新留言下面，我們來添加“熱門标簽”的側邊欄：
基于“最新留言”的代碼進行修改，然後添加對熱門标簽的調用：
最終的代碼就像這樣：
<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="http://www.xuhss.com" target="_blank">虛幻私塾</a> |
<a href="http://www.oxox.work" target="_blank">虛幻大學</a> |
<a href="http://www.xuhss.com" target="_blank">虛幻私塾</a>
</div>
</div> 來到網站前台，重新整理：