WordPress 佈景開發

1. WordPress佈景開發 Claire Chang

2. WordPress簡介 • 一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。 • 使用者可以安裝和切換主題。主題可讓使用者不改變部落格內容和結構的情況下更改介面和WordPress站點的功能。 • WordPress非常流行的一個特性是它豐富的外掛模組架構，外掛模組能使使用者和開發者擴充功能WordPress程式的功能。當前WordPress外掛模組資料庫中有超過18000個外掛模組，包括SEO、控制項等等。

3. 安裝後初始樣貌

4. 後台管理介面(wp-admin)

5. WordPress基本操作 • 在WordPress裡，網頁分文章及頁面。 • 頁面網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。 • 文章網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。 • 每一篇文章及頁面都可以設定是否開啟迴響，迴響是類似留言版的地方，會顯示在網頁的下方。 • 外掛及佈景主題皆可以在官網下載或尋找免費支援，許多免費外掛或主題也有提供功能較完整的付費版本，此為WordPress的主要營收來源。

6. WordPress佈景主題開發 • WordPress的佈景檔案有： • style.css佈景CSS樣式 • header.php各頁共用的網頁頭部 • footer.php各頁共用的網頁底部 • sidebar.php邊欄模組 • index.php首頁 • single.php單頁文章 • page.php網誌分頁 • comments.php迴響模版 • functions.php佈景設定 • archive.php文章彙整 • 404.php 找不到頁面 • search.php站內搜尋結果

7. 頁面層級結構 • WordPress的頁面有層級的結構存在，當12個php檔案並沒有全部都存在時，便會自動尋找前一層級的來替代。 • 一個佈景主題裡至少要有style.css及index.php

8. 頁面結構關係圖

9. single.php單篇文章類 • single-{post_type}.phpsingle-{post_type}.php的意思就是假設你有另外一個自定義文章類別（custom posy type），如slider，你就可以在佈景目錄內新增一個single-slider.php，然候這個檔案內就可以放針對這個類別做不一樣的樣式、設 計。 • single.php一般文章。 • index.php首頁

10. page.php網站頁面類 • 自訂模版（template-{name}.php）這個是常常拿來做客製化的頁面、或者是特別的效果功能。 • page-{slug}.phpslug在WordPress中叫做文章代稱，通常如果你的固定連結是用文章名稱，然候你去修改，這代稱就是你修改的連結。而page-{slug}.php的用途就是可以對特定頁面做設計，例如關於我們頁面，就可以在上面做special於別的頁面的設計。 • page-{id}.php這個page-{id}.php就是可以指定某頁面的模版，與page-{slug}.php差不多，只是選取方式改用頁面ID來選而以。 • page.php網站頁面。 • index.php

11. category.php文章分類類 • category-{slug}.php同樣是使用分類代稱來做選取的動作，例如分類代稱是hareware，就可以用category-hareware.php來顯示hareware的分類。 • category-{id}.php就是使用分類ID來選取分類。 • category.php分類的顯示，若此檔案不存在便會以archive.php來取代 • archive.php • index.php

12. 其他類別（1） • tag.php文章標籤類 • 與category.php相同，只是檔名中category的部分都改成tag.php。 • archive.php文章彙整類 • archive-{post_type}.php • 用來顯示自定義文章類別（custom posy type）的列表（非單頁）。 • archive.php • 之前介紹過的archive.php。 • index.php • arthur.php文章作者類 • author-{nicename}.php • 使用作者的暱稱來做選取。 • author-{id}.php • 使用作者的ID來做選取。 • author.php • archive.php • index.php

13. 其他類別（2） • search.php搜尋結果類 • search.php • 用來顯示搜尋結果的網頁，不過建議直接使用Google的站內搜尋功能。 • comment.php文章迴響類 • comment.php • 之前介紹過的文章迴響頁。 • comment-popup.php • 這個是使用彈跳視窗來顯示迴響，不過極少使用，參考就好。

14. 開發第一個風格 • 宣告新佈景的方式是在wp-content/themes/mytheme下創建style.css • 輸入以下資訊 • 然後創立index.php

15. 手機版主題-index.php • 「版面整體寬度」，建議設定100%，這樣在行動裝置上，可以依照不同的尺寸有不一樣的相容性，例如我們調整為手機板會看到適合手機板的樣式。 • 如果調整成平板之類的，則可以看到整體畫面會拉寬，不會因為本身是手機板，而當平板存取的時候還是小框框。這應該是有點自適應網頁(Responsive Web Design)的概念。 • 因為手機、平板等行動裝置因為畫面比PC桌上型電腦小，所以在文章清單的呈現上，最好是清楚明瞭，以列表式為佳，而且不要有內容摘要，最好是一張圖搭配標題與發表時間。至於頁碼功能可以直接套用桌面版或是變成大按鈕的設計。

16. 有用資源 • Theme專用函數一覽表https://codex.wordpress.org/Template_Tags • Theme裡的迴圈http://codex.wordpress.org/The_Loop • 主題製作教程http://www.hksilicon.com/kb/articles/3808