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
200
柏拉圖廳_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
600
Troubleshooting WooCommerce Subscriptions Renewal_Siew Kam Onn / 蕭錦安
wctaipei
0
130
網路爬蟲與 WordPress 防禦機制 / Anti-scraping and WordPress Security Defence_Terry Lin
wctaipei
0
580
404 Not found 遇得多;402 有見過麼?探討現有的網上內容流通性和網頁的收入模式。 / “404 Not Found” is Common, But Have You Seen “402 Payment Required”?_高重建 / Kin Ko
wctaipei
0
200
新手也能透過 WooCommerce 架出百萬電商(實際案例分享)/ Real World Building WooCommerce Site for Beginners_廖震宇 / Andy Liao
wctaipei
0
520
我的 WordPress 全端優化經驗 / Complete Guide of Optimizing WordPress_蕭宗仁 / Josh Hsiao
wctaipei
0
150
攝影師的子彈 – 圖片 SEO 戰爭 / Photographer’s Bullet – Image SEO War_Edwin Lin
wctaipei
0
490
國際電商都在用的心理行銷,你還不知道嗎? / The Psychology Behind eCommerce_林文攀 / Peter Lin
wctaipei
0
290
Other Decks in Technology
See All in Technology
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
160
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
roppongirb_20250911
igaiga
1
240
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
2025年夏 コーディングエージェントを統べる者
nwiizo
0
180
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Scaling GitHub
holman
463
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Making Projects Easy
brettharned
117
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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