|
本文由 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 來(lái)顯示。 它們有可能是以下文件：
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 文件,。） 接下來(lái)我們談下一話題,，關(guān)于母豬的產(chǎn)后護(hù)理……（我學(xué)的太雜了，都弄混了） 我們來(lái)談一下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> 通過(guò) div 標(biāo)簽,，我們可以把這些模塊分隔開來(lái)。 header 現(xiàn)在開始我們第一部分的代碼塊,，不過(guò)在寫代碼之前我還得要啰嗦一句,，寫代碼要有層次感，要記得縮進(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。這樣我們就可以通過(guò)以下 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() 來(lái)檢測(cè)是否有日志存在，如果有的話,，就用 while 循環(huán)顯示,。the_post() 就是調(diào)用日志的函數(shù)。 而每一篇日志又是有標(biāo)題,，有發(fā)布時(shí)間,，有分屬類別，有讀者的評(píng)論,，這些又全部需要用 div 標(biāo)簽來(lái)分隔開,。看下面的代碼： <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è)功能沒(méi)有激活,，則是顯示留言列表--> <?php edit_post_link('Edit','|','');?><!--只有在登陸后才可見(jiàn)到，對(duì)日志進(jìn)行編輯的鏈接--> </p> </div><!--日志內(nèi)容結(jié)束--> </div><!--一篇日志徹底結(jié)束--> <?php endwhile; ?> <?php endif; ?> </div> class現(xiàn)在我們得要說(shuō)說(shuō) class 了,，它是與 id 都是標(biāo)簽的屬性,，但是不同之處在于，id 的參數(shù)值是唯一的,，它在一個(gè)頁(yè)面只能使用一次,，而 class 的參數(shù)值是可以多次使用， 為什么我們要用到 id 與 class,，難道只用一個(gè)不行嗎,，反正功能都是相同的。不要忘了我們前面說(shuō)過(guò)的一個(gè)重要文件,，style.css 樣式表文件,。我們?yōu)槟骋欢未a添加了屬性，如同起個(gè)名字而已,，這樣在樣式表中我們就可以為這些名字來(lái)定制它們的樣式了。 這樣說(shuō)你還不明白,？那就打個(gè)最簡(jiǎn)單的比方吧,，你可以有很多的兄弟,，但是你們只能有一個(gè)爹，你不能用你爹的名字叫你的兄弟,，但是你爹可以用你兄弟的名 字叫你,。樣式表文件就和你奶奶一樣，你爹再牛逼也得聽(tīng)你奶奶的話,，叫他怎么樣他就得要怎么樣,。（老大你這個(gè)比喻寒啊，瀑布寒?。,。?/p> Not Found前面的代碼中有說(shuō)到，如果檢測(cè)到有日志的話,，就用循環(huán)調(diào)出來(lái),，可是如果沒(méi)有日志的話那要怎么樣呢？ <?php else:?> <div class="post" id="post-<?php the_ID(); ?>"> <?php _e('Not Found');?> </div> 把這一段代碼加在 <?php endwhile; ?> 之后就可以了,。 頁(yè)面導(dǎo)航當(dāng)你的博客內(nèi)容越來(lái)越多的時(shí)候,，在 WP 的后臺(tái)又設(shè)定了首頁(yè)只顯示10個(gè)日志，那么從第11個(gè)開始都無(wú)法在首頁(yè)顯示出來(lái),。 這樣在博客的最后一篇日志下面就會(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è)鏈接的后面。用什么來(lái)顯示,，你自己決定,，常用的就是一些符號(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ù)暮?，從?lái)都是父子不分家，有父必有子,，有子必有父,，父中有子，子中有父,。他們就是<UL>和<LI>!!!!!!! <div class="sidebar"><!--注意這里使用的不是id--> <ul> <li> <h2><?php _e('日志分類''); ?></h2> </li> </ul> </div> UL 表示無(wú)序列表,，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ù)之間用&來(lái)分隔。 說(shuō)到分類,，特別說(shuō)一下靜態(tài)頁(yè)面這個(gè)欄目,。我們?cè)赪P后臺(tái)撰寫的時(shí)候，有二個(gè)選擇,，一個(gè)是撰寫日志,，一個(gè)是撰寫頁(yè)面。對(duì)于日志,，還可以選擇保存在哪一 個(gè)具體的分類下面,。對(duì)于頁(yè)面就沒(méi)得選擇，只收錄于頁(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="#">與愛(ài)情有關(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ù)是用來(lái)獲取文章存檔的,，參數(shù)’type=monthly’定義為以每個(gè)月的時(shí)間來(lái)進(jìn)行分類存檔 增加一個(gè)友情鏈接欄目： <?php get_links_list(); ?> 不用擔(dān)心沒(méi)有實(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() 來(lái)確定你是否登陸，如果登陸就顯示登出鏈接,，如果沒(méi)有登陸,，就顯示登陸的鏈接。 窗體化側(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ù)來(lái)自于一個(gè)新的文件 — functions.php 我們需要?jiǎng)?chuàng)建這個(gè)文件才可以完成側(cè)邊欄的窗體化.。 通過(guò)觀察不同的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'); ?> 說(shuō)明：如果一個(gè)頁(yè)面，篇幅超長(zhǎng)的話,，我們可以把它截?cái)喾殖蓭醉?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ō)明：對(duì)于靜態(tài)頁(yè)面，它沒(méi)有屬于哪個(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'); ?> 這段代碼和上一例相同，都是可以用來(lái)截?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 »‘) ?> 說(shuō)明：在單篇文章的下面顯示的應(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ù)是用來(lái)從 comments.php 文件調(diào)用評(píng)論模板,。所以我們還要?jiǎng)?chuàng)建一個(gè) comments.php 文件,。 |
|
|
來(lái)自： uu2233 > 《網(wǎng)站》
