本文由 erdaoo 學(xué)習本站的 WP Theme 教程之后的學(xué)習筆記整理，經(jīng)本站整理，erdaoo 本人同意之后在本站發(fā)表，以便給更多學(xué)習 WP Theme 教程的人幫助。
學(xué)習本教程，需要：
在詳細分解代碼之前，我們還是要先了解一下WP主題的大致情況。一個(gè) WP 的主題是由幾個(gè) templates 文件組成的，每一個(gè)主題必有的二個(gè)文件是：index.php 和 style.css（樣式表），除此之外還有一些其它的文件（不是必須），它們和 index.php 文件間存在優(yōu)先級關(guān)系，如果它們存在，WP 模板系統就會(huì )調用它們顯示相應的頁(yè)面，否則模板系統會(huì )調用 index.php 來(lái)顯示。
它們有可能是以下文件：
首先制作index.php，我們知道在一個(gè)網(wǎng)頁(yè)中，代碼主要分為二部分，一個(gè)是頁(yè)頭信息，一個(gè)是頁(yè)面內容。
<html><head>.........頁(yè)頭信息</head><body>.........頁(yè)面內容</body></html>
每個(gè)主題的頁(yè)頭信息都是幾乎一樣，具體可以查看默認模板的 header.php 文件（為保證所有頁(yè)面的頁(yè)頭信息的一致性，所有頁(yè)頭信息都放在 header.php 文件。）
接下來(lái)我們談下一話(huà)題，關(guān)于母豬的產(chǎn)后護理……（我學(xué)的太雜了，都弄混了）
我們來(lái)談一下body中的內容。
它包含四個(gè)部分，每一部分都可以叫做一個(gè)集成模塊，其實(shí)一個(gè)主題就是由不同的模塊構成，模塊又是由不同的模塊構成。
對于每一個(gè)集成模塊中的內容，理論上是可以隨意放置的，比如我們可以把header模塊中的搜索欄放在sidebar模塊中去。
那如何區分這四個(gè)集成模塊呢？看以下代碼。
<div id="header">這是我的博客</div><div id="content">這是我的日志</div><div id="sidebar">搜索欄，分類(lèi)，存檔，友情鏈接</div><div id="footer">版權信息，我是二道</div>
通過(guò) div 標簽，我們可以把這些模塊分隔開(kāi)來(lái)。
header
現在開(kāi)始我們第一部分的代碼塊，不過(guò)在寫(xiě)代碼之前我還得要啰嗦一句，寫(xiě)代碼要有層次感，要記得縮進(jìn)，不要用空格縮進(jìn)而用TAB鍵。
<div id="header"><h1><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></h1><?php bloginfo('description');?></div>
id 是 div 的一個(gè)屬性，給 id 賦于不同的值，這樣就可以區分每一個(gè)div代碼段。
bloginfo() 是 WP 中定義好的函數，參數 url 返回網(wǎng)址，參數 name 返回網(wǎng)站的名字，參數 description 返回網(wǎng)站描述。
在上面的代碼中，就是為博客的標題并加上一個(gè)超鏈接，并且顯示描述。
如果我們把上面的三行代碼加上頁(yè)頭部分另存為一個(gè)新的文件 — header.php。這樣我們就可以通過(guò)以下 WP 函數導入它們。
<?php get_header(); ?>
這樣的好處是，你只要修改一下header.php文件，所有調用這個(gè)文件的頁(yè)面都會(huì )跟隨改變，而不用一個(gè)一個(gè)地去修改了。
content
現在開(kāi)始我們第二部分的代碼塊：
<div id="content"><?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?><?php endwhile; ?><?php endif; ?></div>
這里使用 if(have_posts() 來(lái)檢測是否有日志存在，如果有的話(huà)，就用 while 循環(huán)顯示。the_post() 就是調用日志的函數。
而每一篇日志又是有標題，有發(fā)布時(shí)間，有分屬類(lèi)別，有讀者的評論，這些又全部需要用 div 標簽來(lái)分隔開(kāi)?？聪旅娴拇a：
<div id="content"><?php if(have_posts()) : ?><!--開(kāi)始檢測--><?php while(have_posts()) : the_post(); ?><!--以下面的格式顯示每篇日志--><div class="post"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><!--含有鏈接地址的日志標題--><div class="entry"><?php the_content();?><!--日志內容--><p class="postmetadata"><!--日志元數據--><?php _e('Filed under:');?><?php the_category(',');?><!--調用日志的分類(lèi)--><?php _e('by');?><!--使用_e()創(chuàng )建可翻譯的主題--><?php the_autnor('');?><!--調用日志作者--><br /><?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?><!--調用一個(gè)彈出的留言窗口，如果這個(gè)功能沒(méi)有激活，則是顯示留言列表--><?php edit_post_link('Edit','|','');?><!--只有在登陸后才可見(jiàn)到，對日志進(jìn)行編輯的鏈接--></p></div><!--日志內容結束--></div><!--一篇日志徹底結束--><?php endwhile; ?><?php endif; ?></div>
現在我們得要說(shuō)說(shuō) class 了，它是與 id 都是標簽的屬性，但是不同之處在于，id 的參數值是唯一的，它在一個(gè)頁(yè)面只能使用一次，而 class 的參數值是可以多次使用，
比如 id=”header” 只能出現一次，因為我們只有一個(gè)地方可以出現博客的名字。而class=”entry” 會(huì )經(jīng)常出現，那是因為我們的博客里不只是有一篇日志。
為什么我們要用到 id 與 class，難道只用一個(gè)不行嗎，反正功能都是相同的。不要忘了我們前面說(shuō)過(guò)的一個(gè)重要文件，style.css 樣式表文件。我們?yōu)槟骋欢未a添加了屬性，如同起個(gè)名字而已，這樣在樣式表中我們就可以為這些名字來(lái)定制它們的樣式了。
這樣說(shuō)你還不明白？那就打個(gè)最簡(jiǎn)單的比方吧，你可以有很多的兄弟，但是你們只能有一個(gè)爹，你不能用你爹的名字叫你的兄弟，但是你爹可以用你兄弟的名 字叫你。樣式表文件就和你奶奶一樣，你爹再牛逼也得聽(tīng)你奶奶的話(huà)，叫他怎么樣他就得要怎么樣。（老大你這個(gè)比喻寒啊，瀑布寒?。。?/p>
前面的代碼中有說(shuō)到，如果檢測到有日志的話(huà)，就用循環(huán)調出來(lái)，可是如果沒(méi)有日志的話(huà)那要怎么樣呢？
<?php else:?><div class="post" id="post-<?php the_ID(); ?>"><?php _e('Not Found');?></div>
把這一段代碼加在 <?php endwhile; ?> 之后就可以了。
當你的博客內容越來(lái)越多的時(shí)候，在 WP 的后臺又設定了首頁(yè)只顯示10個(gè)日志，那么從第11個(gè)開(kāi)始都無(wú)法在首頁(yè)顯示出來(lái)。
這樣在博客的最后一篇日志下面就會(huì )出現后一頁(yè)或前一頁(yè)的鏈接。如果你還不到10個(gè)日志，這個(gè)鏈接就不會(huì )出現。
把下面的代碼加入到 <?php endif; ?> 前面
<div class="navigation"><?php posts_nav_link(); ?></div>
分析一下 posts_nav_link() 這個(gè) WP 函數，它可以有三個(gè)參數：<? posts_nav_link(‘in between‘,’before‘,’after‘)，第1個(gè)參數是顯示在后一頁(yè)和前一頁(yè)鏈接的中間。第2個(gè)參數顯示在后一頁(yè)和前一頁(yè)鏈接的前面。第3個(gè)參數顯示在后一頁(yè)和前一頁(yè)鏈接的后面。用什么來(lái)顯示，你自己決定，常用的就是一些符號或是箭頭而已嘛。
現在再看一下我們已經(jīng)有了哪些個(gè)代碼：
<?php get_header(); ?><div id="content"><?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?><div class="post"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><div class="entry"><?php the_content();?><p class="postmetadata"><?php _e('Filed under:');?><?php the_category(',');?><?php _e('by');?><?php the_autnor('');?><br /><?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?><?php edit_post_link('Edit','|','');?></p></div></div><?php endwhile; ?><div class="navigation"><?php posts_nav_link(); ?></div><?php else:?><div class="post" id="post-<?php the_ID(); ?>" ><?php _e('Not Found');?></div><?php endif; ?></div></body></html>
*********************************************************************************************
寫(xiě)教程不是一個(gè)簡(jiǎn)單的事，它不光讓我心煩，還讓我難以找到適當的詞來(lái)表達，所以要體會(huì )一下當老師的難處。
*********************************************************************************************
第三部分，關(guān)于側邊欄。側邊欄有一個(gè)特點(diǎn)，就是又臭又長(cháng)，當然了這不是什么纏腳布。先不要亂扯。因為地形有限，所以側邊欄里的內容，多以列表的形式 排開(kāi)。下面歡迎一對父子出場(chǎng)，他們的感情是相當的好，從來(lái)都是父子不分家，有父必有子，有子必有父，父中有子，子中有父。他們就是<UL>和<LI>!!!!!!!
<div class="sidebar"><!--注意這里使用的不是id--><ul><li><h2><?php _e('日志分類(lèi)''); ?></h2></li></ul></div>
UL 表示無(wú)序列表，OL 表示列表元素。在側邊欄里，你要有幾個(gè)不同的欄目，欄目的存在，就是為側邊欄進(jìn)行了分類(lèi)整理。每一個(gè)欄目又要有不同的分類(lèi)列表，繼續為上面的代碼添加內容。
<div class="sidebar"><ul><li><h2><?php _e('日志分類(lèi)'); ?></h2><ul><?php wp_list_cats ('sort_column=name&optioncount=1&hierarchical=0'); ?></ul></li></ul></div>
wp_list_cats() 函數為調用日志分類(lèi)列表，它的參數也有三個(gè)。每個(gè)參數之間用&來(lái)分隔。
sort_column=name — 把分類(lèi)按字符順序排列
optioncount=1 — 顯示在每個(gè)分類(lèi)下面的日志數
hierarchial=0 — 不把子分類(lèi)放到子列表條目中
說(shuō)到分類(lèi)，特別說(shuō)一下靜態(tài)頁(yè)面這個(gè)欄目。我們在WP后臺撰寫(xiě)的時(shí)候，有二個(gè)選擇，一個(gè)是撰寫(xiě)日志，一個(gè)是撰寫(xiě)頁(yè)面。對于日志，還可以選擇保存在哪一 個(gè)具體的分類(lèi)下面。對于頁(yè)面就沒(méi)得選擇，只收錄于頁(yè)面欄目之下。 再回到前臺，你可以看到每個(gè)分類(lèi)都有顯示日志的數目，而不顯示標題。在頁(yè)面欄目里，只排列了每一個(gè)頁(yè)面的標題，而不顯示數目。
<?php wp_list_pages('depth=3&title_li="<h2>頁(yè)面</h2>"'); ?>
參數depht=3為可選參數，表示可以設定顯示三級列表。
注意一點(diǎn)，本教程的代碼是制作模版的代碼（PHP 代碼），在WP中使用一個(gè)主題也就是等于在套用一個(gè)模版。在網(wǎng)站中查看源代碼是看不到模版的代碼的（已經(jīng)被解釋成 HTML 代碼）。
<li><h2><?php _e('日志分類(lèi)'); ?</h2><ul><?php wp_list_cats ('sort_column=name&optioncount=1&hierarchical=0'); ?></ul></li>
上面這一段模版代碼，在網(wǎng)頁(yè)中查看源代碼，實(shí)際上顯示的是這樣的：
<li><h2>文章存檔</h2><ul><li><a href="#">與愛(ài)情有關(guān)的分類(lèi)貼子</a></li><li><a href="#">與生活有關(guān)的分類(lèi)貼子</a></li>............................... </ul></li>
增加一個(gè)存檔欄目：
<li><h2><?php _e('文章存檔'); ?></h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
wp_get_archives() 函數是用來(lái)獲取文章存檔的，參數’type=monthly’定義為以每個(gè)月的時(shí)間來(lái)進(jìn)行分類(lèi)存檔
增加一個(gè)友情鏈接欄目：
<?php get_links_list(); ?>
不用擔心沒(méi)有實(shí)際內容，它會(huì )自動(dòng)調用在 WP 后臺中添加的友情鏈接。
增加一個(gè)搜索欄目：
<li id="search"><?php /searchform.php'); ?></li>
這里使用 include() 函數調用一個(gè)文件，參數 TEMPLATEPATH 為主題文件夾路徑，為了調用成功，你還需要有一個(gè)文件：searchform.php。
增加一個(gè)日歷欄目：
<li id="calendar"><h2><?php _e('日歷'); ?></h2><?php get_calendar(); ?></li>
這里就不用多廢話(huà)了。
增加一個(gè)管理欄目：
<li><h2><?php _e('管理'); ?></h2><ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li><?php wp_meta(); ?></ul></li>
wp_loginout() 來(lái)確定你是否登陸，如果登陸就顯示登出鏈接，如果沒(méi)有登陸，就顯示登陸的鏈接。
wp_register() 來(lái)確定你的身份，如果沒(méi)有登陸，就顯示注冊的鏈接，如果有的話(huà)，就顯示管理的鏈接。
而wp_meta() 卻是什么也沒(méi)有做。也不用去理它，還沒(méi)有人來(lái)說(shuō)明它是起什么作用的。實(shí)際上它是 WordPress 的hook。
窗體化側邊欄
<?php /* Widgetized sidebar, if you have the plugin installed. */if ( !dynamic_sidebar') || !dynamic_sidebar() ) : ?>
在側邊欄開(kāi)始的地方第一個(gè)<ul>的后面，加上以上代碼。也要在側邊欄結束的地方</ul>前面加上一句
<?php endif; ?>
從 WP2.0 開(kāi)始，已經(jīng)在后臺集成了一個(gè)側邊欄的插件－－Widget，它的功能就是可以很方便的在WP后臺調整側邊欄中的內容，直接使用鼠標就可以移動(dòng)每一個(gè)欄目的位置，而不需要去修改相應的代碼。讓每一個(gè)欄目都以窗體化存在。
function_exists(‘dynamic_sidebar‘) || !dynamic_sidebar()) 這兩個(gè)參數來(lái)自于一個(gè)新的文件 — functions.php 我們需要創(chuàng )建這個(gè)文件才可以完成側邊欄的窗體化.。
通過(guò)觀(guān)察不同的WP主題，會(huì )發(fā)現在側邊欄中的內容遠不止以上所列舉的，
要在學(xué)習中舉一反三，才會(huì )制作出更加出眾的主題。
至此，側邊欄中的內容結束，我們也可以把第三部分的代碼另存為一個(gè)新的文件 — sidebar.php，在index.php中填加一句代碼就可以使用側邊欄
<?php get_sidebar(); ?>
順便再增加一行代碼：
<?php get_footer();?>
這是調用尾部文件 footer.php 的代碼。我想你應該知道如何處理一個(gè)簡(jiǎn)單的 PHP 文件了，要么你就再重頭學(xué)一次本教程。
再一次查看一下index.php有了哪些代碼
<?php get_header(); ?><div id="content"><?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?><div class="post"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><div class="entry"><?php the_content();?><p class="postmetadata"><?php _e('Filed under:');?><?php the_category(',');?><?php _e('by');?><?php the_autnor('');?><br /><?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?><?php edit_post_link('Edit','|','');?></p></div></div><?php endwhile; ?><div class="navigation"><?php posts_nav_link(); ?></div><?php else:?><div class="post" id="post-<?php the_ID(); ?>" ><?php _e('Not Found');?></div><?php endif; ?></div><?php get_sidebar(); ?><?php get_footer();?>
index.php 文件的代碼已經(jīng)全在這里了，但是只有第二部分內容需要詳細的代碼，而其它的部分我們都可以調用外部文件，至此一個(gè) WP 的主題構造已經(jīng)搭建好，再一次提醒各位，檢查代碼，確認書(shū)寫(xiě)正確。只有不厭其煩地寫(xiě)代碼才會(huì )對代碼有更深刻的印像。
下面開(kāi)始創(chuàng )建其它文件
將index.php的全部代碼另存為archive.php，并且把 the_content 改成 the_excerpt，
創(chuàng )建存檔文件，它會(huì )顯示在分類(lèi)欄目下的每篇日志的摘要。
將archive.php另存為 search.php，創(chuàng )建搜索文件，這樣就可以在搜索中得到每篇文章的摘要。
將 index.php 的全部代碼另存為 page.php，創(chuàng )建頁(yè)面模板文件，在 <?php the_content(); ?> 下面輸入以下代碼：
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
說(shuō)明：如果一個(gè)頁(yè)面，篇幅超長(cháng)的話(huà)，我們可以把它截斷分成幾頁(yè)來(lái)顯示，
<?php edit_post_link('Edit', '<p>', '</p>'); ?>
說(shuō)明：顯示一個(gè)可以編輯的鏈接
刪除掉 <p class=“postmetadata”> 至 </p> 這一塊的代碼
刪除掉以下代碼：
<div class="navigation"><?php posts_nav_link(); ?></div>
說(shuō)明：對于靜態(tài)頁(yè)面，它沒(méi)有屬于哪個(gè)分類(lèi)，我們也不希望被某人評論，當然它也不能顯示與另一個(gè)頁(yè)面間的連接，所在要去掉一部分代碼。
將index.php的全部代碼另存為single.php，創(chuàng )建單篇文章文件，點(diǎn)擊文章的標題，可以查看全文內容。在 <?php the_content(); ?> 下輸入：
<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
這段代碼和上一例相同，都是可以用來(lái)截斷文章。
刪除以下代碼：
<br /><?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?>
把 <?php posts_nav_link(); ?> 替換成 <?php previous_post_link(‘« %link‘) ?> <?php next_post_link(‘ %link »‘) ?>
說(shuō)明：在單篇文章的下面顯示的應是上一篇與下一篇的鏈接，而不是上一頁(yè)與下一頁(yè)的鏈接。
如何處理留言評論？
想一想，每一個(gè)留言評論都是對于一個(gè)文章而產(chǎn)生的，所以只要在單篇文章頁(yè)面里添加一個(gè)調用評論的函數就可以。
在 single.php 文件中 <div class=“entry”> 代碼塊結束的 </div> 下面，輸入以下代碼：
<div class="comments-template"><?php comments_template(); ?></div>
comments_template() 這個(gè) WP 函數是用來(lái)從 comments.php 文件調用評論模板。所以我們還要創(chuàng )建一個(gè) comments.php 文件。
聯(lián)系客服
