首頁 > CMS教程 > WordPress > 主體

WordPress製作主題導覽選單的方法(一)

青灯夜游
發布: 2023-02-22 21:10:34
轉載
1807 人瀏覽過

WordPress怎麼製作主題導覽選單?以下這篇文章跟大家分享WordPress主題導覽選單製作的幾種方法,希望對大家有幫助!

WordPress製作主題導覽選單的方法(一)

在WordPress主題製作中,導覽選單的製作算是重點,已經寫好導覽選單的HTML程式碼,放在WordPress主題中如何動態呼叫呢?本文將給你介紹幾種編寫PHP程式碼動態實作導覽的方法,本文也將只專注於動態程式碼的開發,不會教你如何寫HTML、CSS和Javascript來實現華麗的導航選單。

WP 3.0自訂選單的製作

WordPress 3.0之後的版本開始支援自訂動態選單,所謂的動態選單,也就是允許使用者自行決定要將哪些項目加入導覽功能表中,進入WordPress的管理後台- 外觀- 選單欄目,透過拖曳對應的欄目,即可建立自己的選單。這對WordPress主題開發者和使用者來說,都是皆大歡喜的事。要實現自訂選單,需要用到的函數是wp_nav_menu(),給這個函數傳遞一些參數就可以輸出自訂選單選單,下面簡單講講如何使用這個函數。

首先,在主題目錄下的functions.php的 之間,加入以下選單註冊程式碼,這樣你就可以在主題檔案中使用wp_nav_menu函數了:

// This theme uses wp_nav_menu() in one location.
register_nav_menus();
登入後複製

接著我們在主題的導覽列處呼叫wp_nav_menu(),即可輸出導航選單HTML程式碼:

 'mymenu', 'depth' => 1) );
?>
登入後複製

#以上程式碼輸出的HTML程式碼形式如下:

登入後複製

這裡列出的li 項為你在後台- 外觀- 選單新增的欄目,如果你還沒有在背景新增選單,導覽列將列出所有頁面。另外,wp_nav_menu會為每個li 新增class,不同的class標記這個選單項目的屬性,如目前開啟的是某個文章頁面,分類A 就是這篇文章所屬的分類,那麼分類A 所在的li 將會如下程式碼所示:

  • 分类A
  • 登入後複製

    #如果是在首頁,那麼首頁的選單項目的li 可能會如下所示:

    #
    登入後複製

    從這些class的名稱就知道它們的作用,透過為這些class添加css屬性,可以達到如高亮當前導航選單的目的,如將目前選單連結定義成紅色:

    .current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
        color: red;
    }
    登入後複製

    好了,WordPress 3.0的自訂選單的呼叫就是這麼簡單。 wp_nav_menu還有很多參數,例如自訂 ul 節點、ul 父節點的id和class的參數等等。

    使用分類和頁面作為導覽列

    在WordPress 3.0 之前,大部分WordPress主題都是拿頁面當作導覽列的,導覽中只能新增頁面,顯得不夠自由。我剛用WordPress 2.7的時候,就為此問題煩惱,最後翻了文檔,查了一些資料,實現了在導航中添加分類,詳情請看我之前寫的文章:WordPress 分類做導航欄,並高亮顯示

    非常規導覽列的製作

    #以上提到的兩種方式,都是使用WordPress自帶的函數來實現,他們輸入的HTML程式碼也都是限定好的,就是使用ul li 的形式來建立選單列表:如:

    • ...
    • ...
    登入後複製

    如果主題的前端程式碼不是你寫的,而且導航欄位的程式碼寫得很龜毛,這根本不是上面的WordPress標準的ul 導覽列形式,如下面的程式碼:

    标题
    菜单A
    菜单B
    登入後複製

    重寫前端程式碼?我想誰都不願意這樣做,那該怎麼辦呢?還有,如果導覽列不使用分類和頁面,也不讓使用自訂選單,那怎麼辦?在實際的應用中,我們還會遇到各種各樣且稀奇古怪的需求,下期內容我們將繼續探討這個問題!

    推薦學習:《WordPress教學

    以上是WordPress製作主題導覽選單的方法(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:ludou.org
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!