wordpress5.3主题开发第五课：导航菜单

wordpress5.3官方主题：twentytwenty可以实现给网站设置导航菜单 

4

当启用自定义主题时，我们会发现自定义菜单不见了

设置导航菜单

要想实现在自己的主题中，也能设置导航菜单，必须在自己的主题的functions.php中编写 代码

以下是官方的写法

/**
 * Register navigation menus uses wp_nav_menu in five places.
 */
function twentytwenty_menus() {

    $locations = array(
        'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
        'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
        'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
        'footer'   => __( 'Footer Menu', 'twentytwenty' ),
        'social'   => __( 'Social Menu', 'twentytwenty' ),
    );

    register_nav_menus( $locations );
}

add_action( 'init', 'twentytwenty_menus' );

实现效果如下：

 

也可以换个写法

/**
 * Register navigation menus uses wp_nav_menu in five places.
 */
function twentytwenty_menus() {

    $locations = array(
        'pc-top'  => 'pc端顶部导航',
        'mobile-top'   => '移动端顶部导航',
        'pc-footer'   => 'pc端底部导航',
        'mobile-footer'   => '移动端底部导航',
    );

    register_nav_menus( $locations );
}

add_action( 'init', 'twentytwenty_menus' );

 以下是效果图

 

创建菜单项目

菜单项目主要来自于左侧部分

 创建“首页”菜单项目

”首页“的链接一般回网站的根目录，所以我们选择”自定义链接“，填写完毕后，点击【添加到菜单】

单独的页面也可以做为菜单项目

分类目录也可以做为菜单项目

当然如果你要喜欢，文章也可以做为菜单项目添加进去

以下是菜单项目的初步设置

在右侧，你可以实现各个菜单项目的分级显示，上下调整，所有这些功能都是拖动鼠标完成的

最后记得保存

 

使用导航菜单

导航菜单一般出现在顶部区域，使用 wp_nav_menu() 调用

详细情况参见：https://blog.csdn.net/lsmxx/article/details/104172511