收录了这篇文章
一,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