码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-18 21:21:24      阅读:702      评论:0      收藏:0      [点我收藏+]

标签:参数说明   code   注册   初始化   action   html   添加   cti   link   

第一步:注册菜单位置

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

第三步:创建菜单

 

第一步:注册菜单位置

在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、主题初始化

 

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

标签:参数说明   code   注册   初始化   action   html   添加   cti   link   

原文地址:https://www.cnblogs.com/zhaoweidong/p/10289619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!