【 WordPress 入門】 9. 設定導航選單

正在檢視 2 個帖子:1-2 (共 2 個帖子)
  • 作者
    帖子
  • 小雨
    參與者
    • 文章數量: 13
    @xiaoyu
    樓主

    WordPress 3.0 新增了一個自定義導航選單的功能,讓你可以很自由地設定網站的導航選單。現在大多數的主題也都支援這個功能了,那麼,究竟該如何設定 WordPress 導航選單?今天我就介紹一下。

    如何確定主題是否支援自定義選單功能?

    啟用主題後,訪問後臺 – 外觀 – 選單,如果你看到下圖所示內容,說明主題不支援自定義選單,反之,則支援:

    Wordpress建站教程入門 WordPress建站 WordPress教程

    自定義導航選單

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

    建立選單

    開啟後臺 – 外觀 – 選單,然後點選頁面上的 「+」 按鈕,填寫一個選單的名字 (可以是任意文字,只是用來識別罷了),然後點選 「建立選單」 。比如下圖我建立一個名為 「選單」 的選單:

    Wordpress建站教程入門 WordPress建站 WordPress教程

    注:有些新手朋友誤以為這裡新增的 「選單」 就是一個單獨的連結,其實不是這樣的,這個 「選單」 是一組連結,你可以給他新增 N 個連結,組成導航條。

    新增連結和設定選單

    Wordpress建站教程入門 WordPress建站 WordPress教程

    ①從左邊選擇需要新增的連結 (自定義連結、頁面連結和分類連結),加入到選單中去。 (自定義連結:允許你新增任何連結,比如你可以新增一個首頁,連結指向首頁網址即可)

    ②可以編輯每個選單專案的資訊,並用拖放的方式為其排序。將某個選單項稍稍向右拖動,這個專案即變為子選單 (低一格就是二級選單,低兩格就是三級選單,以此類推。前提是你的 WordPress 主題支援顯示子選單哦),這樣您的選單便有了層級關係。

    ③排好選單以後,點選 「儲存選單」 。

    ④然後為你設定的選單選擇顯示的位置 (有些 WordPress 主題支援不同位置呼叫不同選單,所以你可以設定不同的選單,然後選擇顯示位置) 。

    選單高階設定

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

    Wordpress建站教程入門 WordPress建站 WordPress教程

    你可以選擇更多的選單專案種類 (例如標籤和文章),還可以顯示選單的高階屬性 (連結目標、 CSS 類、連結關係網、描述)

    Wordpress建站教程入門 WordPress建站 WordPress教程

    • 導航標籤 – 就是連結的文字
    • 標題屬性 – 就是 a 標籤的 title 屬性值,比如上圖填寫」WP 大學」
    • CSS 類 – 給某個選單項新增 class,透過 css 是這個選單項與眾不同,如上圖我新增了 「home-page」
    • 連結關係網 – 透過連結關係網 (XFN) 給選單新增 rel 屬性,例如不想搜尋引擎跟隨這個選單,可以為其新增 rel=”nofllow” 屬性
    • 連結目標 – 控制選單開啟方式,在新視窗開啟 (target=”_blank”) 或在當前視窗開啟 (預設) 。

    以下程式碼就是根據上圖的設定顯示的效果:

    • WordPress 大學

    好了,關於 WordPress 自定義導航選單就介紹到這裡。

    殼殼蟲
    參與者
    • 文章數量: 330
    @kekechong

    沒錯,我就是——美貌與智慧並重,英雄與俠義的化身,存在的意義就是消滅零回覆!

    為什麼我會出現在這裡:

    1 、時間過長、此貼釋出時間太長,且未收到相關回復;

    2 、水貼、單純的發表見解,尚未收到相關回復;

    3 、不支援或未解決的問題,無法回應或未收到相關回復

    如有與之相關的問題,請發表新話題進行討論。

正在檢視 2 個帖子:1-2 (共 2 個帖子)
  • 板塊 「教程存檔」 已關閉,不接受新話題和回覆。

話題資訊

  • 當前位於:教程存檔
  • 1 條回覆
  • 2 個參與人
  • 最後回覆:<a href="https://bbs.weixiaoduo.com/users/kekechong/" title=" 檢視殼殼蟲的個人資料" class="bbp-author-link"><span class="bbp-author-name"> 殼殼蟲</span></a>
  • 上次活動:<a href="https://bbs.weixiaoduo.com/topic/11602/#post-17389" title=" 回覆至:【 WordPress 入門】 9. 設定導航選單">9 年、 3 月前</a>