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

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

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

0d9743a94b19d92224b6928a6c2f8ad1?s=128

WordCamp Taipei

December 28, 2019
Tweet

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
  8. None
  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
  12. None
  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