Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置

我想很多人應該一直在等阿湯開始撰寫Wordpress佈景的製作教學,真的是非常不好意思,一直無法抽空來撰寫這一系列的製作教學,今天我們就從入門基礎開始進行,接下來的一系列佈景教學將會帶領大家製作出一個簡易符合Wordpress 3.0版本的佈景,並且會盡量以Wordpress 3.0為基礎讓大家比對,更能了解佈景的結構,不過在開始之前請大家必須要抱著積極學習的態度,發問前也請先至Google搜尋並多次嘗試。

製作Wordpress佈景前需準備的工具:

為了能讓大家在這一系列教學中快速成長獲益,因此我們並不採用類似Dreamweaver這樣方便的工具,我們僅使用Notepad++來土法鍊鋼,雖然這樣撰寫佈景似乎比較累人,不過只要你這樣做出一個之後,保證功力大增。

NotePad++請參考:http://steachs.com/archives/759,並至下載頁面下載最新版本進行安裝。
修圖工具:皆可,只要你用的慣都可以,不過丫湯不會讓大家用到太多圖片來製作,這次的目的是了解WP佈景結構以及基礎的CSS語法。

WordPress佈景基本格式:

先前已經有介紹過Wordpress的組成檔案有哪些,而佈景又有分為2欄式及3欄式,我們就以2欄式的佈景來撰寫這一系列的教學,不論在任何頁面,我們先以下方最基本的格局來編排佈景,這也是最常見的2欄式佈景,往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後,隨時都可以自己再精研修改哦。

Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 01

WordPress佈景基本空白檔案下載:

大家在開始之前請先下載基本的佈景格局格空白檔,以便這一系列教學中直接使用。

WordPress佈景空白檔:http://files.wpnote.tw/wpnote.zip

裡面包含了以下檔案:

Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 02

啟用空白的Wordpress佈景:

當然~要製作佈景,當然也要邊做邊預覽,所以必須要先啟用佈景,不過如果不做些設定,在WP後台是看不到你的空白佈景的,請大家先在style.css右鍵利用Notepad++打開編輯,將丫湯預設寫上去的字改成自己的吧,各項說明如下,請自行修改為自己的資訊:

Theme Name:佈景名稱
Theme URI:佈景連接網站
Description:描述
Version:佈景版號
Author:作者
Author URI:作者網站
Tags:標籤

Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 03
然後再到WP後台,就可以看到剛所設定的佈景名稱,我們就先把他啟用吧。

Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 04

啟用後會看到一片空白加幾個說明的空白頁,沒錯,我們就是要從頭開始來製作,下一篇我們即將介紹Header.php的製作過程,拭目以待吧。

Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 05

Wordperss佈景製作教學系列:

