導讀:建站技術建站技術在WordPress 3.0中增加了自定義菜單功能，如果你在WordPress后臺（外觀>菜單）創建一個菜單，你可以在主題中使用wp_nav_menu()函數來自助建站技術建站技術員。
在WordPress 3.0中增加了自定義菜單功能，如果你在WordPress后臺（外觀>菜單）創建一個菜單，你可以在主題中使用wp_nav_menu()函數來顯示這些菜單。但是像圖中這種帶描述的導航菜單還無法簡單實現，本文將教你改變WordPress默認的菜單輸出結構，打造個性的導航菜單。
首先我們先看下默認的輸出結構：
<ul?id="menu-main">
<li><a?href="#">首頁</a></li>
<li><a?href="#">關于</a></li>
</ul>
默認的結構根本不可能輸出我們想要的效果，所以我們需要改變輸出的結果：
<ul?id="menu-main">
<li><a?href="#"><strong>首頁</strong><span>Home</span></a></li>
<li><a?href="#"><strong>關于</strong><span>About</span></a></li>
</ul>
準備工作
我們要做的第一件事就是到菜單頁面，你會發現每個菜單項都有一個“標題屬性”，了解網頁都知道這是用來顯示鼠標移到鏈接上后的提示性文字，首先把你希望顯示的文字先填上~
WordPress使用一個特殊的“Walker”類來遍歷數據記錄并顯示出來。幸運的是，我們可以很輕松的創建屬于我們自己的“Walker”類從而改變菜單的輸出結構。
打開你主題文件中的function.php文件，并添加如下代碼：
class?description_walker?extends?Walker_Nav_Menu?{
????function?start_el(&$output,?$item,?$depth,?$args)?{
????????global?$wp_query;
????????$indent?=?(?$depth?)???str_repeat(?"t",?$depth?)?:?'';
????????$class_names?=?$value?=?'';
????????$classes?=?empty(?$item->classes?)???array()?:?(array)?$item->classes;
????????$classes[]?=?'menu-item-'?.?$item->ID;
????????$class_names?=?join(?'?',?apply_filters(?'nav_menu_css_class',?array_filter(?$classes?),?$item,?$args?)?);
????????$class_names?=?'?class="'?.?esc_attr(?$class_names?)?.?'"';
????????$id?=?apply_filters(?'nav_menu_item_id',?'menu-item-'.?$item->ID,?$item,?$args?);
????????$id?=?strlen(?$id?)???'?id="'?.?esc_attr(?$id?)?.?'"'?:?'';
關鍵詞標簽: 建站 你的 菜單
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-23 ，文章改進你的WordPress導航菜單 —— 輸出標題描述,建主要講述你的,菜單,建站網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_34807.html
