WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)教學目的:

1.從 WordPress 控制台的側邊選單進入外觀選項的各個介面

2.介紹 WordPress 外觀選單的各項功能

歡迎來到鵠學苑~協助您架設網站的好去處!還記得在鵠學苑裡有一篇 WordPress主題選用 的教學文章嗎?在那一篇教學裡面我說明了佈景主題的重要性,也推薦各位初心者們如果想要建立一個專業的、實用的、吸睛的、引人入勝的網站,可以購買好的主題來佈置網站。那麼在這一篇 WordPress 教學 基礎介紹五(外觀) 的教學中,鵠學苑又要教大家什麼呢?

在 WordPress 外觀選項中,有更多針對網站佈置上細節的設定,如果說套用一個主題是把網站的框架建立起來,在外觀選項的其他設定就是加入更多的元素讓整個網站更趨於完整。由於主題的檔案是由不同的團隊開發的,所以在網站外觀的設定上也會有不同的設計,在這一篇必須先讓大家了解在 WordPress 外觀選項中最基本的介面操作方式以及功能解釋,這樣以後初心者們在應用不同的主題後,想根據主題的設定去建立網站功能設定外觀,才能夠事半功倍!

跟著鵠學苑的腳步,讓我們開始學習WordPress的外觀功能吧!

(小提醒:鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範!)

WordPress Taiwan 正體中文下載點:https://tw.wordpress.org/releases/

• 從WordPress控制台的側邊選單進入外觀選項的各個介面

第一步:從控制台側邊選找到外觀,點擊後會有佈景主題、自訂、小工具、選單、主題編輯器。

WordPress 教學 基礎介紹五(外觀)

• 介紹WordPress外觀選單內的各項功能

1.佈景主題(Theme)在前面的 WordPress主題選用 已經提到過佈景主題,主要就是透過佈景主題選單下載或上傳,並安裝喜歡的主題風格,將其套用在自己的網站上。

WordPress 教學 基礎介紹五(外觀)

2.自訂(Custom)在自訂裡面可以修改套用的主題裡面各項設定,比如:網站識別能更改網站的名稱,色彩能更改頁首文字顏色及背景顏色等等,在做完更改後記得點擊已儲存的按鈕,變更才會生效。可以看到在選單的最後一項是附加的CSS,如果對CSS有相當的了解,也可以直接在CSS裡面更改更多的細節。

WordPress 教學 基礎介紹五(外觀)

小提醒:在這個頁面的設定是透過即時預覽這個功能來操作,也就是說在變更設定的同時,右側的畫面會直接套用變更後的樣式,這樣就可以馬上看到修改後的樣式是不是自己想要的喔!

3.小工具(Widget)在每個佈景主題內都有許多的可使用小工具,在左側有提供許多的可用小工具,你可以將你需要的小工具,例如圖片、影片、月曆、標籤雲等等,加入到右側佈景主題支援的欄位,通常是以側邊欄(Sidebar)、小工具(Widget)命名的區域,或著是頁首及頁尾。

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

小提醒:在上面兩張圖片可以看到第一張圖有很多以英文命名的小工具,這是部分是安裝Avada付費主題後,主題內自帶的小工具,這些小工具當初是跟著佈景主題檔案一起被設計出來,對於主題的相容性及適應性都相當的良好,在網站的實用性上也強過內建的小工具。而第二張圖的大部分以中文命名的小工具則是WordPress內建的小工具,比較適用於免費主題喔!

假設我們把月曆的小方框拖曳到的頁尾小工具(Footer Widget)的欄位,並將這個月曆的小工具命名為”行程表”,就會在網頁最下方頁尾的區塊多了一個行程表。

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

 

下面第一張圖是還未加入月曆的網頁,第二張圖是加入月曆後的網頁。右側還有相當多的工具可以加入,可以自己嘗試看看加入後的效果及位置。

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

4.選單在網站裡可以自己設定一個選單區塊,也可以稱之為網站導覽(Navigation),讓瀏覽網站的使用者可以快速進入網站的其他頁面、文章或指定的網址。主要選單分為頁面、文章、自訂連結、分類,也可自定義上下層的關係。

WordPress 教學 基礎介紹五(外觀)

在上方有個可以選擇選單或是新增一個選單,當尚無有要的選單,可以點擊建立一個新選單。

WordPress 教學 基礎介紹五(外觀)

點擊建立一個新選單,可在頁面內輸入你想要的選單名稱, 如果輸入完成後,按下建立選單,就可以自行設計一個選單。

WordPress 教學 基礎介紹五(外觀)

頁面可以將修改過的新增頁面在名稱前面的方框勾選,加入到選單。

WordPress 教學 基礎介紹五(外觀)

文章你可以將你新增好的文章加入到選單,將方框處打勾,按下新增至選單就可以加入到選單內,如下圖所示。

WordPress 教學介紹五(外觀)

自訂連結你也可以新增一個連結至選單,如下圖所示。

WordPress 教學 基礎介紹五(外觀)

分類你可以將分類新增到選單,將方框處打勾按下新增至選單就可以加入到選單內,如下圖所示。

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

WordPress 教學 基礎介紹五(外觀)

小提醒:如果想要變更選單結構內各個項目的順序,只要對項目的方框點滑鼠右鍵按住,如上圖所示,移動滑鼠就能夠上下拖曳了喔!

5.主題編輯器

可以利用CSS語法來變更你想要細改的地方,可以更改背景和文字的顏色,或是加寬版面,如果熟悉CSS語法,有許多的地方都可以做更改。切記在更改CSS內容前請先備份!不然如果改錯了卻又沒有備份可以回覆,只能說…(可是瑞凡,我們回不去了.@_@)

WordPress 教學介紹五(外觀)

結語:

這一篇有關 WordPress 外觀的教學其實相當重要,佈景主題的選擇對於網站的外觀層次等級有很大的影響,小工具側邊欄的建立是完善了網站的豐富度及實用性,選單則決定了使用者在瀏覽網頁時對於網站內容流暢度的體驗!就我的經驗,初心者在建立網站時花在外觀這個功能的時間,相比起其他的選項要多得很多。在外觀的操作設定上其實沒有難度很好理解,但是就在於設定完成之後到前台重新整理網頁,究竟有沒有達到自己所預期的效果。

相信經過前幾篇教學在結語時建議可以到網站設計的官方首頁去看示範網站的樣本,相信各位初心者們也有理想的網站類型了吧!如果有看到自己喜歡的網站類型,當然也可以在教學文章的下方留言詢問基本設計的問題,鵠學苑很歡迎大家來提問的!今天的教學就到這裡,我們下一次 鵠學苑教學再見了,不見不散喔!

WordPress 基礎教學相關文章:

網站架設知識推薦閱讀:

WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器

WordPress 架站 兩種方式比較與分析,哪一種適合建立網站?

WordPress 網站設計-全球大型企業、知名品牌網站案例分享

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top