首頁 新手必讀基礎 WordPress 主題客製化 的第一堂課

WordPress 主題客製化 的第一堂課

WordPress 主題客製化 的三種主要途徑

發佈日期: 上次更新: 0 留言 7,245 瀏覽
WordPress 主題外觀客製化

帶路姬從2012年起開始接案,因為本來就是設計師,又剛好懂HTML和CSS語法,所以就很自然的希望幫客戶微客製化他們的主題,讓網站看起來更有質感,字體更適合中文的閱讀。

很多人問過我,為什麼我做的網站都比較有質感呢?一定要會寫程式才能客製化嗎?

今天我就來回答你們這些疑問。

主題模板為什麼需要客製化?

  • 中文的主題商比美國少很多。所以我們都到像 Themeforest 這種主題市場網站來購買主題。而這裡的主題的展示網站,都是英文的內容,看起來都很漂亮。但是!一旦改成中文字時,標題字體通常太大,內容字體通常太小… 這時,如果不做適當的修改,就會很醜…
  • 主題的 Logo 一定要換成自己的公司的呀!
  • 主題的整體「色系」也要改成和你的品牌(Logo)相符合,看起來比較像是你的品牌的網站。(像是連結所的顏色、按鈕的顏色、背景的顏色等等)
  • 每個網站的規模不同,很多欄位在小型個人網站上,其實出現的意義不大,就要客製化把它隱藏起來。(例如像是留言數量、作者名稱等等)
  • 主題的客製化選項越多,當然就提供給你越大的彈性,讓你不用寫程式就能改變外觀,讓你的網站不會和別人一模一樣。

WordPress 主題模板要怎麼客製化?

帶路姬 Erin Lin,這幾年來大概已經用過超過50個付費的主題,從這些主題的客製化過程中,我發現,每個主題的客製化方式都不一樣,這對當初剛開始學著做客製化的我,也是非常大的挑戰。每次購買新的主題,我就得花很多時間去閱讀該主題使用說明 (Documentation),還記得說明全都是英文,裡面很多不認識的專有名詞…

後來,我漸漸發現,其實雖然主題的客製化方式都不一樣,但是還是大同小異,所以,帶路姬想利用幾篇文章來統整這些主題的共通點,讓各位不管是選擇什麼主題,都可以參考我的文章,找到該主題客製化的方式。

我把主題客製化的方式歸類成三種:使用 Theme Options, 使用 Theme Customizer, 自己自訂 CSS

一、使用獨立出來的 Theme Options (主題選項)

如果你的主題是使用 Theme Options,你可能可以在這些地方找到它…

  1. 在控制台選單,你可以直接找到「Theme Options」這個項目,不過,他有時候不一定叫 Theme Options,可能是「Theme Panel」或者「Customize」。
  2. 在控制台選單,「外觀」>「Theme Options」。
  3. 在控制台選單,找找看你的主題的名字,像帶路姬的部落格使用的 Jannah Theme,它就有獨立一個選單項目叫「Jannah」,這個選單項目下,包含了 Theme Options 和一些其它主題附帶的功能。
WordPress 主題客製化
主題客製化的位置一
WordPress 主題客製化
主題客製化的位置二
WordPress 主題客製化
主題客製化的位置三

二、使用 WordPress 內建的 Theme Customizer (外觀自訂器)

各位應該有發現,每個主題客製化的地方都不一樣,造成 WordPress 新手很大的困擾,所以,WordPress的設計志工們,就開始著手計畫統一客製化流程的方式。

在2012年,WordPress 3.4 推出了 Theme Customizer (外觀自訂器) 這個新功能,他的位置在:控制台選單的「外觀」>「自訂」。

WordPress 主題客製化 - Theme Customizer
WordPress 主題客製化 – 外觀自訂器

如此一來,比較新的主題模版,開始遵循WordPress 新版的規則,讓大家到這個外觀自訂器來客製化,就不用到處找了。而且,這個工具還有一個很大的亮點!它可以讓使用者一邊從左邊的客製化項目去一一調整修改,一邊直接在右邊預覽你的改動,等到都修改完畢,再一起儲存發表。讓設計變得更直覺方便了!

三、自訂CSS程式碼

很多人可能不知道什麼是CSS,如果你是業餘架站,可以先知道,他是種程式語言,專門拿來控制網址的樣式的(顏色、大小、背景、等等)。

這種客製方式比較進階一點,如果你選的主題,提供的客製化選項很少,有些免費的主題,甚至連修改標題字體樣式的地方都沒有,那麼,你就得靠自己寫 CSS 來修改樣式。

那麼,要在哪裡寫客製化的CSS呢?通常在這些地方可以找到「Custom CSS」的欄位:

  1. 外觀」>「自訂 CSS
  2. Theme Options 裡的 General, 或 StylingCustom CSS

以上就是 WordPress 外觀主題客製化的第一課,先帶各位找到客製化主題的選項。這篇文章有點長,大家辛苦了!如果有看不懂的地方,歡迎留言或者到我們的社團來發問,我們都會盡量幫助你喔!

如果你還沒有決定要用哪個主題,推薦參考這三篇文章:

如果你的主題很難客製化,想要換主題的話,該怎麼做呢?

留言給帶路姬吧!

★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link

2021 網站帶路姬
有獎徵站!

只有這次!跟著免費的教學做網站&全民投票都有獎!
70,000 元大獎等你拿!
了解詳情
2021/11/1 ~ 2021/12/29
close-link
2021 帶路姬有獎徵站!七萬等你拿!