進度條

[WordPress][架站] 06. 動手更換你的網站佈景主題吧!

本文要介紹如何幫你的網站更換一個新的佈景主題

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. 變更佈景主題與關閉主題編輯器 (所屬課程)


以下正式開始文章


在安裝完WordPress之後,系統通常都會幫你預設一個佈景主題,但預設的佈景主題往往並不是自己想要的樣式,這時我們可以透過WordPress控制台裡的外觀功能去更換或調整目前的佈景主題的相關設定。

 

登入WordPress進入控制台底下的外觀可以看到預先載入的所有佈景主題,
而這些佈景主題分別會是各個獨立的資料夾,資料夾裡存放著這個佈景主題的所有相關設定檔案,這些資料夾會被放在/wordpress/wp-content/themes裡面。

 

 

每個載入的佈景主題資料夾內的檔案都會不太一樣。

 

 

以上圖為例,佈景主題貳零壹柒的資料夾內的檔案與佈景主題貳零壹伍的資料夾內的檔案就不太一樣。

但一個有效的佈景主題資料夾裡,某些設定檔案是固定的且必須要有的,例如:

style.css-->是整個網站主要的css檔,而且是每個佈景主題最基本也一定要有的檔案,裡面包含了這個佈景主題的檔案名稱、主題名稱及作者資訊等設定。

index.php-->提供網站主要編排設定,是這個佈景主題的主要檔案。

image.php-->儲存所有佈景主題使用到的圖片。

screenshot.png-->這個佈景主題的主題預覽圖片。

functions.php-->設定外掛或修改系統程式的檔。

等等...以上都是提供使用者在檔案裡面進行佈景主題自訂樣式的變更設定或程式上的修改,當然其它還有一些提供使用者自訂樣式的檔案就不在這裡另行贅述了。

之後我們會再教大家如何修改這些資料夾裡面的設定檔內容。

 

在這之前,我們就先來看看如何在WordPress的控制台介面裡更換一個新的佈景主題。

 

首先登入WordPress,在控制台底下點選「外觀」功能項目下的「佈景主題」,進入佈景主題設置畫面,在這畫面可以看到WordPress預先載入的佈景主題,以及目前網站已啟用的佈景主題(此範例目前啟用的佈景主題為貳零壹柒)。

 


接著按「新增」鈕來到新增佈景主題的畫面,可以看到用來查看各種佈景主題的子導覽類別鍵結,包含精選、熱門、最新、最愛和功能篩選,以及右側佈景主題搜尋框。

目前在WordPress 4.8.2的版本中提供超過5千種佈景主題樣式可供使用者下載選用,可以說是資源相當豐富。

 

 

畫面中的每個佈景主題都可以點選來查看其細節資料及預覽。
點選「預覽」是查看該佈景主題運作效果最好的方法,但要注意的是這個佈景主題的預覽並不是以你目前的網站內容來做預覽。

 

 

另外,也可透過功能篩器來幫助自己快速篩選到理想條件中的佈景主題。

 

 

選擇好想要的佈景主題,按下「安裝」,該佈景主題就會下載到自己的佈景主題收藏區,並在「外觀」底下的「佈景主題」中可以查看到剛剛選定且安裝下載的新佈景主題。

 


安裝下載下來的新佈景主題,可透過「即時預覽」的功能,可以看到以你的網站內容作為預覽的效果,除了pc版的預覽的效果,當然也包含了平板及手機版的預覽的效果。
 


選好新的佈景主題"Peony"就按下「啟用」來作為網站新的設計,取代原本的佈景主題"貳零壹柒"。

 


 

啟用後的佈景主題按「造訪網站」或點選網站首頁,可查看啟用新佈景主題後的網站全貌。

 

 


在啟用新佈景主題後,可利用該佈景主題的自訂工具介面來改變一些背景樣式。
點選「外觀」底下的「佈景主題」,找到目前啟用的佈景主題,按「自訂」,
可進入該佈景主題的自訂工具設定介面。

 


 

需要注意的是WordPress佈景本身可以對自訂工具做設定與客製化,所以每一個佈景裡面可使用的自訂工句會不一樣,而且也可能發生“同樣的功能”在不同的主體裡使用命名與使用方式不一樣的情況。


下圖是小編利用佈景主題的自訂工具設定介面改變了網站的Title Bar Background Image(標題列背景)。
 

 

上一篇:[WordPress][架站] 圖片設定與在文章中插入圖片

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