天天看點

WordPress主題開發

剖析主題

WordPress主題被儲存在wp-content/themes/中。所有主題的樣式表單檔案、模闆檔案、可選函數檔案(functions.php)以及圖檔檔案都存放在themes檔案夾中。例如,名稱為“test”的檔案應該存儲在wp-content/themes/test/中。

安裝WordPress時系統預設配置兩個主題,主題Classic和主題Default。這兩個主題類型不同,生成頁面顯示結果使用的也是不同的函數和标簽。使用者可以仔細研究這兩個主題的檔案,為自己建立主題檔案打下基礎。

WordPress主題由三種主要檔案與若幹圖檔組成。第一種檔案是樣式表單style.css,style.css決定網頁的外觀。第二種是可選函數檔案functions.php。還有一種則是模闆檔案,模闆檔案決定網頁顯示資訊的生成方式。下面我們逐個分析這些檔案。

主題樣式表單

樣式表單style.css不僅要提供主題的CSS樣式資訊,同時也必須以注釋形式提供主題的詳細資訊。所有主題在注釋頭中列出的資訊都必須是唯一的,不能與其它主題相同。相同的注釋頭資訊會導緻主題選擇對話框運作出錯。仿照已有主題時,注意更改注釋頭資訊。

下面是一個樣式表單的前幾行代碼,也就是樣式表單的“頁眉”部分,假設其中的主題名為“Rose”:

