主页 / 问题 / 1125712
Accepted
Proshka
Asked:2020-05-15 01:53:40 +0000 UTC2020-05-15 01:53:40 +0000 UTC

如何在 Wordpress 菜单中更改 HTML 标记

  • 772

菜单需要从管理面板组织。此菜单结构由 Wordpress 生成

<ul>
  <li>1</li>
  <li>
    <ul>
      <li>11</li>
      <li>12</li>
      <li>13</li>
    </ul>
  </li>
  <li>2</li>
</ul>
但是这种结构需要改变

<ul>
  <li>1</li>
  <li>
    <div>
      <ul>
        <div>
          <li>11</li>
        </div>
        <div>
          <li>12</li>
        </div>
        <div>
          <li>13</li>
        </div>
      </ul>
    </div>
  </li>
  <li>2</li>
</ul>

wordpress

1 个回答

  1. Best Answer

    有很多方法可以实现它，我建议2：

    1) 使用 Walker_Nav_Menu() 类扩展。此处的文档https://developer.wordpress.org/reference/classes/walker_nav_menu/。工作示例：

    <?php
wp_nav_menu(
    array(
        'container'=> false, 
        'theme_location' => 'primary',
        'walker' => new New_Walker_Nav_Menu()
    )
);

class New_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '<div><ul>';
    }

    function end_lvl( &$output, $depth = 0, $args = null ) {
        $output .= "</ul></div>";
    }

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        if ( $depth === 0 ) {
            $output .= $indent . '<li>';
        } else {
            $output .= $indent . '<div><li>';
        }

        $atts           = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target ) ? $item->target : '';
        if ( '_blank' === $item->target && empty( $item->xfn ) ) {
            $atts['rel'] = 'noopener noreferrer';
        } else {
            $atts['rel'] = $item->xfn;
        }
        $atts['href']         = ! empty( $item->url ) ? $item->url : '';
        $atts['aria-current'] = $item->current ? 'page' : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
                $value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output  = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

    function end_el( &$output, $item, $depth = 0, $args = null ) {
        if ( $depth === 0 ) {
            $output .= "</li>";
        } else {
            $output .= "</li></div>";
        }

    }
}
?>

    2) 通过 wp_get_nav_menu_items() 获取菜单并根据需要进行标记。缺点是您必须完成获取父元素的子元素（如果有）。例子：

    <?php
$menu_name = 'primary';
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    echo '<ul>';
    foreach ( $menu_items as $key => $menu_item ) {
        if ( $menu_item->menu_item_parent === 0 ) {
            echo '<li>'.$menu_item->title.'</li>';
        } else {
            echo '<div><li>'.$menu_item->title.'</li></div>';
        }

    }
    echo '</ul>';
} ?>

    PS：我认为现在创建具有任何布局的菜单并不难，即使是无效的。

    • 1

相关问题