建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

WordPress后台菜单中名称后添加额外内容(删除wordpress菜单代码中多余的CSS选择器id或class)

GG网络技术分享 2025-03-18 16:12 0


WordPress后台菜单中名称后添加额外内容

标题中的描述大家可能不是很清楚,但是通过下面这张图片大家就明白了:

乍一看,你可能觉得没有什么,但是仔细想想,这两个红色数字出现的区域应该是不会有数字出现的,每次,本文将告知你如何在这些地方设定额外的内容,可能是任何内容。

功能方面仅仅通过一段代码来解决就可以了:

add_action( 'admin_menu', function() {

global $menu;

//下面的5是测试数据

$count = 5;

$menu_item = wp_list_filter(

$menu,

array( 2 => 'upload.php' )

);

if ( ! empty( $menu_item ) ) {

$menu_item_position = key( $menu_item );

$menu[ $menu_item_position ][0] .= ' <span class="awaiting-mod">' . $count . '</span>';

}

});

直接将上面的代码添加到function.php中即可,那么问题来了,这段代码的意义是什么?

我简单的讲解一下,如果其中存在错误的话,可以联系我进行修改。

首先我们需要知道的就是$menu是什么,通过var_dump得出的结果如下:

通过截图我们可以看出,这个全局函数就是后台的菜单列表,每一个数组中都包含了多项内容,这多选项内容分别对应的是什么呢?经过查看源代码,了解到原来细心的官方已经给出了解释:

这种情况下就不用我解释了,这里也就说明了为什么上方的代码中会出现:array( 2 => ‘upload.php’ ) ,言外之意,如果你想要在别的菜单中例如页面后面添加额外的内容,这里就需要修改为:array( 2 => ‘edit.php?post_type=page’ ) 。

不知道上面的讲解大家明白了没有,虽然本文讲解的是菜单之后添加额外的内容,如果你仔细查看本文,你会了解到很多相关的扩展,比如针对某些菜单增加额外的CSS,或者针对不同的自定义用户组隐藏不同的菜单亦或者是不同页面下的body添加额外的CSS属性等等,就看你如何发挥了。

删除wordpress菜单代码中多余的CSS选择器id或class

wordpress网站中,使用默认代码调用wordpress菜单,会出现下面代码,会有很多选择器,会让我们感觉代码不够简洁。

<liid="menu-item-6"class="menu-itemmenu-item-type-custommenu-item-object-customcurrent-menu-itemcurrent_page_itemmenu-item-homemenu-item-6"><ahref="#">首页</a></li>

<liid="menu-item-13"class="menu-itemmenu-item-type-taxonomymenu-item-object-categorymenu-item-13"><ahref="#">网站</a></li>

<liid="menu-item-8"class="menu-itemmenu-item-type-taxonomymenu-item-object-categorymenu-item-8"><ahref="#">WordPress主题</a></li>

如果要简化代码可以直接在function.php文件中加入功能函数:

/**

*移除菜单的多余CSS选择器

*Fromhttps://www.wpdaxue.com/remove-wordpress-nav-classes.html

*/

add_filter('nav_menu_css_class','my_css_attributes_filter',100,1);

add_filter('nav_menu_item_id','my_css_attributes_filter',100,1);

add_filter('page_css_class','my_css_attributes_filter',100,1);

functionmy_css_attributes_filter($var){

returnis_array($var)?array():'';}

这样就可以输出简单的代码了

<li><ahref="#">主题</a></li>

<li><ahref="#">WordPress</a></li>

<li><ahref="#">WordPress主题</a></li>

也可以使用其他调用代码:

<?php

echostrip_tags(wp_nav_menu(

array('theme_location'=>'head_nav4',

'container_class'=>'user_menu',

'echo'=>false,

'items_wrap'=>'%3$s')

),'<li><a>');

?>

标签:

提交需求或反馈

Demand feedback