wordpress如何自定义html菜单结构

wordpress想要在主题中添加菜单，首先需要在主题文件夹内创建functions.php文件，并添加相关的PHP代码，如果不添加代码在后台的主题选项卡内是不会出现菜单的选项的。当成功添加了相关代码之后，便可以在index.php、header.php等文件中进行调用。

//fuctions.php中的文件
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

//前台调用方法
wp_nav_menu( array( 'theme_location' => 'header-menu' ) );

//前台展示代码
<div class="menu-menu-container">
  <ul id="menu-menu" class="menu">
    <li id="menu-item-30" class="66 menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-30">
		<a href="http://localhost" aria-current="page">首页</a>
	</li>
  </ul>
</div>

细心的小伙伴会发现，当我们成功调用了wordpress菜单后，前台展示的代码会自动添加类名和各种属性 ，那如果我们想要仿站或是有自己的代码DOM结构该怎样办呢?我们可以打开需要调用菜单的文件，这里以header.php文件为例，在其中需要调用菜单的位置，添加以下代码。

      $menu_name = 'Menu'; // 替换为你的菜单名称
      $menu_items = wp_get_nav_menu_items( $menu_name );
      $custom_menu = array();
      if ( $menu_items ) {
        foreach ( $menu_items as $menu_item ) {
          $custom_menu_item = array(
            'title' => $menu_item->title,
            'url' => $menu_item->url,
            'classes' => implode( ' ', $menu_item->classes ),
            'description' => $menu_item->description,
            'custom_html' => '<a href="' . esc_url( $menu_item->url ) . '" class="' . implode( ' ', $menu_item->classes ) . '">' . esc_html( $menu_item->title ) . '</a>',
          );
          $custom_menu[] = $custom_menu_item;
        }
      }
      if ( !empty( $custom_menu ) ) {
        echo '<nav class="custom-menu">';
        foreach ( $custom_menu as $item ) {
          echo $item[ 'custom_html' ];
        }
        echo '</nav>';
      }

保存文件后，刷新前台，发现展现的代码结构已经成为我们设置的样子，轻松实现wordpress自定义菜单html结构，但如果你有二级菜单则需要进一步的对以上代码进行二次开发，具体思路是可以利用if函数判断是否有子菜单，如果有则展示相关的代码，没有则不显示，具体方法请自行尝试。