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

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

下一篇：Wordperss佈景製作教學系列(二)：WordPress佈景header.php製作

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

日期:2010/07/24 | 分類:Wordpress 佈景,Wordpress 教學 | 標籤:Wordpress, Wordpress佈景, Wordpress佈景教學, 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欄式佈景，往後如果想要再改變更多元化的格局只要等待熟悉整體佈局後，隨時都可以自己再精研修改哦。

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

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

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

裡面包含了以下檔案：

啟用空白的Wordpress佈景：

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

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

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

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

隨機文章

22 個留言▼

魯魯咪說道：

2011 年 04 月 10 日 at 21:00:34

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

例如：
Wordpress筆記本

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

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

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

謝謝

回覆
- 阿湯說道：
  
  2011 年 04 月 13 日 at 10:04:22
  
  每個佈景不同~如果要取代請自行學習CSS基礎
  
  回覆
KRAMA 說道：

2011 年 03 月 07 日 at 00:51:37

請問我該怎麼使用 wordpress

回覆
- Scorpio 說道：
  
  2011 年 03 月 07 日 at 15:58:17
  
  請從頭到尾爬文
  
  回覆
Lee 說道：

2010 年 12 月 15 日 at 07:00:38

大大你好

小弟用的是3.0版的wordpress

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

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

四格全部都會顯現在首頁

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

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

謝謝

回覆
- 阿湯說道：
  
  2010 年 12 月 18 日 at 15:58:51
  
  用more標籤截斷
  
  回覆
Timothy 說道：

2010 年 12 月 07 日 at 10:02:39

我愛水煮魚已經有做很完整的主題教學了，何必再搞一個呢？？我是看他的教學學會製作的。
http://fairyfish.net/2007/06/04/so-you-want-to-create-wordpress-themes-huh/

回覆
- 阿湯說道：
  
  2010 年 12 月 08 日 at 11:14:18
  
  我的站名是"WordPress筆記本"
  我只是將我自己學的東西順便記錄下來
  跟別人有什麼關係呢?
  如果照你這麼說,網路上每一種教學只要有人寫過都不能寫囉?
  那大家都關站吧
  
  回覆
仔仔說道：

2010 年 10 月 01 日 at 19:26:39

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

回覆
- Scorpio 說道：
  
  2010 年 10 月 07 日 at 17:07:05
  
  再催下去。。你來幫我工作，我就可以專心寫了
  
  回覆
仔仔說道：

2010 年 09 月 23 日 at 13:48:54

又等待了1星期了...

回覆
仔仔說道：

2010 年 09 月 10 日 at 03:23:40

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

回覆
- Scorpio 說道：
  
  2010 年 09 月 10 日 at 14:38:41
  
  最近在趕其它東西,快了~大約再1週
  
  回覆
  - 仔仔說道：
    
    2010 年 09 月 19 日 at 14:57:04
    
    =3=等待中...
    
    回覆
小琉球說道：

2010 年 08 月 23 日 at 20:18:31

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

回覆
- Scorpio 說道：
  
  2010 年 08 月 24 日 at 11:28:51
  
  不客氣，只是教學進度有點緩慢
  
  回覆
Laurence 說道：

2010 年 08 月 10 日 at 00:14:22

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

回覆
- Scorpio 說道：
  
  2010 年 08 月 10 日 at 16:42:10
  
  時間上的問題.很難快速寫完
  
  回覆
miu 說道：

2010 年 08 月 05 日 at 12:45:42

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

回覆
- scorpio 說道：
  
  2010 年 08 月 05 日 at 23:50:56
  
  我會盡量抽時間寫....
  
  回覆
Scorpio 說道：

2010 年 08 月 04 日 at 15:46:30

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

回覆
綺綺說道：

2010 年 08 月 04 日 at 10:24:06

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

回覆

Wordpress筆記本

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

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

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

WordPress佈景基本格式：

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

啟用空白的Wordpress佈景：

相關文章

隨機文章

22 個留言▼

發表留言 »

下載最新的Wordpress

Google Translale

最新文章本週熱門最新留言

文章分類

FaceBook粉絲團

網站資訊

交換連結(隨機)

標籤雲