wordpress中如何制作自定義菜單
2019-05-12 來源：愛站科技
wordpress是比較全面的網(wǎng)站系統(tǒng)，我們可以在其主題中添加自定義菜單功能，那么你知道在wordpress中如何制作自定義菜單嗎？現(xiàn)在小編就教你實現(xiàn)制作自定義菜單。
要想實現(xiàn)自定義菜單，需要用到的函數(shù)是wp_nav_menu()，給這個函數(shù)傳遞一些參數(shù)就可以輸出自定義菜單菜單，下面簡單講講如何使用使用這個函數(shù)。
首先，在主題目錄下的functions.php的 <?php ….. ?> 之間，添加以下菜單注冊代碼，這樣你就可以在主題文件中使用wp_nav_menu函數(shù)了：
?
// This theme uses wp_nav_menu() in one location.
register_nav_menus();
接著我們在主題的導航欄處調(diào)用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的自定義菜單的調(diào)用就是這么簡單。wp_nav_menu還有很多參數(shù)，如自定義 ul 節(jié)點、ul 父節(jié)點的id和class的參數(shù)等等，詳情可以參考文檔：官方文檔 | 中文文檔
使用分類和頁面作為導航欄
???? 在 WordPress 3.0 之前，大部分WordPress主題都是拿頁面作為導航欄的，導航中只能添加頁面，顯得不夠自由。我剛用WordPress 2.7的時候，就為此問題煩惱，最后翻了文檔，查了一些資料，實現(xiàn)了在導航中添加分類，詳情請看我之前寫的文章：WordPress 分類做導航欄，并高亮顯示
非常規(guī)導航欄的制作
???? 以上提到的兩種方式，都是使用WordPress自帶的函數(shù)來實現(xiàn)，他們輸入的HTML代碼也都是限定好的，就是使用 ul li 的形式來構(gòu)建菜單列表：如：
?
?
?
?
<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中如何制作自定義菜單的內(nèi)容，希望大家喜歡，更多關(guān)于wordpress的內(nèi)容，請繼續(xù)關(guān)注西部數(shù)碼技術(shù)頻道。?
標簽： [db:TAGG]
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
