Transcript wordpress簡報下載

WordPress佈景開發
Claire Chang
WordPress簡介
• 一個以PHP和MySQL為平台的自由開源的部落格軟體和內
容管理系統。
• 使用者可以安裝和切換主題。
主題可讓使用者不改變部落格內容和結構的情況下更改介
面和WordPress站點的功能。
• WordPress非常流行的一個特性是它豐富的外掛模組架構，
外掛模組能使使用者和開發者擴充功能WordPress程式的功
能。當前WordPress外掛模組資料庫中有超過18000個外掛
模組，包括SEO、控制項等等。
安裝後初始樣貌
後台管理介面(wp-admin)
WordPress基本操作
• 在WordPress裡，網頁分文章及頁面。
• 頁面
網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。
• 文章
網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。
• 每一篇文章及頁面都可以設定是否開啟迴響，迴響是類似
留言版的地方，會顯示在網頁的下方。
• 外掛及佈景主題皆可以在官網下載或尋找免費支援，許多
免費外掛或主題也有提供功能較完整的付費版本，此為
WordPress的主要營收來源。
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 站內搜尋結果
頁面層級結構
• WordPress的頁面有層級的結構存在，當12個php檔案並沒
有全部都存在時，便會自動尋找前一層級的來替代。
• 一個佈景主題裡至少要有style.css及index.php
頁
面
結
構
關
係
圖
single.php 單篇文章類
• single-{post_type}.php
single-{post_type}.php的意思就是假設你有另外一個自
定義文章類別（custom posy type），如slider，你就
可以在佈景目錄內新增一個single-slider.php，然候這
個檔案內就可以放針對這個類別做不一樣的樣式、設
計。
• single.php
一般文章。
• index.php
首頁
page.php 網站頁面類
• 自訂模版（template-{name}.php）
這個是常常拿來做客製化的頁面、或者是特別的效果功能。
• page-{slug}.php
slug在WordPress中叫做文章代稱，通常如果你的固定連結
是用文章名稱，然候你去修改，這代稱就是你修改的連結。
而page-{slug}.php的用途就是可以對特定頁面做設計，例如
關於我們頁面，就可以在上面做special於別的頁面的設計。
• page-{id}.php
這個page-{id}.php就是可以指定某頁面的模版，與page{slug}.php差不多，只是選取方式改用頁面ID來選而以。
• page.php
網站頁面。
• index.php
category.php 文章分類類
• category-{slug}.php
同樣是使用分類代稱來做選取的動作，例如分類代稱是
hareware，就可以用category-hareware.php 來顯示
hareware的分類。
• category-{id}.php
就是使用分類ID來選取分類。
• category.php
分類的顯示，若此檔案不存在便會以archive.php來取代
• archive.php
• index.php
其他類別（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
其他類別（2）
• search.php 搜尋結果類
• search.php
• 用來顯示搜尋結果的網頁，不過建議直接使用Google的站內
搜尋功能。
• comment.php 文章迴響類
•
•
•
•
comment.php
之前介紹過的文章迴響頁。
comment-popup.php
這個是使用彈跳視窗來顯示迴響，不過極少使用，參考就好。
開發第一個風格
• 宣告新佈景的方式是在wp-content/themes/mytheme下創
建style.css
• 輸入以下資訊
• 然後創立index.php
手機版主題-index.php
• 「版面整體寬度」，建議設定100%，這樣在行動裝置上，
可以依照不同的尺寸有不一樣的相容性，例如我們調整為
手機板會看到適合手機板的樣式。
• 如果調整成平板之類的，則可以看到整體畫面會拉寬，不
會因為本身是手機板，而當平板存取的時候還是小框框。
這應該是有點自適應網頁(Responsive Web Design)的概念。
• 因為手機、平板等行動裝置因為畫面比PC桌上型電腦小，
所以在文章清單的呈現上，最好是清楚明瞭，以列表式為
佳，而且不要有內容摘要，最好是一張圖搭配標題與發表
時間。至於頁碼功能可以直接套用桌面版或是變成大按鈕
的設計。
有用資源
• Theme專用函數一覽表
https://codex.wordpress.org/Template_Tags
• Theme裡的迴圈
http://codex.wordpress.org/The_Loop
• 主題製作教程
http://www.hksilicon.com/kb/articles/3808