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