柏拉圖廳_6WordPress初學者世界-佈景主題結構概念談_林大中 / Barry Lin

使用 WordPress 架設網站，無論您是套用版型或是客製化佈景，都要先瞭解佈景主題的結構，在開發或是維護網站上才能快速查詢問題的來源，進而深入佈景相關問題的方向與處理方式

Transcript

1. WordPress 初學者世界
 佈景結構概念談！ Theme Hierarchy for Beginners WordCamp Taipei 2019
2. 林林⼤大中 / Barry Lin 阿腸股份有限公司 - ⼯工程師 Facebook: fb.me/riceooks Blog: barryblogs.com Company: achang.tw
3. ⽬目錄錄⼤大綱 WordPress 佈景佈局檔案結構 佈景⽬目錄錄資料料夾 佈景資料料夾檔案 佈景主題資訊 Template Hierarchy (佈景層次) 佈景結構層次介紹 - 以⾸首⾴頁為例例 佈景結構視覺圖 佈景結構層次介紹 - 常⾒見見的變化類類型 佈景佈局檔案概念 佈景檔案結構 - 簡易易範例例 分類類、⽂文章、⾴頁⾯面
4. WordPress 佈景佈局檔案結構 佈景⽬目錄錄資料料夾 佈景資料料夾佈局檔案 佈景主題資訊 4
5. 佈景⽬目錄錄資料料夾 佈景佈局檔案結構
6. 佈景資料料夾檔案 佈景佈局檔案結構 style.css (必要) • 佈景主題的樣式 index.php (必要) • 佈景主題層次結構的最終載⼊佈局檔案 functions.php • 佈景主題的⾃訂功能佈局檔案 • 在所有外掛之後才會執⾏ • ⼦佈景的此佈局檔案，會在主佈景之前 執⾏ screenshot.png • 佈景主題的視覺圖案 • 尺⼨最⼤為 1200x900
7. 佈景主題資訊 佈景佈局檔案結構 Theme Name: 佈景名稱 Theme URI: 佈景資訊網址 Author: 作者 Author URI: 作者網址 Description: 佈景描述 Version: 版本號，例如 1.2.1 License: 授權條款 License URI: 授權條款網址 Text Domain: 本地化使⽤的字串載⼊分類 Tags: 佈景相關的標籤，可查詢 Theme Review Handbook 參考使⽤標籤 Domain Path: 佈景主題未啟⽤時，本地 化的載⼊路徑，預設為 /languages Main Stylesheet https://pse.is/WP-main-stylesheet Theme Review Handbook https://pse.is/WP-theme-tags
9. Template Hierarchy (佈景層次) 佈景結構層次介紹 - 以⾸首⾴頁為例例 佈景結構層次介紹 - 常⾒見見的變化類類型 9
10. 佈景結構層次介紹 Template Hierarchy Template Hierarchy https://pse.is/WP-template-hierarchy Template Hierarchy Diagram https://pse.is/WP-hierarchy
11. 佈景結構層次介紹 - 以⾸首⾴頁為例例 Template Hierarchy 主⾴頁 / ⾸首⾴頁 網站⾸首⾴頁顯示內容 ＊最新⽂文章 front-page.php > home.php > index.php ＊靜態⾸首⾴頁(已有選定⾴頁⾯面) front-page.php > page.php > index.php
13. 佈景結構層次介紹 - 常⾒見見的變化類類型 Template Hierarchy 分類類 category-{slug}.php > category-{id}.php > category.php > archive.php > index.php 代稱 > 編號 > 分類類佈局檔案 > 彙整佈局檔案 > 索引佈局檔案 單篇⽂文章 single-{post-type}-{slug}.php > single-{post-type}.php > single.php > singular.php > index.php ⽂文章類類型+代稱 > ⽂文章類類型 > 單篇⽂文章佈局檔案 > 單獨佈局檔案 > 索引佈局檔案 ⾴頁⾯面 custom template file > page-{slug}.php > page-{id}.php > page.php > singular.php > index.php ⾃自訂⾴頁⾯面模板 > 代稱 > 編號 > ⾴頁⾯面佈局檔案 > 單獨佈局檔案 > 索引佈局檔案 標籤 tag-{slug}.php > tag-{id}.php > tag.php > singular.php > index.php 代稱 > 編號 > 標籤佈局檔案 > 彙整佈局檔案 > 索引佈局檔案
14. 佈景結構層次介紹 - 常⾒見見的變化類類型 Template Hierarchy 作者 author-{nicename}.php > author-{id}.php > author.php > archive.php > index.php Nicename > 編號 > 作者佈局檔案 > 彙整佈局檔案 > 索引佈局檔案 ⽇日期 date.php > archive.php > index.php ⽇日期佈局檔案 > 彙整佈局檔案 > 索引佈局檔案 404 404.php > index.php 404佈局檔案 > 索引佈局檔案 附件 {MIME-type}.php > attachment.php > single-attachment-{slug}.php > single-attachment.php > single.php > singular.php > index.php 附件類類型 > 附件佈局檔案 > 代稱 > 單篇附件佈局檔案 > 單篇⽂文章佈局檔案 > 單獨佈局檔案 > 索 引佈局檔案
15. 佈景佈局檔案概念 佈景檔案結構 - 簡易易範例例 分類類 ⽂文章 ⾴頁⾯面 15
16. 佈景檔案結構 - 簡易易範例例 佈景佈局檔案概念 ＊⼀一開始建⽴立的檔案 funcitons.php index.php screenshot.png style.css ＊增加的檔案 front-page.php footer.php header.php languages/ ＊後續補上的主要模板檔案 404.php archive.php search.php singular.php
17. 分類類 / 結構說明 佈景佈局檔案概念 分類類層次結構 category-{slug}.php > category-{id}.php > category.php > archive.php > index.php
18. 分類類 / 建⽴立分類類 佈景佈局檔案概念
19. 分類類 / 建⽴立⽂文章並歸類類該分類類 佈景佈局檔案概念
20. 分類類 / 分類類代稱 為名稱的佈局 category-{slug}.php 佈景佈局檔案概念
21. 分類類 / 議程分類類呈現結果 佈景佈局檔案概念
22. 分類類 / 講者分類類呈現結果 佈景佈局檔案概念
23. ⽂文章 / 結構說明 佈景佈局檔案概念 單篇⽂文章 single-{post-type}-{slug}.php > single-{post-type}.php > single.php > singular.php > index.php
24. ⾴頁⾯面 / 結構說明 佈景佈局檔案概念 ⾴頁⾯面 custom template file > page-{slug}.php > page-{id}.php > page.php > singular.php > index.php
25. ⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局 {$custom}.php 佈景佈局檔案概念 ＊⾃自訂⾴頁⾯面佈局檔案，可放置於「佈景根⽬目錄錄」或「佈景下⼀一層資料料夾內」，最多⼀一層 ＊⾴頁⾯面佈局放置之資料料夾名稱可⾃自訂，資料料夾名稱不不影響結構
26. ⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局 檔案內容 佈景佈局檔案概念 ⾃自訂⾴頁⾯面的檔案中，必須要含有「Template Name: {佈局名稱}」的 PHP 註解，才會是系統可辨識的佈局
27. ⾴頁⾯面 / 套⽤用⾃自訂⾴頁⾯面佈局 佈景佈局檔案概念
28. ⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局結果 佈景佈局檔案概念
29. - Thank You - 29