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

Posted 2021-02-04 zhaoweidong

第一步：注册菜单位置

第二步：在模板文件中显示菜单

第三步：创建菜单

 

第一步：注册菜单位置

在functions.php中增加注册菜单代码

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

通过add_action()添加到"after_setup_theme"钩子里。

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

 

第二步：在模板文件中显示菜单

 

 

首先需要通过has_nav_menu(‘xxx‘)判断相关菜单是否进行设置。在通过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、后台配置

2、主题初始化