WordpressCMS主題開發05-首頁sidebar製作和友情連結新增

這節課，我們會學習：如何製作首頁的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"> 只是想在網上賺點錢，哪怕只是一點點，夠我生活費就行&nbsp;<br/>qq2205526845 </div>

    <div class="msg_title">匿名網友:</div>
    <div class="msg_content"> 我只是想在網上賺點錢，哪怕只是一點點，夠我生活費就行&nbsp;<br/> </div>

    <div class="msg_title">匿名網友:</div>
    <div class="msg_content"> 我想要賺點外塊，夠我付房費就可以了， </div>

    <div class="msg_title">匿名網友:</div>
    <div class="msg_content"> 我只是想在網上賺點錢，哪怕只是一點點，夠我生活費就行&nbsp;<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;"/>&nbsp;<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>

儲存，來到網站前臺重新整理，是我們想要的的效果：

這樣可以方便使用者修改模板。

“熱門文章”功能新增

側邊欄的容器程式碼都是放在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"> 只是想在網上賺點錢，哪怕只是一點點，夠我生活費就行&nbsp;<br/>qq2205526845 </div>
    </div>

然後我們拷貝“最新留言”呼叫的方式，貼上到僅剩下的那條留言下面：

    <div class="list_content">
    <div class="msg_title">匿名網友:</div>
    <div class="msg_content"> 只是想在網上賺點錢，哪怕只是一點點，夠我生活費就行&nbsp;<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="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> 

來到網站前臺，重新整理：

• 本文固定連結: http://www.xuhss.com/theme-dev/cms/sidebar-friendship-link
• 轉載請註明: MrBang <time>2018年05月25日 </time>於 虛幻私塾 發表