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函数判断是否有子菜单,如果有则展示相关的代码,没有则不显示,具体方法请自行尝试。