製作了一幅講解 Wordpress 主題架構的圖,非常清晰的剖析了 Wordpress 的主題模板結構,原圖為英文,下面翻譯成中文。

希望對製作 Wordpress 主題 (模板) 有一些幫助。

WordPress主題(模板)架構圖解

 

中文文字如下:

圖解 Wordpress 主題 (模板) 設計

(瞭解 Wordpress 部落格如何運作)

header.php(網站頭部)

這是一個全域性檔案 (易 IT 注:Wordpress 產生的每個頁面都會包含 header.php 裡的程式碼),顯示頁面的題頭 (header) 和導航選單,還包含了 HTML 檔案的 head 程式碼 (<head>…</head>) 。< /p>

迴圈部分 (the loop,頁面主體)

透過一個個包含 「迴圈 (loop) 結構」 的模板檔案,在網站主要區域顯示網站的主要內容。

sidebar.php(邊欄)

這個檔案控制邊欄顯示什麼。如果有多個邊欄,你可以在 functions.php 檔案裡設定,邊欄 「小工具 (widgets)」 的內容可以在 WordPress 的管理控制面板 (wp-admin) 裡設定。

footer.php(底部)

包含了全域性的底部檔案和關閉 HTML 標籤 (</html>) 的程式碼。

WordPress 主題是由模板資料夾 (易 IT 注:../wp-contents/themes/模板名稱/) 裡一系列檔案組成,每個檔案都控制著模板的不同部分。無論在網站的哪個頁面,這些頁面的某些部分一般來說都是靜態的,由 header,siderbar 和 footer 檔案來控制。你可以透過修改這些檔案,來看網站的哪些部分是透過哪些檔案控制的。

主頁 (home)

index.php

index.php 用來控制如何顯示網站的主頁。 index.php 裡預設地包含了一段查詢和顯示最新文章的迴圈程式碼 (loop),並在底部顯示一個超連結,用來檢視先前的文章。

另外,你也可以在 wp-admin>settings>read 裡設定任何你在wordpress裡建立的頁面作為主頁。也就是說,你可以設定不同的頁面 (或 url) 作為常規的部落格文章來作為主頁來顯示,而那個頁面還是透過 index.php 模板產生的.

文章頁 (posts)

single.php

single.php 用來控制文章頁面如何顯示。這個檔案包含了查詢和顯示當前文章的迴圈。

如果你想顯示邊欄 (和其他想要顯示的元素),你可以在這個檔案裡指定。你也可以透過修改這個檔案來使文章頁面和其他頁面有所區別。

頁面 (pages)

page.php

page.php 控制著 Wordpress Page(頁面,不同與文章 posts) 的顯示。你可以選擇去掉邊欄或其他元素,或增加一些只有 page 才有的元素。

WordPress 同時允許你建立不同的 page 模板,用來顯示不同型別的 page(頁面) 。建立 page 模板很簡單,你只要複製 page.php, 改個你喜歡的名字,然後在檔案頂部新增如下程式碼:

<?php

/*

Template Name: 你命名的頁面模板檔名

/*

?>

歸檔 (archives)

archive.php, category.php,tag.php

你可以透過以上的檔案來控制各種歸檔類頁面的顯示。如果沒有歸檔類頁面模板,那麼歸檔頁面會使用 index.php 來做模板;不過,你可以建立一個 archive.php 來替代 index.php 作為歸檔類頁面的模板。如果你建立了 category.php, 這個檔案會替代 archives.php 來作為分類頁面 (categories) 的模板。如果你建立了 tag.php, 這個檔案會優先作為標籤頁面 (tag) 的模板。

迴圈 (The Loop)

迴圈可能是 Wordpress 模板裡最強大的部分。它從一個查詢開始 (來決定要抓取哪篇文章或頁面的資料),並已一個結束迴圈語句結束 (endwhile) 。迴圈裡顯示什麼取決於你的需要。你可以在迴圈裡顯示文章標題、文章內容、後設資料 (作者,日期等) 、自定義的域和評論等,這些元素都是某篇文章或頁面的輸出。你還可以在一個文章或頁面建立多個查詢和迴圈;比如:在 single.php(文章頁面模板), 你可以建立一個迴圈來顯示單個文章的內容,然後在文章內容下用另外一個迴圈來顯示和這篇文章相關的文章的標題和縮圖。

文章和頁面的查詢機制

開始迴圈

(重複顯示這和 endwhile 之間的所有內容,直到所有文章的相關內容都輸出完)

the_title

(輸出文章的標題)

the_excerpt

(輸出文章的簡介)

the_content

(輸出文章的主體內容)

the_category

(輸出文章的分類名稱)

the_author

(輸出文章的作者)

the_date

(輸出文章的日期)

other tags

(可以在迴圈裡插入其他各種模板裡使用的標籤)

Endwhile

(重複迴圈直到所有查詢都已被輸出)

幕後的其他機制

要讓 Wordpress 主題模板工作,還需要後臺的一些重要檔案。你可以根據自己的需要修改這些檔案,來定製網站的功能和如何顯示。

comments.php

這個檔案控制評論如何顯示,檔案裡包含一個查詢某篇文章所有評論的迴圈。 comments.php 可以被一些外掛 (比如 Disques) 所覆蓋,即這些外掛可以接管網站的評論功能。

functions.php

functions.php 允許你加入自己的 php 程式碼,來修改 wordpress 主題的核心元素。通常這可以用來給自己的主題加入多個邊欄 (sidebars) 、修改文章簡介 (excerpt) 的字元數,或者給 wp-admin 新增自己的管理面板選項。

style.css

這是主題模板的主 CSS 樣式檔案。同時在這個檔案的頂端,包含了含有主題名稱、作者和你網站的 URL 等相關文字,這樣 Wordpress 才能知道主題的這些資訊。

其他

除了 Wordpress 的核心功能外,其他類似外掛 (plugins) 、自定義域 (custom fields) 和小工具 (wedgets) 允許你進一步定製自己的網站。

外掛 (Plugins)

有很多開源開發者社群開發了非常多的外掛,你可以免費的將它們新增到你的網站上,包括電子商務、幻燈片 (slideshow) 、快取和社會化功能等。

自定義域 (Custom Fields)

自定義域是在你建立一篇文章時,可以在文章內容輸入框下方的輸入框輸入。透過自定義域,你可以建立自己的選項或內容,然後可以在主題模板裡使用或顯示它們。經常用到的有縮圖和用來包含 javascript 程式碼 (include) 。

小工具 (Widgets)

小工具是用於邊欄 (sidebars) 裡的各種小模組。在 wp-admin 裡,你可以配置預設的小工具,也可以新增各種外掛提供的小工具,或者 php 程式碼。小工具通常包括搜尋表單、熱門文章列表和廣告區塊等這樣的內容。