2

WordPress主題安裝 (五)- 製作個人履歷網站Part 1

請先參閱:網頁設計教學 - WordPress架站全攻略2016 (不斷更新…)

Theme掌管了一個Wordpress網站的外觀。透過安裝不同的Theme,我們可以輕易地製作各種專業的網站。我們將小試牛刀,建立一個個人履歷網站。

在這篇文章,我們會學習到:

- 利用Wordpress theme建立網站的操作流程
- 辦認Wordpress theme文件,Wordpress主題安裝的重點
- WordPress Theme入面的Option Panel概念
- Custom Post Type介紹
- 頁面出現錯誤或沒有顯示應有改變時的兩個對策
- 利用theme wpstanley去建立一個個人履歷網站

Theme掌管了一個Wordpress網站的外觀。透過安裝不同的Theme,我們可以輕易地製作出不同的網頁。

Theme也有分免費和付費的。通常付費的功能比較齊全,外觀也更專業,以及更多選擇。但由於我不想大家再付費,因此接下來幾天我們只會用一些免費的Theme做實戰。

至於如何搜尋這些Theme,以及當中要注意的事項,我會在其他文章詳述。

而今天我們會使用一個免費的個人履歷Theme - wpstanley。

大家可在:

http://gentsthemes.com/themes/stanleywp-twitter-bootstrap-wordpress-theme/

下載這個theme。

我們在以上的連結按demo,先看看利用這Theme會做出甚麼的網頁吧:

2

辦認theme文件

無論是付費或是免費,我們下載回來的wordpress theme通常有數個文件,包括:

- 主要theme文件
- Documentation (教你如何使用這個theme)
- Demo Data(通常是一個xml文件。我們安裝了一個theme後,如果想把它變成和Demo Site一模一樣的話便要上載這文件,這個文件會包括theme以外的其他資料,例如Page,Post 和Menu等等)

我們解壓屬下載回來的文件 StanleyWP-Package.zip 後會得出兩個文件:

- Documentation.zip
- stanleywp.zip

我們從文件名字得知,Documentation就是教你如何使用這個theme的文件,而stanleywp.zip就是主要的theme文件吧。

要確認stanleywp.zip是否主要的theme文件,我們可以把它解壓。如果解壓出來有一個style.css那麼這個stanleywp.zip便是主要的theme文件,可以直接把它上載到我們的wordpress上。

5
如上圖,解壓後會找到style.css,證明這個zip文件是正確的。

還原wordpress到初始狀態

但首先第一部,就是重新還原你的wordpress到初始狀態。我們可以安裝及使用一個Plugin叫做Wordpress Reset。

6
到Plugins-> Add New,然後在右手面的搜尋格上輸入wordpress reset,並接Enter。

7
安裝後要按Activate。

8
最後在左上角按Reset Site就可以了。

安裝theme

安裝theme大概有幾個步驟:
- 讀Documentation
- 上載及安裝theme
- 上載Demo Data

由於這個theme沒有提供Demo Data,我們會免去這個步驟。

上載及安裝theme

9
到Appearance->theme

10
按Upload theme,選擇主要theme文件(就是stanleywp.zip,直接裝有style.css的壓縮檔)。

11
按Activate。

12
回到主頁refresh,發現主頁都改變了!

通常,每個theme都會有一個給你設置這個theme的介面,我們叫它做Option Panel。今次我們發現在Appearance下多了一項叫Theme Options。它就是我們這個theme的Option Panel了。要注意的是這個Option Panel會因應不同的theme,它的所在位置也會不一樣。

13
在這兒我們可設置Logo,Homepage Layout等等。我們按Homepage,並把Portfolio從右面Disabled拉到左面Enabled,最後按Save All Changes。意思是Homepage除了放一般的內容外,還會顯示3個portfolio。

14
然後我們製作主頁。到Page->Add New輸入標題,內容和Feature Image,並在Template選擇Homepage。

15
有一點要留意的是如果你的Featured Image太大,在新增它後可按Edit Image。

16
我們把它變小,變成150*150。

17
最後按View Page,我們就這樣新增了一個Homepage!

下回繼續!

WordPress主題教學 (六)- 製作個人履歷網站Part 2