1. 程式人生 > >wordpress主題基本檔案配置

wordpress主題基本檔案配置

WordPress主題由一系列檔案和樣式表單組成,這些檔案和樣式表單共同作用生成WordPress網站的外觀。每個主題都不同,使用者可以通過這些主題隨心所欲地更換自己網站的外觀。那麼為什麼我們要自己開發WordPress主題呢?

  • 為自己的WordPress網站打造獨一無二的外觀
  • 利用模板、模板標籤和WordPress Loop創作不同的網頁表現形式和網站外觀
  • 為網站特殊功能如類別頁面和搜尋結果頁面提供其它模板
  • 輕鬆切換兩種網站外觀設計,或利用主題、樣式轉換器來改變網站外觀
  • 設計WordPress主題,然後公開發布,讓大家都看到自己的作品

WordPress主題也有很多好處:

  • 主題將樣式表單和模板檔案從系統檔案中獨立出來,這樣網站升級時就不會對網站的視覺外觀造成大幅影響
  • 每個主題的呈現樣式和網頁佈局都是獨一無二的
  • 通過主題更換,WordPress網站可以快速改變其外觀
  • 使用者再也不必為了讓網站表現得清新自然而清除CSS、HTML、PHP程式碼

我們自己開發WordPress主題原因還在於:

  • 這是一個深入學習CSS、HTML/XHTML、PHP的好機會
  • 同時也是一個積累CSS、HTML/XHTML、PHP實踐經驗的機會
  • 開發主題可以發揮人的創造性
  • 開發主題是一個充滿樂趣的過程(大部分時候)
  • 將主題公開發布,與其他使用者分享自己的勞動成果,回饋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主檔案中新增各種模板標籤,從而呼叫這種模組化的單元元件,讓各個元件顯示在最終生成的頁面上。

下面是這種呼叫的示例:

<?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'); ?>將包含當前主題樣式表單的檔案路徑插入模板輸出結果。使用者可以在輸出結果中新增各種URI資訊,為主題引用檔案。(該程式碼目前已禁用,由 <?php bloginfo('stylesheet_directory'); ?> 替代。)

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

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

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

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

自定義模板

使用者可以利用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. 在主題檔案中附帶自己的聯絡資訊(個人網址或電子郵件),方便使用者遇到問題時諮詢開發者。