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