WordPress 從 3.0 版本開始就內建了主題選單的功能,讓我們可以很簡單輕鬆的設定導航選單,現在絕大多數的主題也都支援這個功能,好比我們開發的 StartBusiness 主題。那麼,我們該如何設定 WordPress 導航選單功能呢?今天 StartPress 工作室團隊就跟大家介紹一下。

如何得知主題是否支援原生選單功能?

當你啟用主題後,進入 [highlight]WordPress 管理後台→外觀→選單[/highlight]設定頁面,如果你看到下圖顯示的內容,就代表你的主題不支援導航選單功能;反之,則表示支援:

WordPress 新手教學:替主題設定導航選單

WordPress 新手教學:替主題設定導航選單

自訂導航選單

在自訂選單之前,你需要建立好所需的文章分類和頁面,請先參考《建立與管理文章分類》,底下開始進入正題。

建立選單

請先進入 [highlight]WordPress 管理後台→外觀→選單[/highlight]設定頁面,點擊右方的「建立一個新選單」,填寫選單名稱(可以是任意中英文字,只是為了方便識別),之後按下「建立選單」按鈕,如下面兩張圖所示:

[lightbox full=”https://startpress.cc/wp-content/uploads/2014/10/wp-newer-nav-menus-02-tiny.png”]

WordPress 新手教學:替主題設定導航選單(二)

WordPress 新手教學:替主題設定導航選單(二)
(點擊圖片看清楚大圖)

[/lightbox]

WordPress 新手教學:替主題設定導航選單(三)

WordPress 新手教學:替主題設定導航選單(三)

附註:有些新手朋友可能會誤解這裡建立的導航選單,就是一個單獨的選單鏈結,但並非如此。這個新建立的選單,是一組鏈結,你可以在這個選單中建立 N 個鏈結來組成一個選單。底下我們會有更詳盡的解說。

[divider]

增加鏈結和設定選單

[lightbox full=”https://startpress.cc/wp-content/uploads/2014/10/wp-newer-nav-menus-04-tiny.png”]

WordPress 新手教學:替主題設定導航選單(四)

WordPress 新手教學:替主題設定導航選單(四)
(點擊圖片看清楚大圖)

[/lightbox]

  • 替你設定的選單選擇顯示的位置。(有些 WordPress 主題支援不同位置調用不同選單,所以可以設定不同的選單,然後選擇顯示位置)
  • 從左邊選擇要新增的鏈結(頁面、文章、鏈結、分類、標籤),加入到右邊的選單中。(鏈結:允許你新增任何鏈結,例如:你可以增加一個首頁,鏈結指向首頁網址即可。)
  • 拖曳排序可以編輯每個選單的資訊,並採用拖放的方式為其排序。將某個選單稍微向右拖動,這個選單就變成子選單(向右拖動一層,就是二級選單,拖動兩層就是三級選單,以此類推。這個前題是,你的 WordPress 主題支援顯示子選單),如此,你的選單就有了層級關係。
  • 將選單排好之後,點擊「儲存選單」的按鈕。

選單進階設定

WordPress 選單隱藏了一些功能,如果你想控制選單更多的屬性,可以點擊螢幕右上方的「顯示選項」,讓隱藏的功能都顯示出來:

[lightbox full=”https://startpress.cc/wp-content/uploads/2014/10/wp-newer-nav-menus-04-tiny.png”]

WordPress 新手教學:替主題設定導航選單(五)

WordPress 新手教學:替主題設定導航選單(五)
(點擊圖片看清楚大圖)

[/lightbox]

你也可以選擇更多的選單項目種類(例如:標籤與文章),還可以顯示選單的進階屬性(鏈結開啟目標、CSS 類別、鏈結關係、內容說明):

WordPress 新手教學:替主題設定導航選單(六)

WordPress 新手教學:替主題設定導航選單(六)

  • 導覽命名:就是鏈結的顯示文字。
  • 標題屬性:就是 a 標籤的 title 屬性值,比如上圖填寫「StartPress 工作室團隊」。
  • CSS 類別:給某個選單添加 class(CSS 選擇器),使用 CSS 讓這個選單與眾不同。
  • 鏈結關係:藉由鏈結關係(XFN)替選單增加 rel 屬性,例如不想讓搜尋引擎跟隨這個選單,可以為其增加 rel=”nofllow” 屬性。
  • 鏈結開啟目標:控制選單開啟方式,在瀏覽器的新視窗或新分頁開啟(target=”_blank”),或在目前視窗開啟(預設)。

[divider]

教學尾聲

以上介紹的就是 WordPress 導航選單的設定,你(妳)學會了嗎?今天的教學就到此結束,如果有關於這方面的相關問題,歡迎在底下留言交流。

別忘了持續關注 StartPress 工作室團隊,你可以參加我們在 Facebook 的粉絲團,或是訂閱我們的 RSS 電子報

如果有關於 WordPress 使用上的問題,歡迎你好好利用 Google 搜尋引擎找尋網路上豐富的教學資源,或是參加 WordPress Taiwan 在 Facebook 的正體中文社團
[divider]

如果您喜歡我們的 WordPress 教學文章,別忘了在底下幫我們評分。假若您需要我們替您進行 WordPress 主題客製化,請填寫諮詢表單聯繫我們。