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

2010 年 07 月 24 日 by: 阿湯 in: Wordpress 教學, Wordpress 佈景 36 Comments



我想很多人應該一直在等阿湯開始撰寫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欄式佈景，往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後，隨時都可以自己再精研修改哦。

01

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

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

WordPress佈景空白檔：https://wpnote.cc/d/files/wpnote.zip

裡面包含了以下檔案：

02

啟用空白的Wordpress佈景：

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

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

03
然後再到WP後台，就可以看到剛所設定的佈景名稱，我們就先把他啟用吧。

04

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

05

Wordperss佈景製作教學系列：

36 Comments

  2. 小周 -  2015 年 01 月 13 日 - 11:54:45 (Your Comment is Under Moderation)

    阿湯哥，我上傳安裝卻出現以下訊息

    正在安裝上傳的佈景主題，檔案：wpnote.zip
    檔案解壓縮中…

    安裝佈景主題中…

    無法安裝該軟體包。 此佈景主題遺失了style.css 樣式表。

    佈景主題安裝失敗。

    回覆
    • 小周 -  2015 年 01 月 13 日 - 11:55:29 (Your Comment is Under Moderation)

      請問這是什麼情況呢??

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

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

    回覆
  5. 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阿湯,
      已經下載好了,
      謝謝您的協助!
      我馬上學習去了,感恩!

      回覆
  6. 蜜蜂 -  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 一下

      回覆
  7. 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)

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

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

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

    回覆
  9. 魯魯咪 -  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基礎

      回覆
  10. 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)

      請從頭到尾爬文

      回覆
  11. 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筆記本"
      我只是將我自己學的東西順便記錄下來
      跟別人有什麼關係呢?
      如果照你這麼說,網路上每一種教學只要有人寫過都不能寫囉?
      那大家都關站吧

      回覆
  13. 仔仔 -  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)

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

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

    又等待了1星期了...

    回覆
  15. 仔仔 -  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=等待中...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    回覆
  20. 綺綺 -  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):

Y

下載最新的Wordpress

下載最新的Wordpress

FaceBook粉絲團

Back to Top