請先參閱:網頁設計教學 - 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會做出甚麼的網頁吧:
辦認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上。
如上圖,解壓後會找到style.css,證明這個zip文件是正確的。
還原wordpress到初始狀態
但首先第一部,就是重新還原你的wordpress到初始狀態。我們可以安裝及使用一個Plugin叫做Wordpress Reset。
到Plugins-> Add New,然後在右手面的搜尋格上輸入wordpress reset,並接Enter。
安裝後要按Activate。
最後在左上角按Reset Site就可以了。
安裝theme
安裝theme大概有幾個步驟:
- 讀Documentation
- 上載及安裝theme
- 上載Demo Data
由於這個theme沒有提供Demo Data,我們會免去這個步驟。
上載及安裝theme
到Appearance->theme
按Upload theme,選擇主要theme文件(就是stanleywp.zip,直接裝有style.css的壓縮檔)。
按Activate。
回到主頁refresh,發現主頁都改變了!
通常,每個theme都會有一個給你設置這個theme的介面,我們叫它做Option Panel。今次我們發現在Appearance下多了一項叫Theme Options。它就是我們這個theme的Option Panel了。要注意的是這個Option Panel會因應不同的theme,它的所在位置也會不一樣。
在這兒我們可設置Logo,Homepage Layout等等。我們按Homepage,並把Portfolio從右面Disabled拉到左面Enabled,最後按Save All Changes。意思是Homepage除了放一般的內容外,還會顯示3個portfolio。
然後我們製作主頁。到Page->Add New輸入標題,內容和Feature Image,並在Template選擇Homepage。
有一點要留意的是如果你的Featured Image太大,在新增它後可按Edit Image。
我們把它變小,變成150*150。
最後按View Page,我們就這樣新增了一個Homepage!
下回繼續!