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
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
250
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
360
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.3k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
110
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
270
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.5k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
3
680
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
220
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
190
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
45
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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