天天看點
傳回

Wordpress菜單函數wp_nav_menu各參數詳解及示例

注冊菜單

首先要注冊菜單，将以下函數添加至function.php函數裡

register_nav_menus(array(
'PrimaryMenu'=>'導航',
'friendlinks'=>'友情連結',
'footer_nav'=>'頁腳導航'));
add_theme_support('nav_menus');

‘PrimaryMenu’=>’導航’

這個表示導航欄的名稱，左邊是别名，右邊是名稱。别名會用在導航欄的調用上，名稱則顯示在菜單背景頁面上

添加上述函數後，進入wp背景，在左側菜單的“外觀”裡即多了“菜單”選項

建立菜單

建立一個名稱為“導航欄”的菜單

可以看到主題位置顯示了三個位置，即剛才我們添加到function.php的函數裡設定的

Wordpress菜單函數wp_nav_menu各參數詳解及示例

在背景建立了菜單，并勾選主題位置後，開始下一步

引用菜單

在主題檔案對應位置，引用導航欄。需要用到下面這個函數

<?php 
wp_nav_menu( array(
    'theme_location'  => '',//導航别名
    'menu'   => '', //期望顯示的菜單
    'container'  => 'div',  //容器标簽
    'container_class' => '',//ul父節點class值
    'container_id'  => '',  //ul父節點id值
    'menu_class'   => 'menu',   //ul節點class值
    'menu_id'   => '',  //ul節點id值
    'echo'  => true,//是否輸出菜單，預設為真
    'fallback_cb' => 'wp_page_menu',  //菜單不存在時，傳回預設菜單，設為false則不傳回
    'before' => '', //連結前文本
    'after'  => '', //連結後文本
    'link_before'  => '',   //連結文本前
    'link_after'  => '',//連結文本後
    'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包裝清單
    'depth' => ,   //菜單深度，預設0
    'walker' => ''  //自定義walker
  ) );
?>

這些是幾乎所有的參數，還有一個item_space參數沒寫進去，覺得沒什麼必要

接着來講講這些參數如何使用，并給出了相應例子，以供參考

最簡單的用法 

<?php 
    wp_nav_menu( array( 'theme_location'=>'PrimaryMenu', 'depth' => ) );
?>

輸出結果為：

<div class="menu-導航欄-container">
    <ul id="menu-導航欄" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首頁</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一級導航</a>
    <ul class="sub-menu">   
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二級導航</a></li>
        <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30"><a href="#">二級導航1</a></li>
        <li id="menu-item-31" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-31"><a href="#">二級導航2</a></li>
    </ul>
    </li>
    </ul>
</div>

這裡的類名帶有中文，即在背景建立菜單的名稱。這是一個預設輸出的導航菜單結構

修改最外層容器标簽及類名和id

以下這幾個參數，可以修改最外層容器的标簽，以及它的類名和id，預設為div

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'container'  => 'div', 
    'container_class' => 'divclass',
    'container_id'  => 'divid', 
    'depth' => 
    ));
 ?>

輸出結果

<div class="divclass" id="divid">
    <ul id="menu-導航欄" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首頁</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一級導航</a>
        <ul class="sub-menu">   
            <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二級導航</a></li>
        </ul>
    </li>
    </ul>
</div>

修改ul的class和id

導航菜單的次層容器預設為ul，當然也是可改的，後面會講到。這裡給出了如何修改ul的類名和id

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'menu_class'   => 'menuclass',   //ul節點class值
    'menu_id'   => 'menuid',         //ul節點id值
    'depth' => 
    ));
?>

輸出結果

<div class="menu-導航欄-container">
    <ul id="menuid" class="menuclass">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首頁</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-28"><a href="#">一級導航</a>
        <ul class="sub-menu">   
        <li id="menu-item-29" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-29"><a href="#">二級導航</a></li>
    </ul></li>
    </ul>
 </div>

menu參數的使用

menu參數是用來調用想顯示的菜單。一般我們都是在背景操作，建立好菜單，勾選了主題位置後，該位置即使用這個菜單。如果有多菜單的情況下，可以通過menu參數去選擇，一般輸入菜單名稱或菜單id。例如我在背景又建立了一個名為nav1的菜單

Wordpress菜單函數wp_nav_menu各參數詳解及示例

然後如下設定

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'menu'   => 'nav1',  //期望顯示的菜單（輸入名稱或菜單id）
    'depth' => 
    ));
