WordPress佈景主題教學系列(一)-開發工具&基本架構

此系列將會在新站重構、再製,敬請期待。
製作Wordpress佈景主題,您需具備一些HTML和PHP的基礎。

Aidec一直以來幾乎都用自己製作的佈景主題,因為雖然網路上的WP佈景主題很多但總會有幾項功能不滿意….。若您有跟我一樣的情況,那就自己訂做一款專屬的佈景主題吧!!此教學是於WP 3.5.1版本開發而成,因此不同版本的WP可能會出現一些狀況。本製作佈景主題教學將會直接在本地端的wordpress編輯佈景主題,因此建議下載TWAMP後,在上面安裝一個WP,方便測試使用。
首先在製作佈景主題之前,您可以先下載 TWAMP和NotePad++這兩套軟體,TWAMP是用來架設網站的懶人包,NotePad++是用來編輯代碼的工具。

TWAMP懶人包:
https://sites.google.com/site/twampd/pub/TWAMPd_v7.4.7z

架設網站的懶人包,適合用來本機端測試。裡面包含(Apache+MySQL+PHP) 不須安裝解壓縮以後,直接執行便可運作。

NotePad++:http://notepad-plus-plus.org/

常見的免費編輯代碼工具,支援超多程式語言高亮。

註:建議在TWAMP上,安裝一個Wordpress方便測試使用。

當準備好製作Wordpress佈景主題工具之後,接下來再下載WP的空白佈景主題。

WP空白佈景主題:

 WP theme 空白佈景主題MEGA下載點

(1)下載空白的佈景主題,安裝佈景主題

將空白佈景主題[WP theme by Aidec]的資料夾放置在[Wordpress–>wp-Content–>themes]裡面。

(2)啟用空白佈景主題

[後台–>外觀–>佈景主題–>WP theme by Aidec 1.0–>啟用佈景主題],再到前台去瀏覽網站會看到一片空白(純屬正常)。

啟用佈景主題

瀏覽完前台後,接著介紹WP佈景主題的架構!!

首先,[回到後台–>外觀–>主題編輯器],您會看到佈景主題包含以下文件(排列順序可能不同):

index.php (主要模板):用來製作WP的首頁。
function.php (函式模板):佈景主題的所有函數都編輯在此處。
single.php (文章模板):顯示文章內容時,所用到的模板。

404.php(錯誤頁面模板):當找不到文章或到達錯誤頁面時,顯示的內容。

page.php(頁面模板):顯示頁面內容時,所使用的模板。

comments.php(評論模板):製作評論的顯示模板。

sidebar.php (邊欄模板):用來顯示側邊欄的內容。

footer.php (底部模板):用來顯示網站底部內容。

header.php (頭部模板):用來顯示網站頭部內容。

style.css (網站的CSS):編輯整個網站的CSS內容。

一般只要用以上這幾個文件就能製作出一個佈景主題,其佈景主題架構如下:

WP-佈景主題架構
了解WP主題的基本架構後,請先規劃好您網站的主題架構,例如:網站寬度、index大小和sidebar的大小等。

若還沒有構想沒關係,您也可以先照著接下來的教學先建立一個基本雛形,相信讀完下列全部內容後,您便可以自訂出一個滿意的主題!!

WordPress佈景主題製作教學

(一).WordPress佈景主題製作教學系列(一)-開發工具&基本架構 (編寫於2013.06.06)
(二).WordPress佈景主題製作教學系列(二)-Header.php模板製作 (編寫於2013.06.06)
(三).WordPress佈景主題製作教學系列(三)-index.php模板製作 (編寫於2013.06.06)
(四).WordPress佈景主題製作教學系列(四)-footer.php模板製作 (編寫於2013.06.07)
(五).WordPress佈景主題製作教學系列(五)-sidebar.php模板製作 (編寫於2013.06.07)
(六).WordPress佈景主題製作教學系列(六)-single.php模板製作 (編寫於2013.06.07)
(七).WordPress佈景主題製作教學系列(七)-comments.php模板製作 (編寫於2013.06.07)
(八).WordPress佈景主題製作教學系列(八)-page.php模板製作 (編寫於2013.06.07)
(九).WordPress佈景主題製作教學系列(九)-404.php模板製作 (編寫於2013.06.07)
(十).WordPress佈景主題製作教學系列(十)-function.php模板製作 (編寫於2013.06.08)
(十一).WordPress佈景主題製作教學系列(十一)-WP佈景主題最終設定 (編寫於2013.06.09)

高級篇:
(一).WordPress佈景主題製作教學進階系列-WP佈景主題功能表製作(一) (編寫於2013.06.10)
(二).WordPress佈景主題製作教學進階系列-WP佈景主題功能表製作(二) (編寫於2013.06.11)


本教學部分參考下列文章製作而成:

我愛水煮魚:http://blog.wpjam.com/article/wordpress-theme-tutorials-ebook/
Wordpress筆記本:http://wpnote.tw/ (由阿湯製作)
Wordpress codex:http://codex.wordpress.org/ (wordpress官方)

還有一些內地、外國的blog….來源已不可考。

感謝您的閱讀,請用力地分享讓大家知道吧~~

Aidec Li
學我所見,寫我所學。凡事略懂略懂~~
更多 Aidec Li 的文章...

很抱歉,此文章關閉留言