首页 » WordPress主题制作 » 正文

WordPress主题制作:菜单制作和使用

分三步:
第一步:注册菜单
第二步:引用菜单
第三步:创建菜单

第一步:注册菜单
在在functions.php中增加注册菜单代码

register_nav_menus(
  array(
     'menu-1' => __( 'Primary', 'twentynineteen' ),
      'footer' => __( 'Footer Menu', 'twentynineteen' ),
      'social' => __( 'Social Links Menu', 'twentynineteen' ),
   )
 );

‘menu-1’ => __( ‘Primary’, ‘twentynineteen’ ),

左边是别名,右边是名称。别名会用在导航栏的调用上,名称则显示在菜单后台页面上。

通过add_action()添加到”after_setup_theme”钩子里。或参考2019主题,把上面的代码放在twentynineteen_setup()函数,并通过add_action()添加到”after_setup_theme”钩子里。

第二步:引用菜单

 引用菜单即在模板文件中显示菜单,一般用到两个函数:

1)通过has_nav_menu(‘xxx’)判断相关菜单是否进行设置

2)在通过wp_nav_menu()进行菜单显示。 

<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
        <nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentynineteen' ); ?>">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_class'     => 'main-menu',
                    'items_wrap'     => '<ul id="%1$s" class="%2$s" tabindex="0">%3$s</ul>',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
   <?php endif; ?>

<?php if ( has_nav_menu( 'footer' ) ) : ?>
            <nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'twentynineteen' ); ?>">
                <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'footer',
                        'menu_class'     => 'footer-menu',
                        'depth'          => 1,
                    )
                );
                ?>
            </nav><!-- .footer-navigation -->
        <?php endif; ?>

说明:部分html+css代码通过函数wp_nav_menu()的数组进行配置。难点就是wp_nav_menu的配置,挺复杂的,请参考其他文章。

第三步:创建菜单

打开外观-菜单,进行配置。

说明两点:

1)配置了register_nav_menus函数,进入wp后台,在左侧菜单的“外观”里才会多“菜单”选项,否则没有。

2)在菜单配置中,显示在“菜单位置”的,显示的是菜单名称,即如下代码后面的,如“Primary”或翻译后的“主菜单”。

‘menu-1’ => __( ‘Primary’, ‘twentynineteen’ ),