/*   
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/      

這是一個簡單的主題,主題隻有一個style.css檔案,可能還有若幹圖檔(如果存在圖檔)。為了建立這樣的主題,使用者首先要編輯模闆檔案,指定一系列模闆供主題繼承使用。例如,如果希望 主題“Rose” 從主題“test”中繼承模闆, 可以在Rose主題的style.css檔案的代碼開始部分加上 Template: test。這表示,“test” 是“Rose”的父模闆, “Rose” 隻由一個style.css檔案和若幹相應的圖檔構成,這些檔案和圖檔都被存儲在wp-content/theme/Rose檔案中。此外(從WordPress 2.7起,) 子主題中也可包含模闆檔案,使用者可以在控制闆中将模闆檔案選項設為normal,若子主題的模闆檔案與父主題的模闆檔案名相同,子主題模闆檔案會改寫父主題模闆檔案。

WordPress利用style.css檔案中的注釋頭代碼來驗證某個主題,然後将該主題作為可用主題與其它所有已安裝主題共同顯示在管理面闆>外觀>主題中。

注意:定義父主題時,請務必在注釋頭Template部分使用style的檔案名。例如,如果要使用WordPress預設主題(Default)的父模闆,編寫代碼時應該使用Template: default,而不是Template: WordPress Default,Default是主題的檔案名。

主題函數檔案

主題可以使用函數檔案,該函數檔案的檔案名為functions.php,位于主題的子目錄中。functions.php的功能類似于插件,如果使用的主題中有functions.php檔案,WordPress初始化(管理界面和其它界面)時會自動加載該檔案。functions.php檔案的建議用法如下:

  • 定義主題模闆檔案中使用的函數
  • 生成管理界面,讓使用者選擇主題的顔色、風格以及其他樣式

WordPress預設主題“Default”中帶有一個定義函數的functions.php檔案和一個管理界面,使用者可以作為學習示例。在WordPress手冊的“常用函數”中可以查到更多functions.php檔案的相關資訊。

主題模闆檔案

模闆是一種用來生成使用者所請求頁面的PHP源檔案。

WordPress允許使用者為網站不同部分定義不同的模闆;但即使網站不完全擁有這些不同的模闆也可以正常運作。系統根據模闆層級與特定主題中的可用模闆來選取并生成模闆。主題開發人員可以規定使用模闆所執行的總定制數量。例如在某種極端的情況下,可能隻能用index.php這一個模闆檔案作為網站生成的所有頁面的模闆。普通情況下,使用者使用不同的模闆檔案生成不同頁面,這樣可以達到最佳自定義效果。

基本模闆

一個WordPress主題至少包括兩個檔案:

  • style.css
  • index.php

這些檔案都位于主題檔案中。index.php模闆檔案靈活易用,可以存儲關于頁眉、側邊欄、頁腳、内容、類别、查找、錯誤以及通路者請求的頁面的所有引用資訊。index.php還可以劃分成子產品化的模闆檔案,每個子產品分擔部分系統任務。使用者不指定模闆檔案時,WordPress會使用内置的預設檔案。例如,如果使用者沒有comments.php 或comments-popup.php模闆檔案,WordPress會自動通過模闆層級選擇wp-comments.php 以及 wp-comments-popup.php模闆檔案進行操作。這些預設模闆未必能夠完全配合使用者的主題,是以使用者的最佳選擇是指定一個自己的模闆檔案。可以用來劃分(劃分内容存儲在主題檔案中)的常用檔案包括:

  • header.php
  • sidebar.php
  • footer.php
  • comments.php
  • comments-popup.php

通過這些模闆檔案子產品,使用者可以在Index.php主檔案中添加各種模闆标簽,進而調用這種子產品化的單元元件,讓各個元件顯示在最終生成的頁面上。

  • 用模闆标簽 get_header() 調用頁眉
  • 用模闆标簽get_sidebar()調用側邊欄
  • 用模闆标簽 get_footer()調用頁腳

下面是這種調用的示例:

<?php get_sidebar(); ?>    
<?php get_footer(); ?>        

在模闆中有更多關于不同模闆的運作方式以及資訊生成方式的相關資訊。

基于查詢的模闆

WordPress可以為不同的查詢類型加載不同模闆。有兩種方法可以實作這一效果:一種是使用内置模闆層級,另一種是在模闆檔案的主循環中使用條件标簽。

使用者使用模闆層級時需要給出專用模闆檔案。這些專用模闆檔案會自動改寫Index.php檔案。例如,如果使用者的主題中有一個名為category.php的模闆以及一個需要查詢的類别,系統會加載category.php檔案而不是index.php檔案。category.php檔案不存在時按正常使用index.php檔案。

使用category-6.php等類似名稱的檔案能夠在模闆層級中獲得更為詳細的資訊。如果要生成一個類别編号為6的頁面,系統調用category-6.php檔案,而不再使用category.php檔案。(在WordPress 2.3與更低版本中,網站管理者可以在管理面闆的連結菜單中查找各類别ID,自 2.5版本起,WordPress從控制闆中删除了ID一欄,使用者可以點選“Edit Category(編輯類别)”,根據URL位址欄中cat_ID的值來判斷類别ID。URL位址欄的顯示内容可能類似于'...categories.php?action=edit&cat_ID=3' ,其中的“3”就是類别ID。)關于類别模闆的更多資訊參見設定分類頁面。

如果使用者主題對使用模闆檔案的控制需求超過了對模闆層級内容的控制需求,使用者可以使用條件标簽。條件标簽檢查WordPress主循環并判斷某個指定條件是否為真,然後使用者可以根據該條件加載相應模闆,或在網頁上顯示相應資訊。

例如要在某篇日志中(日志隸屬于某個指定類别)生成一個獨特的樣式表單,代碼可能是這樣的:

<?php
if (is_category(9)) {
   // looking for category 9 posts
   include(TEMPLATEPATH . '/single2.php');
} else {
   // put this on every other category post
   include(TEMPLATEPATH . '/single1.php');
}
?>      

如果使用查詢,代碼則是這樣的:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
   include(TEMPLATEPATH . '/single2.php');
} else {
   include(TEMPLATEPATH . '/single1.php');
}
?>      

兩種代碼會根據所顯示的日志類别生成不同模闆以供使用。查詢條件不僅限于類别查詢—— 條件标簽s中介紹了所有查詢選項。

主題模闆檔案清單

下面是WordPress主題模闆檔案的清單。使用者的主題中也可能帶有其它樣式表單、圖檔或檔案,不過下面這些檔案在WordPress中都有着特殊意義。

style.css

主樣式表單。主題中必須包含style.css檔案,而style.css檔案中必須含有主題的注釋頭資訊。

index.php

主模闆。如果使用者使用的主題有自己的模闆,必須具備index.php檔案。

comments.php

注釋模闆。如果使用者使用的主題沒有comments.php檔案,可使用WordPress預設主題“Default”的comments.php檔案。

comments-popup.php

彈出式注釋模闆。如果使用者使用的主題沒有comments-popup.php檔案,可使用WordPress預設主題“Default”的comments-popup.php檔案。

home.php

首頁模闆

single.php

單篇日志模闆。用于查詢某篇日志。該模闆檔案和其它查詢模闆檔案不存在時,可用index.php檔案代替。

page.php

頁面模闆。用于查詢某個單獨頁面。

category.php

類别模闆。用于查詢某個類别。

author.php

作者模闆。用于查詢作者。

date.php

日期/時間模闆。用于查詢日期或時間。詳細劃分到年、月、日、時、分、秒。

archive.php

存檔模闆。用于查詢類别、作者或日期。注意:category.php與date.php可能會為各自的查詢類型改寫archive.php檔案。

search.php

搜尋結果模闆。用于執行搜尋。

404.php

404“頁面未找到”模闆。WordPress無法查找到比對查詢的日志或頁面時,使用404.php檔案。

在WordPress中這些檔案都有特殊意義,當相應的條件标簽(即 is_*(); 函數)傳回的值為true時,根據模闆層級,這些檔案可在不同情況下替代index.php檔案。例如,假設網頁上隻要求顯示一篇日志,如果is_single() 函數傳回“true”,并且目前主題中有single.php檔案,WordPress會用該模闆檔案來生成所請求頁面。

從模闆中引用檔案

WordPress預設主題Default(基于WordPress 1.2的主題Kubrick布局,開發者 Michael Heilemann)極好地向我們展示了查詢映射到模闆上的過程。

代碼 <?php bloginfo('template_directory'); ?>将模闆檔案的URL路徑插入模闆輸出結果。使用者可以在輸出結果中添加各種URI資訊,以便為主題引用檔案。

代碼<?php bloginfo('stylesheet_directory'); ?>将包含目前主題樣式表單的檔案路徑插入模闆輸出結果。使用者可以在輸出結果中添加各種URL資訊,為主題引用檔案。(該代碼目前已禁用,由 <?php bloginfo('stylesheet_directory'); ?> 替代。)

常量TEMPLATEPATH是對目前主題模闆檔案的絕對路徑(路徑後沒有結尾斜線/)的引用。

注意:用在樣式表單(即是樣式表)中的URI都是樣式表單的相對URI,而不是引用樣式表單的頁面的URL。這樣避免了在CSS檔案中調用PHP代碼來指定檔案。例如,如果使用者在主題中調用images/檔案,隻需要在CSS中指定相對檔案,如:

h1 { background-image: URL(images/my_background.jpg); }      

這是一個用URL在模闆中引用檔案的典型例子, 如此一來,模闆就不需要完全依賴于絕對路徑了。

自定義模闆

使用者可以利用WordPress插件系統以及template_redirect來定制使用者自己設計的模闆。在插件API中可以找到更多制作插件的資訊。

插件API 鈎子

如果可能會用到某個WordPress插件,那麼開發主題時請記住不要讓你所制作的主題和插件産生沖突。插件通過“Action Hooks(運作的鈎子)”為WordPress增加各種附加功能。大多數Action Hooks都在WordPress的核心PHP代碼中,是以使用者的主題即使沒有關于這些hooks的标簽,這些Action Hooks也可以正常運作。盡管如此,為了能讓插件在頁眉、頁腳、側邊欄或頁面的正文部分直接顯示資訊,主題中需要配備少量Action Hooks。下面我們列出這些必備的Action Hook 模闆标簽:

wp_head

運作于主題的<head> 元素中; header.php 模闆。示例插件作用:添加JavaScript代碼。

用法:<?php do_action('wp_head'); ?>

-或-  <?php wp_head(); ?>

wp_footer

運作于主題的“頁腳”中;footer.php模闆。示例插件作用:在頁腳下方即所有代碼的結尾部分插入PHP代碼。

用法:<?php do_action('wp_footer'); ?>

-或-  <?php wp_footer(); ?>

wp_meta

運作于主題菜單或側邊欄的 <li>Meta</li> 區域;sidebar.php模闆。示例插件作用:調用輪轉公告或标簽雲。

用法:<?php do_action('wp_meta'); ?>

-或-  <?php wp_meta(); ?>

comment_form

運作于comments.php 以及comments-popup.php中,評論表關閉标簽(</form>)前。示例插件作用:顯示評論預覽。

用法:<?php do_action('comment_form', $post->ID); ?>

在實際應用中,預設主題模闆中包含了這些插件hooks。

主題開發總結性原則

確定主題檔案符合以下要求(README檔案可以幫助很多主題使用者解決遇到的問題):

1. 準确描述所開發的主題和模闆檔案能夠達到的效果

2. 堅持标準主題層級的命名約定

3. 如果主題有任何缺陷,請明确辨別

4. 如果模闆檔案和樣式表單檔案有任何改動,請在注釋中加以說明。為所有修改内容、模闆、CSS樣式以及交叉性模闆檔案添加注釋。

5. 如果主題開發者有任何特殊要求(如希望使用該主題的使用者怎樣定制改寫規則,或怎樣使用某些特定模闆、圖檔或檔案),請仔細地說明相關步驟,以使使用者能夠成功使用主題。

6. 主題開發者需要在不同的浏覽器上測試自己開發的主題,了解使用者可能遇到的問題

7. 在主題檔案中附帶自己的聯系資訊(個人網址或電子郵件),友善使用者遇到問題時咨詢開發者。

繼續閱讀