33 Comments

  1. ㄚ恩 -  2014 年 07 月 06 日 - 18:42:13 (Your Comment is Under Moderation)

    湯哥您好!
    我做好的布景主題放進去後卻顯示
    cookie讀取失敗ˊˋ

    回覆
  2. cloud -  2013 年 10 月 28 日 - 16:12:04 (Your Comment is Under Moderation)

    Hi阿湯您好,
    我想學自製佈景,要下載您的檔案時
    WordPress佈景空白檔:http://files.wpnote.tw/wpnote.zip
    出現504 Gateway Time-out
    請問還能下載或提供檔案讓我學習嗎?
    有時間的話,請您惠予協助,謝謝!

    回覆
    • 阿湯 -  2013 年 10 月 28 日 - 22:50:02 (Your Comment is Under Moderation)

      可以下載囉

      回覆
    • cloud -  2013 年 10 月 29 日 - 11:16:50 (Your Comment is Under Moderation)

      Hi阿湯,
      已經下載好了,
      謝謝您的協助!
      我馬上學習去了,感恩!

      回覆
  3. 蜜蜂 -  2013 年 01 月 14 日 - 21:22:14 (Your Comment is Under Moderation)

    大大你好,
    請問要在本機測試才可以吧?
    是不是要安裝PHP !
    還有可以用NotePad++執行火狐出來的結果,
    沒有改變!是不是沒安裝PHP=.=...??

    回覆
    • 阿湯 -  2013 年 02 月 24 日 - 00:16:22 (Your Comment is Under Moderation)

      請 google 一下

      回覆
  4. Crystal -  2012 年 12 月 09 日 - 15:18:10 (Your Comment is Under Moderation)

    請問阿湯:
    我下載了WPnote空白佈景檔之後,解壓縮,然後用NotePade打開
    style.css檔,修改成自己的資訊後,再整個加入回壓縮檔,然後
    上傳到wordpress後台管理的佈景檔案,但它卻出現:

    正在安裝上傳的佈景主題,檔案:wpnote.rar
    檔案解壓縮中…

    無法安裝該軟件包。 PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    XD

    晴天霹靂

    接下去我就不修改,直接下載wpnote.zip上傳到後台的佈景主題,
    然後啟動成功了,但....接下來我完全不知道該怎麼修改了,
    因為整個壓縮檔都在上傳後台裡了,我從哪用notepad打開???

    暈@@

    現在不知道該怎麼辦,請幫幫忙,感謝您無私的教導!!

    回覆
    • 阿湯 -  2012 年 12 月 13 日 - 13:25:54 (Your Comment is Under Moderation)

      rar 檔不行,請用 zip壓縮

      回覆
      • Crystal -  2012 年 12 月 17 日 - 18:08:23 (Your Comment is Under Moderation)

        謝謝阿湯抽空回覆 我瞭解了 再試試!^^

        回覆
  5. Useful Links » WebLife -  2012 年 12 月 09 日 - 12:08:38 (Your Comment is Under Moderation)

    [...] 自定义表单插件Wordpress Form Manager如何使用 Wordperss佈景製作教學系列(一):WordPress佈景基本格局設置 [...]

    回覆
  6. 魯魯咪 -  2011 年 04 月 10 日 - 21:00:34 (Your Comment is Under Moderation)

    抱歉,沒有程式語言基礎,但是想請問如何把文字LOGO用圖片LOGO取代掉?

    例如:
    Wordpress筆記本

    WordPress教學、Wordpress技術、Wordpress Plugins、Wordpress Themes

    這些文字都不要了,只想用一張圖片取代。

    或是,文字可以保留,但是在旁邊如何加上圖片?

    謝謝

    回覆
    • 阿湯 -  2011 年 04 月 13 日 - 10:04:22 (Your Comment is Under Moderation)

      每個佈景不同~如果要取代請自行學習CSS基礎

      回覆
  7. KRAMA -  2011 年 03 月 07 日 - 00:51:37 (Your Comment is Under Moderation)

    請問 我 該怎麼使用 wordpress

    回覆
    • Scorpio -  2011 年 03 月 07 日 - 15:58:17 (Your Comment is Under Moderation)

      請從頭到尾爬文

      回覆
  8. Lee -  2010 年 12 月 15 日 - 07:00:38 (Your Comment is Under Moderation)

    大大你好

    小弟用的是3.0版的wordpress

    目前部落格內容主要是自己的四格漫畫

    但是有一個問題就是當小弟貼上自己的漫畫之後

    四格全部都會顯現在首頁

    有沒有什麼辦法讓他只出現第一格

    然後點進去文章內容之後才會出現所有四格呢?

    謝謝

    回覆
    • 阿湯 -  2010 年 12 月 18 日 - 15:58:51 (Your Comment is Under Moderation)

      用more標籤截斷

      回覆
    • 阿湯 -  2010 年 12 月 08 日 - 11:14:18 (Your Comment is Under Moderation)

      我的站名是"Wordpress筆記本"
      我只是將我自己學的東西順便記錄下來
      跟別人有什麼關係呢?
      如果照你這麼說,網路上每一種教學只要有人寫過都不能寫囉?
      那大家都關站吧

      回覆
  9. 仔仔 -  2010 年 10 月 01 日 - 19:26:39 (Your Comment is Under Moderation)

    -3-又2個星期了...還未更新唷...

    回覆
    • Scorpio -  2010 年 10 月 07 日 - 17:07:05 (Your Comment is Under Moderation)

      再催下去。。你來幫我工作,我就可以專心寫了

      回覆
  10. 仔仔 -  2010 年 09 月 23 日 - 13:48:54 (Your Comment is Under Moderation)

    又等待了1星期了...

    回覆
  11. 仔仔 -  2010 年 09 月 10 日 - 03:23:40 (Your Comment is Under Moderation)

    湯湯唷~
    幾時才更新唷~
    支持中!

    回覆
    • Scorpio -  2010 年 09 月 10 日 - 14:38:41 (Your Comment is Under Moderation)

      最近在趕其它東西,快了~大約再1週

      回覆
      • 仔仔 -  2010 年 09 月 19 日 - 14:57:04 (Your Comment is Under Moderation)

        =3=等待中...

        回覆
  12. 小琉球 -  2010 年 08 月 23 日 - 20:18:31 (Your Comment is Under Moderation)

    我是初學者= =
    剛進這東西不久~
    也摸索了好機天~
    謝謝版大提供這檔案下載~
    我終於可以比較懂著製作屬於自己的Wordpress了

    回覆
    • Scorpio -  2010 年 08 月 24 日 - 11:28:51 (Your Comment is Under Moderation)

      不客氣,只是教學進度有點緩慢

      回覆
  13. Laurence -  2010 年 08 月 10 日 - 00:14:22 (Your Comment is Under Moderation)

    拜託,請您一定要趕快完成,真的找很久了

    回覆
    • Scorpio -  2010 年 08 月 10 日 - 16:42:10 (Your Comment is Under Moderation)

      時間上的問題.很難快速寫完

      回覆
  14. miu -  2010 年 08 月 05 日 - 12:45:42 (Your Comment is Under Moderation)

    好期待後面的佈景教學哦>////<

    回覆
    • scorpio -  2010 年 08 月 05 日 - 23:50:56 (Your Comment is Under Moderation)

      我會盡量抽時間寫....

      回覆
  15. Scorpio -  2010 年 08 月 04 日 - 15:46:30 (Your Comment is Under Moderation)

    後台就可以啟用,不過這是空白檔,後續還會有一連串的教學

    回覆
  16. 綺綺 -  2010 年 08 月 04 日 - 10:24:06 (Your Comment is Under Moderation)

    請問我下載了wpnote之後要怎麼在我的wordpress裡啟用?

    回覆

Leave A Comment

Your email address will not be published. Required fields are marked (required):

Back to Top