?>

輸出結果

<div class="menu-nav1-container">
    <ul id="menu-nav1" class="menu">
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="#">示例頁面</a></li>
    </ul>
</div>

可以看到已經不是輸出剛才的菜單了

插入文本參數的使用

通過這四個參數，可以添加文本到導航欄的文本中

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'before' => '1', //連結前文本
    'after'  => '2', //連結後文本
    'link_before'  => '3',   //連結文本前
    'link_after'  => '4',//連結文本後
    'depth' => 
    ));
?>

示例輸出如下

<div class="menu-導航欄-container">
    <ul id="menu-導航欄" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27">1<a href="#">3首頁4</a>2</li>
    ………………
Wordpress菜單函數wp_nav_menu各參數詳解及示例

當然，不止是文本，也可以輸出html标簽，是以靈活使用這四個參數，可以打造出别具一格的導航菜單

items_wrap參數的使用

這個參數控制次層容器，預設為ul标簽，通過修改該參數，可以輸出不同的菜單結構

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'items_wrap'  => '<ul id="ulid" class="ulclass">%3$s</ul>',
    'depth' => 
    ));

    /*
    參數： 
    %1$s：最外層容器(由參數container控制)的class名，即參數container_class的值
    %2$s：次一層容器class名，預設為menu，即參數menu_class的值
    %3$s：菜單内容
    */
?>

輸出結果

<div class="menu-導航欄-container">
    <ul id="ulid" class="ulclass">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首頁</a></li>
    ………………
    </ul>
</div>

去除ul标簽

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'items_wrap'  => '%3$s',
    'depth' => 
    ));
?>

輸出結果

<div class="menu-導航欄-container">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="#">首頁</a></li>
    …………
</div>

關于其他參數

像depth這個參數，預設0就行了

還有其他參數因為幾乎很少用到，是以就不講了

具體内容可以查閱官方文檔:https://developer.wordpress.org/reference/functions/wp_nav_menu/

去除或保留菜單多餘類名

将以下代碼添加至function.php檔案即可

add_filter('nav_menu_css_class', 'my_css_attributes_filter', , );
add_filter('nav_menu_item_id', 'my_css_attributes_filter', , );
add_filter('page_css_class', 'my_css_attributes_filter', , );
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
}

需要去除什麼，保留什麼，根據使用情況，修改上面的代碼即可

構造多級菜單

通過上述例子，很明顯預設二級菜單的類名為sub-menu

那麼，如果要構造更多級的菜單，以及要修改類名，該怎麼辦呢？

其實這個可以通過Walker參數來設定

這個參數用于調用一個對象定義顯示導航菜單

預設調用的就是Walker_ Nav_Menu這個類

是以我們也可以自己寫一個類，來構造多級菜單

例如

class new_walker extends Walker_Nav_Menu
 {
    function start_lvl( &$output, $depth = , $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"child-menu\">\n";
     }
 }

調用方法

<?php 
    wp_nav_menu( array( 
    'theme_location'=>'PrimaryMenu', 
    'walker' => new new_walker(),
    'fallback_cb' => '',
    'depth' => 
    ));
?>

上面隻是一個簡單例子，通過這個方法，可以自己寫一個菜單并調用

如果隻是簡單修改，可以更改\wp-includes\nav-menu-template.php中預設的Walker_Nav_Menu函數

示例如下：

<?php 
    function start_lvl( &$output, $depth = , $args = array() ) {
    if( $depth ==  ){
    $output .= '<ul class="sub-menu">';
    }else{
    $output .= '<ul class="third-menu">';
    }
    }
?>
<?php
    function end_lvl( &$output, $depth = , $args = array() ) {
    if( $depth ==  ){
    $output .= "</ul>";
    }else{
    $output .= '</ul>';
    }
    }
?>

按照以上代碼，則生成二級菜單時類名為sub-menul,三級菜單為third-menu

那麼，以上就是wp_ nav_menu函數的詳解及示例了。已經寫得盡量詳細了，掌握了這些參數的使用，相信實作任何菜單都不在話下。剛接觸wordpress時，最早碰到的就是這個函數，吃到了不少苦頭，為了做一個菜單功能花了很長時間。現在，終于是了解了這個函數的幾乎全部用法，也希望能幫到大家
wordpress rollby wp_nav_menu
上一篇: 常用Git操作指令總結
下一篇: 路徑規劃資料

繼續閱讀