WordPress 主題簡明教程
2007年07月17日 原創(chuàng)
開始之前
運行 xampp（下載 xampp ），啟動 apache 和 mysql；
安裝 wordpress（參考 WordPress 中文教程 <作者：jiangzhanyong.com>）；
在主題目錄（C:\xampp\htdocs\wordpress\wp-content\themes）中建立一個新文件夾，如：myThemes。
簡介
每一套 WP 主題都由結(jié)構(gòu)層、表現(xiàn)層和數(shù)據(jù)層構(gòu)成，可以說是典型的、符合 Web 體系標(biāo)準(zhǔn)的“三層結(jié)構(gòu)”。WP 主題的這種模式塊化的特點決定了其設(shè)計其實是非常簡單，但又極其靈活的。可以說，學(xué)會了制作 WP 主題，就相當(dāng)于基本理解了 Web 開發(fā)的客戶端模型，對進一步學(xué)習(xí)掌握 Web 技術(shù)具有重要意義。這也正是 WP 的魅力所在！
在一套 WP 主題中，最基本的兩個文件是 index.php 和 style.css。其中，前者定義結(jié)構(gòu)和內(nèi)容，后者定義樣式。所謂結(jié)構(gòu)，就是由指由 XHTML 標(biāo)簽構(gòu)成的網(wǎng)頁基本架構(gòu)。在 WP 主題中，結(jié)構(gòu)層主要使用的是添加了適當(dāng)?shù)?id 或（和）class 屬性的 div 和 ul 元素，以便更好地通過表現(xiàn)層來控制頁面的布局和外觀。所謂表現(xiàn)層，其實就是網(wǎng)頁的布局和樣式－－也就是外觀。表現(xiàn)層由 CSS（層疊樣式表）規(guī)則定義構(gòu)成。而數(shù)據(jù)層，顧名思義，也就是網(wǎng)站中實際顯示的內(nèi)容，是通過調(diào)用 WP 內(nèi)置的函數(shù)（有時需要傳遞適當(dāng)?shù)膮?shù)）從數(shù)據(jù)庫中取得的。
說明：為簡明起見，本教程不涉及如何定義樣式表（CSS）文件的內(nèi)容。
事實上，當(dāng)我們打開某個主題的文件夾時，看到的并不止這兩個文件，而是更多。但一般來說，在一個完整的 WP 主題文件夾中都應(yīng)該包含下列文件（也稱為模板文件）：頁面 模板文件 用途
首頁 index.php 顯示網(wǎng)站首頁
單頁 single.php 顯示博文的頁面（相當(dāng)于細(xì)節(jié)頁）
靜態(tài)頁 page.php 顯示靜態(tài)頁的頁面（包含各級靜態(tài)頁面）
分類頁 category.php 顯示分類頁的頁面（相當(dāng)于欄目頁）
存檔頁 archive.php 顯示存檔頁的頁面（相當(dāng)于按時間歸類的欄目頁）
搜索頁 search.php 顯示搜索結(jié)果的頁面
評論頁 comments.php 顯示評論的頁面
彈出式評論頁 comments-popup.php 顯示彈出式評論的頁面
404錯誤頁 404.php 顯示 404 錯誤信息的頁面
層疊樣式表 style.css 控制頁面布局外觀
除此之外，一套主題模板中還可以包含 author.php、home.php、date.php、searchform.php 以及 functions.php 等頁面（其中部分頁面稍后介紹）。
雖然上面列出了與 WP 內(nèi)置功能對應(yīng)的 9 個 php 文件，但制作一套主題遠(yuǎn)沒有想像得那么復(fù)雜。因為事實上，你只需要制作一個 index.php 文件，就可以派生出另外 8 個文件來！
從 WP 應(yīng)用主題的機制來說，這 9 個模板文件是存在優(yōu)先級差別的，也可以認(rèn)為是重要性不同。它們的優(yōu)先級順序是：
index.php -> single.php -> page.php -> archive.php -> search.php -> 404.php。
這樣，當(dāng)不存在后邊的頁面時，WP 會自動調(diào)用前面的頁面，直至調(diào)用 index.php。比如，當(dāng)程序調(diào)用頁面頁 page.php 時，如果 page.php 模板文件不存在，那么程序會嘗試調(diào)用前面的文件－－single.php。而如果 single.php 也不存在，那么就會調(diào)用最終的 index.php 來顯示頁面頁?？梢?index.php 屬于“墊底兒”的缺省頁面，它的重要性是最高的。但當(dāng)存在具體頁面時，還是要優(yōu)先使用具體的頁面，可見具體的頁面優(yōu)先級最高。
在明確了 index.php 是一套 WP 主題的核心之后，我們就可以將制作 WP 主題的過程簡單地分成兩步，即－－定義主模板文件 index.php 和派生其他模板文件。
定義主模板文件 index.php
從頁面布局的角度上，有必要將主模板文件 index.php 拆分成 header.php、sidebar.php 和 footer.php 三個子頁面。WP 專門為在 index.php 中包含這三個子頁面提供了對應(yīng)的 get_header()、get_sidebar() 和 get_footer() 函數(shù)。
下面，就來詳細(xì)介紹一下制作 index.php 頁面的過程：
首先，在 myThemes 文件夾中建立一個文本文件并將其重命名為 index.php，然后再建立一個 style.css 文件（內(nèi)容暫時留空）。
然后，用你喜歡的文本編輯器打開 index.php 并輸入下列代碼（最好復(fù)制，因為這一部分不重要）：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head profile=”http://gmpg.org/xfn/11“>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>;
charset=<?php bloginfo(‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?>
<?php wp_title(); ?></title>
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
<!– leave this for stats –>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”
type=”text/css” media=”all” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>
/print.css” type=”text/css” media=”print” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?>
RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>”/>
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_head(); ?>
</head>
<body>
</body>
</html>
顯然，這是一些構(gòu)成網(wǎng)頁文件的 HTML 代碼，當(dāng)然其中包含 PHP 代碼。如前所述，HTML 代碼定義結(jié)構(gòu)，而 PHP 代碼用于生成內(nèi)容。
在 WP 后臺的“主題”模塊中，選擇 myTheme 主題。然后，在瀏覽器中觀察你的 WP 外觀。此時，應(yīng)該顯示頁面一片空白。但通過“查看源文件”，你會發(fā)現(xiàn) index.php 中的 PHP 代碼已經(jīng)生成了一些頭部內(nèi)容。
接著，我們開始動手定義 index.php 中 body 部分的結(jié)構(gòu)和內(nèi)容。
（一）構(gòu)建 header
在 body 元素內(nèi)，新建如下結(jié)構(gòu)化標(biāo)記元素，注意各元素都帶有不同的 id 屬性：
<div id=”page”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”sidebar”></div>
<div id=”footer”></div>
</div>
然后，在該 <div id=”header”></div> 元素的兩個標(biāo)簽之間輸入下列代碼：
<h1><a href=”<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<p><?php bloginfo(‘description’); ?></p>
這里用到了 WP 內(nèi)置的 bloginfo 函數(shù)來生成內(nèi)容，其中：
bloginfo(‘url’)返回網(wǎng)站主頁鏈接；
bloginfo(‘name’)返回網(wǎng)站標(biāo)題；
bloginfo(‘description’)返回網(wǎng)站描述。
保存 index.php 文件，然后在瀏覽器中按 F5 刷新一下頁面，看能看到什么？再通過“查看源文件”，核對一下由 WP 的 bloginfo() 函數(shù)生成的相關(guān)信息。
（二）構(gòu)建 content
在 <div id=”content”></div> 中，我們要通過循環(huán)顯示博文，包括每個博文的標(biāo)題、作者、發(fā)表日期以及其他相關(guān)信息。并且，可以分頁顯示博文（取決于 WP 后臺的設(shè)置）。
首先，在 <div id=”content”> 與 </div> 之間輸入下列代碼：
<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文標(biāo)題及鏈接 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 發(fā)表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(‘M’) ?></span>
<span class=”post-day”><?php the_time(‘d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(‘Author’); ?>：<?php the_author(‘, ‘) ?></span>
<!– 類別 –>
<span class=”post-cat”><?php _e(‘Categories’); ?>：<?php the_category(‘, ‘) ?></span>
<!– 注釋 –>
<span class=”post-comments”>
<?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?></span>
<!– 內(nèi)容 –>
<div class=”entry”>
<?php the_content(‘更多內(nèi)容 »’); ?>
</div>
<!– 其他元（Meta）數(shù)據(jù) –>
<div class=”post-meta”>
<?php edit_post_link(‘編輯’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?><div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(‘前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(‘后一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(‘Not Found’); ?></h2>
</div><?php endif; ?>
看似復(fù)雜，其實不然。首先：
<?php if (have_posts()) : ?>
<?php else : ?>
<?php endif; ?>
這三行，在 WP 中表示 if 控制結(jié)構(gòu)。注意，if 語句通過測試 have_posts() 函數(shù)來判斷是否存在博文。而
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
這兩行，是 WP 中的 while 循環(huán)。其中，while 語句通過測試 have_posts() 決定是否調(diào)用 the_post() 函數(shù)。如果測試 have_posts() 返回 true，則調(diào)用 the_post() 函數(shù)，初始化與博文相關(guān)的內(nèi)置變量。
在 while 循環(huán)內(nèi)部，首先要注意通過 div、h2、span 這三個元素定義的嵌套語義結(jié)構(gòu)，以及相應(yīng)元素的 class 和 id 屬性（其中只為 class 為 post 的 div 元素定義了一個 id 屬性－－post-<?php the_ID() ?>）。這是將來使用 CSS 控制外觀的關(guān)鍵所在。在這個 div 元素中，為顯示博文的相關(guān)信息，分別調(diào)用了以下 WP 函數(shù)：
the_ID()：返回博文 ID；
the_permalink()：返回博文固定鏈接 URL；
the_title()：返回博文標(biāo)題；
the_time(‘M’)：返回發(fā)表日期中的月份；
the_time(‘d’)：返回發(fā)表日期中的天；
the_author()：返回博文作者；
the_category()：返回博文的類別；
the_content()：返回博文的內(nèi)容，其中的參數(shù)表示用于“更多內(nèi)容”的鏈接文本；
以上函數(shù)都是以 the_ 開頭的，加上后面的函數(shù)名不僅頗有自解釋的味道，而且令人聯(lián)想到 this 關(guān)鍵字。此外_e() 函數(shù)是一個包裝函數(shù)，這個函數(shù)主要用于語言的轉(zhuǎn)換，如果調(diào)用該函數(shù)并傳遞標(biāo)準(zhǔn)的 WP 術(shù)語，如：Author 或 Categories，則返回你相應(yīng)語言包中的譯文，在中文包中分別是“作者”和“類別”。當(dāng)然，不用也可。但會失去一些適應(yīng)性。
還有，omments_popup_link() 和 edit_post_link() 兩個函數(shù)，分別顯示注釋和編輯鏈接，這里不多說了。
另外，在 <?php endwhile; ?> 后面顯示了分頁導(dǎo)航鏈接，調(diào)用的函數(shù)分別是：next_posts_link() 和 previous_posts_link()。此時，如果你的博文總數(shù)小于 WP 后臺設(shè)置的最多顯示數(shù)目，比如：你在后臺設(shè)置最多顯示 5 篇，而你有 10 篇博文，就會分頁顯示；否則，如果你的博文少于或等于 5 篇則看不到分頁導(dǎo)航鏈接。
最后，不要丟下 <?php else : ?> 語句后面的內(nèi)容：
<div class=”post”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>
顯然，這是一個錯誤提示信息。
（三）構(gòu)建 sidebar
sidebar 的內(nèi)容當(dāng)然要在 <div id=”sidebar”></div> 元素中構(gòu)建了。sidebar，中文叫側(cè)邊欄，其中可以包含很多內(nèi)容。比如：分類、頁面、鏈接、日歷等等導(dǎo)航及相關(guān)信息。
在 WP 中，sidebar 中的內(nèi)容都以無序（ul）或有序（ol）列表的形式輸出。因此，需要在 <div id=”sidebar”></div> 中輸入以下標(biāo)記：
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li id=”search”>
<?php include(TEMPLATEPATH .’/searchform.php’); ?>
</li> <li id=”calendar”>
<h2><?php _e(‘Calendar’); ?></h2>
<?php get_calendar(); ?>
</li> <?php wp_list_pages(‘title_li=<h2>頁面</h2>’); ?> <li class=”catnav”>
<h2><?php _e(‘Categories’); ?></h2>
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
</li>
<li class=”archivesnav”>
<h2><?php _e(‘Archives’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</li>
<li class=”blogrollnav”>
<h2><?php _e(‘Links’); ?></h2>
<ul>
<?php get_links(‘-1′, ‘<li>’, ‘</li>’, ‘<br />’, FALSE, ‘id’, FALSE, FALSE, -1, FALSE); ?>
</ul>
</li>
<li class=”meta”>
<h2><?php _e(‘Meta’); ?></h2>
<ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?></ul>
</li>
<?php endif ?>
</ul> 以上代碼從第三行開始，分別通過包含 searchform.php 顯示搜索表單；
調(diào)用 get_calendar() 函數(shù)顯示日歷；
調(diào)用 wp_list_pages() 函數(shù)顯示頁面導(dǎo)航；
調(diào)用 wp_list_cats() 函數(shù)顯示分類導(dǎo)航；
調(diào)用 wp_get_archives() 函數(shù)顯示存檔導(dǎo)航；
調(diào)用 get_links() 函數(shù)顯示鏈接導(dǎo)航。
在構(gòu)建側(cè)邊欄時，要為生成搜索框新建一個 searchform.php 文件，其內(nèi)容如下：
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ /><br />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>
將其保存在 myTheme 文件夾中，通過 include 語句包含進來就可以了。注意，常量 TEMPLATEPATH 中保存的是模板路徑。
最后，說明一下以上代碼第二行和倒數(shù)第二行。顯然這是一個 if 語句塊。那這個 if 語句塊包含 sidebar 是何用意呢？這是部件化側(cè)邊欄的需要，就是讓 sidebar 適合 Widget 插件（WP 2.0 后內(nèi)置了 Widget，所以不用再安裝了）。如果要使用 Widget 插件，必須對 sidebar 進行部件化。這樣，在 WP 后臺通過 Widget 插件你就可以使用拖動來方便地定義側(cè)邊欄的組件了。部件化側(cè)邊欄，除了在 ul 元素內(nèi)側(cè)放入這個 if 語句之外，還必須在 myTheme 文件夾中建立一個文件 functions.php，其內(nèi)容如下：
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
（四）構(gòu)建 footer
footer 中一般都一些版權(quán)信息和不太重要的鏈接。所以可以在 <div id=”footer”></div> 元素中簡單地放入下列代碼：
<p>Copyright © 2007 <?php bloginfo(‘name’); ?></p>
至此，核心 index.php 文件就算是大功告成了！
接下來，是拆分 index.php 和基于 index.php 派生子模板文件。
在 myTheme 文件夾中新建 header.php、sidebar.php 和 footer.php 三個文件。把 index.php 中的 <div id=”header”></div>、<div id=”sidebar”></div> 和 <div id=”footer”></div> 三個結(jié)構(gòu)化元素及其內(nèi)容分別轉(zhuǎn)移（剪切）到這三個新文件中。然后，在 <div id=”header”></div> 原來的位置處輸入代碼：
<?php get_header();?>
在 <div id=”sidebar”></div> 原來的位置處輸入代碼：
<?php get_sidebar();?>
在 <div id=”footer”></div> 原來的位置處輸入代碼：
<?php get_footer();?>
前面說過，這三個 get 函數(shù)是 WP 專門為包含結(jié)構(gòu)化的文件定義的?，F(xiàn)在你的 index.php 文件應(yīng)該如下所示：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“><head profile=”http://gmpg.org/xfn/11“>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” /><title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title><meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/print.css” type=”text/css” media=”print” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /><?php wp_head(); ?>
</head>
<body>
<div id=”page”><?php get_header(); ?> <!– content –>
<div id=”content”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文標(biāo)題及鏈接 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 發(fā)表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(‘M’) ?></span>
<span class=”post-day”><?php the_time(‘d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(‘Author’); ?>：<?php the_author(‘, ‘) ?></span>
<!– 類別 –>
<span class=”post-cat”><?php _e(‘Categories’); ?>：<?php the_category(‘, ‘) ?></span>
<!– 注釋 –>
<span class=”post-comments”>
<?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?></span>
<!– 內(nèi)容 –>
<div class=”entry”>
<?php the_content(‘更多內(nèi)容 »’); ?>
</div>
<!– 其他元（Meta）數(shù)據(jù) –>
<div class=”post-meta”>
<?php edit_post_link(‘編輯’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?> <div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(‘前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(‘后一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(‘Not Found’); ?></h2>
</div><?php endif; ?>
</div><!– end content –><?php get_sidebar(); ?> <?php get_footer(); ?></div>
</body>
</html>
然后，是派生子模板文件。把這個“模塊化”的 index.php 文件另存為 single.php、page.php、archive.php、 search.php 和 category.php。當(dāng)然，都保存在 myTheme 文件夾中。這樣，WP 在顯示頁面時就會調(diào)用相應(yīng)的頁面文件了。比如，顯示博文詳細(xì)內(nèi)容時，會調(diào)用 single.php；而顯示頁面內(nèi)容時，則調(diào)用 page.php。
最后，要做的工作就是自定義這些子模板文件。
