麥克斯與沃普雷司

無痛使用 WordPress 我的第一個佈景主題

選擇WordPress來架設部落格的人,除了因為它是免費的原因以外,另外有很多也是因為它的佈景主題非常多,而且安裝替換十分容易,所以才選擇WordPress的。當我們一安裝完畢以後就內建了兩個佈景主題,其中的WordPress Default(圖一),是以在WordPress 1.X 版時就十分有名的Kubrick為基礎而建立的,這是一個在當時非常受歡迎的佈景主題,這一次max將透過一些簡單的修改,讓這個預設的佈景主題可以帶給你不一樣的視覺感受,而且又具有個人的特色。

WordPress Default
(圖一)

如果只是要替換頁首的圖片,你可以直接替換佈景主題裡/images/kubrickheader.jpg這個檔案,不過這次要跟大家分享的是,每一次的頁面轉換都會隨機帶入不同圖片,讓頁面更活潑,也更具個人特色。

1. 首先當然是要準備頁首的圖片,這個部分可以自行製作,將不同的頁首圖片存成不同的檔名。

2. 要隨機帶入不同圖片,我們需要一個隨機展示圖片的程式,這個程式可以到Matthew Mullenweg 這位作者的Random Image Script(圖二)取得。

(圖二)

3. 將圖二紅色框框部分的程式碼複製下來,打開Notepad++(如果沒有Notepad++的話也可以以其它的文字編輯軟體取代),然後貼上程式碼,將檔案存成rotate.php檔(圖三)。

(圖三)

4. 接著下來就是將製作好的頁首圖片與rotate.php檔上傳,我們在預設佈景主題(WordPress Default)的images資料夾下再建立一個header-img-rotate資料夾(/wp-content/themes/default/images/header-img-rotate/)(圖四),將頁首圖片跟rotate.php檔都上傳到header-img-rotate資料夾下(圖五)。

(圖四)

(圖五)

5. 再來還是透過FTP軟體,將佈景主題下的/wp-content/themes/default/style.css檔案的屬性改為可以寫入(圖六)。

(圖六)

6. 登入WordPress的管理介面,找到外觀→佈景主題編輯器(圖七),準備對style.css檔案進行修改,步驟五設定屬性正確,這時在右下角會看見更新檔案按鈕(圖七紅色框框)。

(圖七)

7. 在編輯框框中找到
#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}

background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;(圖八)
換成background: #73a0c5 url('images/header-img-rotate/rotate.php') no-repeat bottom center;(圖九),完成後點選更新檔案。

(圖八)

(圖九)

8. 回到WordPress首頁,這時會發現頁首的圖片已經修改完成(圖十),重新載入瀏覽器,或是點選文章,會發現頁首圖片也跟著變換了(圖十一),以上完成。

(圖十)

(圖十一)

(註)記的要將style.css的屬性修改回原來的屬性644(圖十二)。

(圖十二)

Exit mobile version