WordPress custom Nav Walker

时间：2019-02-15 作者：Ariful Islam

我想将导航菜单转换为WordPress。尝试了很多片段。但我错过了一些东西。

以下是我的菜单示例html：

<div class="menu"> <a class="some-class" href="#">menu1</a> <a class="some-class" href="#">menu2</a> <a class="some-class" href="#">menu3</a> <a class="some-class is-active" href="/sell">Menu4</a> </div> 我尝试过这种方法：

$menuLocations = get_nav_menu_locations(); $menuID = $menuLocations[\'primary\']; $primaryNav = wp_get_nav_menu_items($menuID); foreach ( $primaryNav as $navItem ) { echo \'<a class="some-class" href="\'.$navItem->url.\'" title="\'.$navItem->title.\'">\'.$navItem->title.\'</a>\'; } 我的产量很好。仅活动菜单项有问题。

我正在尝试添加类is-active 用于活动导航菜单。谢谢（更新的问题）

3 个回复
最合适的回答,由SO网友:Sunny Johal 整理而成

您无需编写自定义助行器即可实现这一点。您可以修改wp_nav_menu() 函数并连接到相应的默认导航菜单过滤器中，以修改各个菜单项的输出。E、 g.（假设您的主题菜单位置称为主菜单）

把这个放在你的函数中。php文件

/**
 * Output Custom Menu
 * 
 * Call this function within your template
 * files wherever you want to output your
 * custom menu.
 * 
 */
function custom_theme_menu() {
    $menu = wp_nav_menu( array(
    \'theme_location\'  => \'primary\',
    \'container_class\' => \'menu\',
    \'items_wrap\'      => \'%3$s\', // needed to remove the <ul> container tags
    \'fallback_cb\'     => false,
    \'echo\'            => false
    ) );

    // Strip out the <li> tags from the output.
    echo strip_tags( $menu,\'<a>, <div>\' );
}


/**
 * Add Nav Menu Item Link Classes
 * 
 * Detects if we are rendering the custom menu
 * and adds the appropriate classnames.
 * 
 */
function custom_theme_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    // For all other menus return the defaults.
    if ( $args->theme_location !== \'primary\' ) {
        return $atts;
    }

    // Add the link classes.
    $class_names = array( \'some-class\' );

    if ( $item->current ) {
        $class_names[] = \'is-active\';
    }

    $atts[\'class\'] = join( \' \', $class_names );
    return $atts;
}
add_filter( \'nav_menu_link_attributes\', \'custom_theme_nav_menu_link_attributes\', 10, 4 );
然后，在模板文件中，只要调用以下函数即可输出菜单：

custom_theme_menu();

SO网友:Antti Koskinen

我认为，您需要当前的对象id，并将其与菜单项id进行比较。也许是这样的，

$menuLocations = get_nav_menu_locations(); 
$menuID = $menuLocations[\'primary\']; 
$primaryNav = wp_get_nav_menu_items($menuID);
$current_object_id = get_queried_object_id();
foreach ( $primaryNav as $navItem ) {
    // can\'t remember if this is the right way to get the page id or if there\'s a better way
    $menu_item_object_id = get_post_meta( $navItem, \'_menu_item_object_id\', true );
    $item_classes = ( $menu_item_object_id === $current_object_id ) ? \'some-class is-active\': \'some-class\';
    echo \'<a class="\' . $item_classes . \'" href="\'.$navItem->url.\'" title="\'.$navItem->title.\'">\'.$navItem->title.\'</a>\';
}

SO网友:mlimon

试试这个，我认为这是最简单的方法，如果你只想添加你想要的类。但如果你也想要加价，最好遵循@sunnyjohal的答案。

/**
 * Filters the CSS class(es) applied to a menu item\'s list item element.
 *
 * @param array    $classes The CSS classes that are applied to the menu item\'s `<li>` element.
 * @param WP_Post  $item    The current menu item.
 * @param stdClass $args    An object of wp_nav_menu() arguments.
 * @param int      $depth   Depth of menu item. Used for padding.
 */
function wpse64458_nav_class ($classes, $item, $args) {
    // Only affect the menu placed in the \'primary\' wp_nav_bar() theme location
    // So change with your nav menu id
    if ( \'primary\' === $args->theme_location ) {
        $classes[] = \'some-class\';
        if (in_array(\'current-menu-item\', $classes) ){
            $classes[] = \'is-active\';
        }
    }
    return $classes;
}
add_filter(\'nav_menu_css_class\' , \'wpse64458_nav_class\' , 10 , 3);

标签： menus   小码农  

相关推荐

Two menus show up

如果我将“echo”参数值设置为“true”：<?php if( has_nav_menu( \'primary-menu\' ) ) { wp_nav_menu( $menuParameters = array( \'theme_location\' => \'primary-menu\', \'container\'