WordPress 主題教程 #6:側邊欄

【轉載自我愛水煮魚

側邊欄從零開始創建 WordPress 主題系列教程的第六篇,這一篇我們主要講解 WordPress 主題的側邊欄,讓你很快掌握它的結搆,并能編碼和樣式化它。

在開始側邊欄之前,這是現在 index.php 文件的樣子。

第1步:創建 id 為 "sidebar" 的 DIV

首先讓我們創建一個名字為 sidebar 的 DIV,這樣可以把側邊欄中的所有東西都放入其中。在 container 的后面和 </body> 標簽的前面輸入以下代碼:

<div class=”sidebar”>
</div>

第2步:給側邊欄的 DIV 添加無序列表

在新的 sidebar 的 DIV 標簽中創建一個新的無序列表。

<ul> - 開始無序列表
</ul> - 結束無序列表

第3步:給這個無序列表添加原屬

增加一個列表元素(LI)到無序列表(UL)的中間并把一個子標題添加到這個列表中。

<li><h2><?php _e(’Categories’); ?></h2>

</li>

注意添加制表符到<li></li> 標簽之前為了代碼縮進。

<li> - 開始列表元素
<h2> - 開始子標題
<?php _e(’Categories’); ?> - 輸出字符 Categories
</h2> - 結束子標題
</li> - 結束列表條目

保存 index.php 文件并刷新瀏覽器。現在應該可以看到 Categories 子標題結搆應該這樣:

子標題前面的小圓點指明這個子標題是在一個列表元素中(LI)。如果無序列表(UL)有兩個列表元素,那么將有兩個小點。

第4步:添加分類鏈接列表

在列表條目中添加下面代碼:

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

這里是上面代碼的解釋:

<ul> - 開始另一個無序列表
<?php wp_list_cats(); ?> - 調用分類鏈接列表
</ul> - 結束無序列表

保存并刷新瀏覽器。下面是分類鏈接列表的樣子:

默認的分類是 Uncategorized。如果你沒有把日志發布到多個分類下面,那么你的列表鏈接列表應該是只有一個鏈接 Uncategorized。

更進一步的解釋:

  • sort_column=name - 把分類按字符順序排列
  • optioncount=1 - 顯示每個分類含有的日志數
  • hierarchial=0 - 不按照層式結搆顯示子分類,這就解釋了為什么子分類鏈接是列在列表中第一級。
  • & - 每次增加另一個參數的時候,需在它之前要輸入 & 用來把和現有的參數區分開。如 &sort_columnoptioncount之間。

為什么不把 <?php wp_list_cats(); ?> 放入<li></li> 標簽中呢?

當我們使用 wp_list_cats() 這個函數調用鏈接列表函數的時候,它會自動附上一組 <li></li>(列表條目)標簽在每個鏈接的左右。查看頁面源代碼;可以看到每個連接的周圍都已經有一組列表元素的標簽。

當處理側邊欄,無序列表和列表元素的時候,我們一定記得規則 #1:按順序關閉所有標簽。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems