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