站長資訊網
        最全最豐富的資訊網站

        WordPress制作主題導航菜單的方法(一)

        WordPress怎么制作主題導航菜單?下面本篇文章給大家分享一下WordPress主題導航菜單制作的幾種方法,希望對大家有所幫助!

        WordPress制作主題導航菜單的方法(一)

        在WordPress主題制作中,導航菜單的制作算是一個重點,已經寫好導航菜單的HTML代碼,放在WordPress主題中如何動態調用呢?本文將給你介紹幾種編寫PHP代碼動態實現導航的方法,本文也將只側重于動態代碼的開發,不會教你如何編寫HTML、CSS和Javascript來實現華麗的導航菜單。

        WP 3.0自定義菜單的制作

        WordPress 3.0之后的版本開始支持自定義動態菜單,所謂的動態菜單,也就是允許用戶自行決定將哪些項目添加到導航菜單中,進入WordPress的管理后臺 – 外觀 – 菜單欄目,通過拖拉相應的欄目,即可創建自己的菜單。這對于WordPress主題開發者和使用者來說,都是皆大歡喜的事情。要想實現自定義菜單,需要用到的函數是wp_nav_menu(),給這個函數傳遞一些參數就可以輸出自定義菜單菜單,下面簡單講講如何使用使用這個函數。

        首先,在主題目錄下的functions.php的 <?php ….. ?> 之間,添加以下菜單注冊代碼,這樣你就可以在主題文件中使用wp_nav_menu函數了:

        // This theme uses wp_nav_menu() in one location. register_nav_menus();
        登錄后復制

        接著我們在主題的導航欄處調用wp_nav_menu(),即可輸出導航菜單HTML代碼:

        <?php      // 列出頂部導航菜單,菜單名稱為mymenu,只列出一級菜單     wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); ?>
        登錄后復制

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

        <div class="menu-menu-container">     <ul class="menu" id="menu-menu">         <li class="..." id="menu-item-1"><a href="...">首頁</a></li>         <li class="..." id="menu-item-2"><a href="...">分類A</a></li>         ...     </ul> </div>
        登錄后復制

        這里列出的 li 項為你在后臺 – 外觀 – 菜單添加的欄目,如果你還沒有在后臺添加菜單,導航欄將列出所有頁面。另外,wp_nav_menu會為每個 li 添加class,不同的class標記這個菜單項的屬性,如當前打開的是某個文章頁面,分類A 就是這篇文章所屬的分類,那么 分類A 所在的 li 將會如下代碼所示:

        <li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分類A</a></li>
        登錄后復制

        如果是在首頁,那么首頁的菜單項的 li 可能會如下所示:

        <li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首頁</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 的形式來構建菜單列表:如:

        <ul>     <li class="..">...</li>     <li class="..">...</li> </ul>
        登錄后復制

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

        <dl>     <dt><strong>標題</strong></dt>     <dd><a target="_blank" title="#" href="#">菜單A</a></dd>     <dd><a target="_blank" title="#" href="#">菜單B</a></dd> </dl>
        登錄后復制

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

        推薦學習:《WordPress教程》

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产情侣大量精品视频| 欧美成人精品网站播放| 国产精品无码久久综合网| 亚洲精品国产字幕久久不卡| 国产美女精品视频| 国产在线精品网址你懂的| 日韩精品系列产品| 麻豆精品国产自产在线观看一区| 日本人精品video黑人| 99久久99久久精品免费看蜜桃| 亚洲欧美日韩精品专区| 久久久久无码精品国产app| 99精品人妻少妇一区二区| 国产精品1024香蕉在线观看| 久久精品中文騷妇女内射| 亚洲国产精品无码AAA片| 无码精品人妻一区二区三区AV| 国产精品久久久久一区二区三区 | 亚洲精品欧美精品日韩精品 | 精品亚洲欧美高清不卡高清| 久久综合精品国产二区无码| 亚洲精品中文字幕乱码三区| 日韩精品无码久久一区二区三| 国产亚洲精品自在线观看| 2021国产成人精品久久| 日本精品久久久久中文字幕| 精品国产免费一区二区三区香蕉| 97r久久精品国产99国产精| 国产乱子伦精品无码码专区| 久久Av无码精品人妻系列| 久久99国产综合精品免费| 精品无码AV无码免费专区| 日韩精品乱码AV一区二区| 无码精品国产VA在线观看DVD| 亚洲中文字幕久久精品无码APP | 久久夜色撩人精品国产| 偷拍精品视频一区二区三区| 无码国内精品久久人妻麻豆按摩| 麻豆精品视频在线观看91| 日韩精品一区二区三区在线观看 | 日本VA欧美VA精品发布|