WordPress 设置菜单

本文被收录到:

WordPress 开发文档

WordPress是一款能让您建立出色网站、博客或应用程序的开源软件。美观的设计,强大的功能,助您自由发挥心中所想。WordPress既是免费的,也是无价的。全世界 43% 的网站都在使用WordPress,小到兴趣博客,大到新闻网站。

目录

一,WordPress 使用 register_nav_menus() 设置菜单位置

导航菜单注册函数 register_nav_menus()

在主题的 functions.php 中添加:

if (function_exists('register_nav_menus')) {
    register_nav_menus(array(
        'header_main' => __('顶部菜单'),
        'footer_bottom' => __('底部菜单')
    )); 
}

上面注册了两个菜单位置,其中 ‘header_main’ 和 ‘footer_bottom’ 分别是这两个菜单的“键key”,后面的值是菜单的标题,会在 “外观->菜单->管理位置” 显示出来。

 

二,使用 wp_nav_menu() 生成菜单

使用的时候,指定菜单名称即可:

$nav_str = wp_nav_menu( array(  
    'theme_location'    => 'footer_bottom', //[保留]用于在调用导航菜单时指定注册过的某一个导航菜单名,如果没有指定,则显示第一个  
    'menu'              => 'footer_bottom', //[可删]使用导航菜单的名称调用菜单,可以是 id, slug, name (按顺序匹配的) 。  
    'container'         => false, //[可删]最外层容器标签名  
    'container_class'   => '',//[可删]最外层容器class名  
    'container_id'      => '',//[可删]最外层容器id值  
    'menu_class'        => 'footer-link-container', //[可删]ul 节点的 class 属性值  
    'menu_id'           => '', //[可删]ul 节点的 id 属性值  
    'echo'              => false, //[可删]确定直接显示导航菜单还是返回 HTML 片段,如果想将导航的代码作为赋值使用,可设置为false  
    'fallback_cb'       => 'wp_page_menu', //[可删]备用的导航菜单函数,用于没有在后台设置导航时调用  
    'before'            => '', //[可删]显示在导航a标签之前  
    'after'             => '', //[可删]显示在导航a标签之后    
    'link_before'       => '', //[可删]显示在导航链接名之前  
    'link_after'        => '', //[可删]显示在导航链接名之后  
    'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',  //[可删]使用字符串替换修改ul的class  
    'depth'             => 0, //[可删]显示菜单的深度, 当数值为0时显示所有深度的菜单,-1所有菜单平级显示  
    'walker'            => '' //[可删]自定义的遍历对象,调用一个对象定义显示导航菜单      
));

echo str_replace('sub-menu', 'select', $nav_str);

 

三,使用 Walker_Nav_Menu 类创建自定义分类

在WordPress中,Walker_Nav_Menu是一个核心类,用于处理主题中wp_nav_menu()函数生成的导航菜单的HTML输出。默认情况下,wp_nav_menu()使用Walker_Nav_Menu来遍历菜单项并生成HTML代码。然而,Walker_Nav_Menu可以被扩展以创建自定义的walker,这样你就可以控制菜单项的输出方式,比如使其与Bootstrap或其他框架兼容。

创建自定义Walker

要创建一个自定义的walker,你需要继承Walker_Nav_Menu类,并覆盖其中的方法以改变菜单项的生成方式。以下是一个基本的自定义walker的示例,用于Bootstrap兼容的导航菜单:

class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {

    // 构造函数可以用来初始化任何需要的属性
    public function __construct() {
        parent::__construct();
    }

    // 覆盖display_element方法以更改菜单项的输出
    function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args = null ) {
        // 基础实现
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args );
        
        // 自定义代码,例如添加额外的类或ID
        if ( ! empty( $args->has_children ) ) {
            $element->classes[] = 'dropdown';
        }
    }

    // 覆盖start_el方法以更改菜单项的开始标签
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // 基础实现
        parent::start_el( $output, $item, $depth, $args );
        
        // 自定义代码,例如添加额外的HTML属性
        if ( $depth > 0 ) {
            $output = str_replace( '<a', '<a class="dropdown-item"', $output );
        }
    }
}

使用自定义Walker

一旦你创建了自定义walker,你就可以在wp_nav_menu()函数中使用它。你需要将walker实例化,并将其作为参数传递给wp_nav_menu()函数。

// 在functions.php文件中实例化自定义walker
$bootstrap_walker = new Bootstrap_Walker_Nav_Menu();

// 使用wp_nav_menu()函数显示菜单
wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker' => $bootstrap_walker,
    'container'      => false,
    'menu_class'     => 'navbar-nav',
) );

在这个例子中,'theme_location'参数应该与你在WordPress主题中注册的菜单位置相匹配。'walker'参数接收自定义walker的实例,而其他参数则根据你的需求进行调整。

注意事项

确保你的自定义walker类位于WordPress主题的functions.php文件中,或者在一个加载到主题中的自定义插件中。此外,测试你的walker以确保它按预期工作,并且没有破坏WordPress的其他功能。

 

修改时间 2024-07-14

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
JavaScript 原型链
JavaScript screen对象
Nginx 使用 Njs 授权访问文件
WordPress 的用户角色和权限
Node.js 数据库模块 mysql2
JavaScript DOM 元素增删改
WP_REST_Response 返回结果类
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF