前言

開始進入 WP 正篇吧,WP 是可以成熟完善的框架,基本上挑選完相關主題後,就能透過後台進行個人網站的裝飾,然而作為一個 WP 開發者,僅僅是用現成框架是滿足不了的!那麼要能達到客製化自己的 WP 主題(Theme),首先就需要知道 WP Hierarchy。

大綱

  • 何謂 WP Hierarchy
  • WP 檔案結構

何謂 WP Hierarchy

所有的檔案結構都遵照 Hierarchy 進行前端的渲染,如圖:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a5a6e004-1213-4e4d-85ce-77c92441a7d3/Untitled.png

參考網址

想要客製化主題,一定要隨時回來看 WP Hierarchy 圖,此圖由左向右看,象徵著一個階層權重,當 user 盡如一 WP 網站時,WP Server 會依照 user 當前所在頁面,由左至右決定要使用的 php 版型。

最左邊灰色部分,可以當作是一個網站最基本幾個 web-site 頁面,包含:

  • 標籤彙整頁 (Archive Page)
  • 單頁 (Singular Page)
  • 首頁 (Site Front Page)
  • 錯誤頁 (Error 404 Page)
  • 搜尋頁 (Search Result Page)

例如今天進入 WP 首頁,WP Server 會先找尋是否有 home.php 樣板,如果沒有就會接著找是否有 index.php 樣板,大致上這就是 WP Hierarchy 概念。

WP 檔案結構

開啟任一佈景主題 (wp-content/themes/theme_name),大致上會看到下面的檔案:

php相關頁面

404.php -> 生成404頁面
archive.php -> 生成頁特定類別頁面(某目錄、分類、作者等)
comments.php -> 討論區頁面
header.php -> 網頁最上層的 header 頁面
footer.php -> 網頁最底下的 footer 頁面
functions.php -> 函式庫,相關重要的 function 或是要改寫都在此
index.php -> 版型最終都會引導到此版型,相當重要的檔案
page.php -> 預設網頁頁面版型
single.php -> 預設文章頁面版型
search.php -> 蒐尋頁面
sidebar.php -> 邊欄頁面

主要css檔案
style.css -> 主要改變網頁樣式檔案,其中也包含手機頁面等 RWD設定

資料夾
libs -> WP 引用的相關第三方工具,例如 bootstrap 等

template-parts -> 裡頭存放諸多 php 部分版型工具集,相當好用
assets -> 存放 image 與 js 相關檔案,存在此內的 image 與 css 都能在整個 thems 中透過 WP API 進行調用

其他
readme.txt -> 說明文件
screenshot.png -> 後台的預覽圖

以上是大致的檔案結構,其中最重要的檔案莫過於 index.php、style.css、function.php等等都很常動到

而 資料夾 的 template-parts、assets,也是筆者很愛使用的部分,有機會後面章節我們都會再提到,下次見囉~