WordPress自定义菜单步行者为WP V6+

xmakbtuz 于 2023-03-22 发布在 WordPress

关注(0)|答案(1)|浏览(148)

我试图做两件事与自定义菜单步行者在wordpressv6+由于方式的原始HTML的结构
1.添加一个<div>元素内的每一个<a>项目在我的wordpress菜单
1.添加一个类名到我的<a>元素
我试着在我的网站nav.php

wp_nav_menu(array(
    'walker' => new custom_walker,
));

在我的函数. php中

class custom_walker extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .=
        '<div class="nav-underline">';
        parent::start_lvl($output, $depth, $args);
    }

    public function end_lvl( &$output, $depth = 0, $args = null ) {
        parent::end_lvl($output, $depth, $args);
        $output .= '</div>';
    }

}

这似乎不起作用，我甚至不确定这是否会将附加元素放在我想要的位置。我希望它像这样：

<ul class="nav-list">
  <li class="list-item">
      <a class="nav-item-a" href="#">item
      <div class="nav-underline"</div></a>
  </li>
</ul>

让我知道如果你知道如何创建这样的wordpress菜单步行者？

wordpress

来源：https://stackoverflow.com/questions/75778556/wordpress-custom-menu-walker-for-wp-v6

1条答案

按热度按时间

zpjtge221#

您不一定需要修改自定义步行者类的start_lvl()和end_lvl()方法
要获得所需的结果，您应该修改start_el方法以添加所需的元素：

public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );

    $output .= '<li id="menu-item-' . $item->ID . '" class="' . $class_names . '">';

    $attributes = '';

    if ( ! empty( $item->attr_title ) ) {
        $attributes .= ' title="' . esc_attr( $item->attr_title ) . '"';
    }
    if ( ! empty( $item->target ) ) {
        $attributes .= ' target="' . esc_attr( $item->target ) . '"';
    }
    if ( ! empty( $item->xfn ) ) {
        $attributes .= ' rel="' . esc_attr( $item->xfn ) . '"';
    }
    if ( ! empty( $item->url ) ) {
        $attributes .= ' href="' . esc_attr( $item->url ) . '"';
    }

    $item_output = $args->before;
    $item_output .= '<a class="nav-item-a ' . implode( ' ', $item->classes ) . '" ' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '<div class="nav-underline"></div></a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

}

然后，您可以使用自定义步行者函数与class：

wp_nav_menu(array(
    'walker' => new custom_walker(),
    'menu_class' => 'nav-list',
));

这样的结构在HTML中是：

<ul class="nav-list">
  <li class="list-item">
      <a class="nav-item-a" href="#">item
      <div class="nav-underline"</div></a>
  </li>
</ul>

赞(0）回复(0）举报 2023-03-22

我来回答

WordPress自定义菜单步行者为WP V6+

1条答案

相关问题

热门标签

最新问答