Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
柏拉圖廳_6WordPress初學者世界-佈景主題結構概念談_林大中 / Barry Lin
Search
WordCamp Taipei
December 28, 2019
Technology
0
190
柏拉圖廳_6WordPress初學者世界-佈景主題結構概念談_林大中 / Barry Lin
使用 WordPress 架設網站,無論您是套用版型或是客製化佈景,都要先瞭解佈景主題的結構,在開發或是維護網站上才能快速查詢問題的來源,進而深入佈景相關問題的方向與處理方式
WordCamp Taipei
December 28, 2019
Tweet
Share
More Decks by WordCamp Taipei
See All by WordCamp Taipei
如何運用 WordPress 網站經營讓你的關鍵字在網路搜尋無所不在 / Utilizing Keywords to Improving WordPress SEO_蔡沛君 / PG Tsai
wctaipei
0
160
WordPress 基本安全性檢測與防範方式 / WordPress Security Check and How to Prevent Them_呂明璋 / John Lu
wctaipei
0
590
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
120
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
560
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
190
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
510
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
150
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
480
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
280
Other Decks in Technology
See All in Technology
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
540
MCPと認可まわりの話 / mcp_and_authorization
convto
2
340
Kiroから考える AIコーディングツールの潮流
s4yuba
2
560
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
150
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
190
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
10
2.9k
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
1
450
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
420
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.1k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
110
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
1.2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
A Tale of Four Properties
chriscoyier
160
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
The Language of Interfaces
destraynor
158
25k
How to Ace a Technical Interview
jacobian
278
23k
We Have a Design System, Now What?
morganepeng
53
7.7k
Music & Morning Musume
bryan
46
6.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Adopting Sorbet at Scale
ufuk
77
9.5k
Automating Front-end Workflow
addyosmani
1370
200k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
A designer walks into a library…
pauljervisheath
207
24k
Transcript
WordPress 初學者世界 佈景結構概念談! Theme Hierarchy for Beginners WordCamp Taipei 2019
林林⼤大中 / Barry Lin 阿腸股份有限公司 - ⼯工程師 Facebook: fb.me/riceooks Blog:
barryblogs.com Company: achang.tw
⽬目錄錄⼤大綱 WordPress 佈景佈局檔案結構 佈景⽬目錄錄資料料夾 佈景資料料夾檔案 佈景主題資訊 Template Hierarchy (佈景層次) 佈景結構層次介紹
- 以⾸首⾴頁為例例 佈景結構視覺圖 佈景結構層次介紹 - 常⾒見見的變化類類型 佈景佈局檔案概念 佈景檔案結構 - 簡易易範例例 分類類、⽂文章、⾴頁⾯面
WordPress 佈景佈局檔案結構 佈景⽬目錄錄資料料夾 佈景資料料夾佈局檔案 佈景主題資訊 4
佈景⽬目錄錄資料料夾 佈景佈局檔案結構
佈景資料料夾檔案 佈景佈局檔案結構 style.css (必要) • 佈景主題的樣式 index.php (必要) • 佈景主題層次結構的最終載⼊佈局檔案
functions.php • 佈景主題的⾃訂功能佈局檔案 • 在所有外掛之後才會執⾏ • ⼦佈景的此佈局檔案,會在主佈景之前 執⾏ screenshot.png • 佈景主題的視覺圖案 • 尺⼨最⼤為 1200x900
佈景主題資訊 佈景佈局檔案結構 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
None
Template Hierarchy (佈景層次) 佈景結構層次介紹 - 以⾸首⾴頁為例例 佈景結構層次介紹 - 常⾒見見的變化類類型 9
佈景結構層次介紹 Template Hierarchy Template Hierarchy https://pse.is/WP-template-hierarchy Template Hierarchy Diagram https://pse.is/WP-hierarchy
佈景結構層次介紹 - 以⾸首⾴頁為例例 Template Hierarchy 主⾴頁 / ⾸首⾴頁 網站⾸首⾴頁顯示內容 *最新⽂文章
front-page.php > home.php > index.php *靜態⾸首⾴頁(已有選定⾴頁⾯面) front-page.php > page.php > index.php
None
佈景結構層次介紹 - 常⾒見見的變化類類型 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 代稱 > 編號 > 標籤佈局檔案 > 彙整佈局檔案 > 索引佈局檔案
佈景結構層次介紹 - 常⾒見見的變化類類型 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
佈景檔案結構 - 簡易易範例例 佈景佈局檔案概念 *⼀一開始建⽴立的檔案 funcitons.php index.php screenshot.png style.css *增加的檔案
front-page.php footer.php header.php languages/ *後續補上的主要模板檔案 404.php archive.php search.php singular.php
分類類 / 結構說明 佈景佈局檔案概念 分類類層次結構 category-{slug}.php > category-{id}.php > category.php
> archive.php > index.php
分類類 / 建⽴立分類類 佈景佈局檔案概念
分類類 / 建⽴立⽂文章並歸類類該分類類 佈景佈局檔案概念
分類類 / 分類類代稱 為名稱的佈局 category-{slug}.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
⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局 {$custom}.php 佈景佈局檔案概念 *⾃自訂⾴頁⾯面佈局檔案,可放置於「佈景根⽬目錄錄」或「佈景下⼀一層資料料夾內」,最多⼀一層 *⾴頁⾯面佈局放置之資料料夾名稱可⾃自訂,資料料夾名稱不不影響結構
⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局 檔案內容 佈景佈局檔案概念 ⾃自訂⾴頁⾯面的檔案中,必須要含有「Template Name: {佈局名稱}」的 PHP 註解,才會是系統可辨識的佈局
⾴頁⾯面 / 套⽤用⾃自訂⾴頁⾯面佈局 佈景佈局檔案概念
⾴頁⾯面 / ⾃自訂⾴頁⾯面佈局結果 佈景佈局檔案概念
- Thank You - 29