WordPress佈景主題教學系列(一)-開發工具&基本架構
此系列將會在新站重構、再製,敬請期待。
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/
常見的免費編輯代碼工具,支援超多程式語言高亮。
當準備好製作Wordpress佈景主題工具之後,接下來再下載WP的空白佈景主題。
WP空白佈景主題:
(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主題的基本架構後,請先規劃好您網站的主題架構,例如:網站寬度、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….來源已不可考。
感謝您的閱讀,請用力地分享讓大家知道吧~~
很抱歉,此文章關閉留言
艾德克您好,感謝您提供了一系列的教學,受益良多,由淺入深,幫助非常大
不過我在啟用WP theme by Aidec佈景主題之後,發現許多動作,在送出之後,瀏覽器最終停在一個全白頁面
像是文章送出,編輯主題將檔案儲存,啟用外掛等等的動作,都沒辦法返回到送出之前的畫面
不過資料實際上是有送出了,只是最終沒返回而已
想請問一下這部份我該去哪裡修正呢,能不能給我一點指示
再次感謝您無私的分享
你去function.php 找看看是不是最下面有一段空白
參考這篇,看看是不是出現這樣的情形
http://aidec.tw/wp-setting-blank
很高興對您有幫助^^