WordPress菜单函数wp_nav_menu有子菜单项自动添加has-children样式

WordPress菜单函数wp_nav_menu有子菜单项自动添加has-children样式

最近在用WordPress建站过程中,用WordPress自带的菜单函数wp_nav_menu生成的菜单过程中,发现凡是带子菜单的菜单项默认并无特殊样式,这样就很不方便去区分有子菜单项还是无子菜单项的样式,搜索了一下Google,找到了一个不错的纯绿色的方法如下:

在模版文件functions.php中加入如下代码:

/* Detect Wp_Nav_Menu has children */
function gtp_nav_menu_css_class( $css_class, $item ) {
    global $wpdb;
    $has_children = $wpdb->get_var("SELECT COUNT(meta_id) FROM wp_postmeta WHERE meta_key='_menu_item_menu_item_parent' AND meta_value='" . $item->ID . "'");
    if ($has_children > 0) {
        array_push($css_class, 'has-children');
    }
    return $css_class;
}
add_filter( 'nav_menu_css_class', 'gtp_nav_menu_css_class', 10, 4 );

保存退出以后,前台刷新会看到,菜单项凡是带子菜单的地方都会自动插入一个has-children的样式,很方便的去通过不同的样式来区分。

Xiaoge Zhong
About the Author

Xiaoge Zhong

隽永东方资深数字营销专家团队,专注于独立站增长、SEO/SEM/AEO/GEO等前沿策略研究。我们拥有16年跨境出海实战经验,致力于为中国品牌提供技术驱动的全球化解决方案。

                       

我们将在一个工作日内联系您

                       

免费诊断您的独立站及产品搜索量,制定您的海外营销计划

站内搜索

输入关键词后按 Enter 键搜索