您当前的位置:首页 > 电脑百科 > 程序开发 > 开源程序 > WordPress

wordpress删除菜单多余的CLASS和ID沉余

时间:2019-10-12 10:08:16  来源:  作者:

wordpress删除菜单多余的CLASS和ID沉余

 

1wordPress/ target=_blank class=infotextkey>WordPress增加模板菜单方法

在functions.php文件加上以下代码,

if(function_exists('register_nav_menus')){

register_nav_menus(

array(

'header-menu' => __( '菜单名字A' ),

'footer-menu' => __( '菜单名字B' ),

'sider-menu' => __('菜单名字C')

)

);

}

最简单的调用方式,前台加上下面代码

<?php wp_nav_menu; ?>

也可以对这个菜单进行更多的控制,代码如下

<?php wp_nav_menu(

array(

'theme_location' => '' //指定显示的导航名,如果没有设置,则显示第一个

'menu' => 'header-menu',

'container' => 'nav', //最外层容器标签名

'container_class' => 'primary', //最外层容器class名

'container_id' => '',//最外层容器id值

'menu_class' => 'sf-menu', //ul标签class

'menu_id' => 'topnav',//ul标签id

'echo' => true,//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false

'fallback_cb' => 'wp_page_menu',//备用的导航菜单函数,用于没有在后台设置导航时调用

'before' => '',//显示在导航a标签之前

'after' => '',//显示在导航a标签之后

'link_before' => '',//显示在导航链接名之后

'link_after' => '',//显示在导航链接名之前

'items_wrap' => '<ul id="%1$s">%3$s</ul>',

'depth' => 0,////显示的菜单层数,默认0,0是显示所有层

'walker' => ''// //调用一个对象定义显示导航菜单 ));

?>

 

2如何删除菜单选择器沉余

默认Wordpress菜单生成的html代码

wordpress删除菜单多余的CLASS和ID沉余

代码在菜单列表中li有多个Id,也有多个Class的类,而且定义整个菜单样式,根本不需要这么多选择器,下面介绍删除Wordpress沉余选择器的方法,代码如下

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); //删除Class选择器

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); //删除Id选择器

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

function my_css_attributes_filter($var) {

return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : ''; //删除当前菜单的四个选择器

}

效果如下:

wordpress删除菜单多余的CLASS和ID沉余


Tags:wordpress   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
在最近的一波攻击中,黑客利用多个插件中未修补的漏洞攻击了 160 万个 WordPress 网站。 易受攻击的插件对 WordPress 网站产生了的巨大攻击数据。 Wordfence 最近发现 WordPr...【详细内容】
2021-12-16  Tags: wordpress  点击:(9)  评论:(0)  加入收藏
说起 WordPress 优化加速来可以说是个经久不衰的话题了,包括明月自己都撰写发表了不少相关的文章。基本上到现在为止明月的 WordPress 优化方案已经固定成型了,那就是 WP Supe...【详细内容】
2021-11-02  Tags: wordpress  点击:(49)  评论:(0)  加入收藏
很多人在做了网站的搬家和网站的从新更换空间域名搬家之后,往往出现网站打不开的情况,这个问题其实并不难,但是很多新手站长因为不知道,导致在处理这类问题上花费了大量的时间。...【详细内容】
2021-08-17  Tags: wordpress  点击:(147)  评论:(0)  加入收藏
当访问者访问您的网站时,您只有几秒钟的时间来显示这个人正在寻找的信息,否则,他们只需点击浏览器的后退按钮,开始浏览器别的同类型的网站了。缓慢的WordPress网站会给您的访问...【详细内容】
2020-08-20  Tags: wordpress  点击:(112)  评论:(0)  加入收藏
WordPress 5.5如期而至,更新优化的主要三个领域:速度,搜索和安全。主要内容速度方面主要体现图片的加载优化上面,新版本采用了懒加载模式,在滚动到对应的位置,才会加载真实的图片...【详细内容】
2020-08-17  Tags: wordpress  点击:(97)  评论:(0)  加入收藏
【ALENG 自媒体】8月11日早间自媒体专稿,话说从2008年涉足独立博客至今,掐指一算,走独立博客这一行已经10多年了。10多年间,我的独立博客网站先后使用过早期的Z-blog博客系统,后...【详细内容】
2020-08-12  Tags: wordpress  点击:(114)  评论:(0)  加入收藏
安装好nginx、php、mysql之后,需要经过配置,才能使用起LNMP的环境。...【详细内容】
2020-08-06  Tags: wordpress  点击:(101)  评论:(0)  加入收藏
一台云服务器能做什么?上次介绍了薅腾讯云和阿里云两家厂商羊毛的方法和过程,那到手的云主机要干什么用呢?或者说,云主机有什么用?过了这么多年,"上云"这个说法好像并没有过时。简...【详细内容】
2020-08-04  Tags: wordpress  点击:(106)  评论:(0)  加入收藏
一般的大型网站系统,都依赖伪静态。如果服务器的伪静态没有配置好,访问部分链接就会出现 404 的情况。在 WordPress 则具体表现为后台“固定链接”选项设置失效。 下面就提供...【详细内容】
2020-07-04  Tags: wordpress  点击:(134)  评论:(0)  加入收藏
在本地的 Mac 电脑上配置开发环境安装 homeBrew安装 PHP 7 和 Composer安装 Valet配置 Valet安装 MySQL安装 WordPress在 Windows 电脑上配置开发环境安装 PHPstudy安装 Wor...【详细内容】
2020-06-20  Tags: wordpress  点击:(138)  评论:(0)  加入收藏
▌简易百科推荐
说起 WordPress 优化加速来可以说是个经久不衰的话题了,包括明月自己都撰写发表了不少相关的文章。基本上到现在为止明月的 WordPress 优化方案已经固定成型了,那就是 WP Supe...【详细内容】
2021-11-02  明月登楼    Tags:WordPress   点击:(49)  评论:(0)  加入收藏
很多人在做了网站的搬家和网站的从新更换空间域名搬家之后,往往出现网站打不开的情况,这个问题其实并不难,但是很多新手站长因为不知道,导致在处理这类问题上花费了大量的时间。...【详细内容】
2021-08-17  企飞资源    Tags:WordPress   点击:(147)  评论:(0)  加入收藏
当访问者访问您的网站时,您只有几秒钟的时间来显示这个人正在寻找的信息,否则,他们只需点击浏览器的后退按钮,开始浏览器别的同类型的网站了。缓慢的WordPress网站会给您的访问...【详细内容】
2020-08-20      Tags:wordpress   点击:(112)  评论:(0)  加入收藏
WordPress 5.5如期而至,更新优化的主要三个领域:速度,搜索和安全。主要内容速度方面主要体现图片的加载优化上面,新版本采用了懒加载模式,在滚动到对应的位置,才会加载真实的图片...【详细内容】
2020-08-17      Tags:Wordpress5.5   点击:(97)  评论:(0)  加入收藏
【ALENG 自媒体】8月11日早间自媒体专稿,话说从2008年涉足独立博客至今,掐指一算,走独立博客这一行已经10多年了。10多年间,我的独立博客网站先后使用过早期的Z-blog博客系统,后...【详细内容】
2020-08-12      Tags:WordPress   点击:(114)  评论:(0)  加入收藏
安装好nginx、php、mysql之后,需要经过配置,才能使用起LNMP的环境。...【详细内容】
2020-08-06      Tags:WordPress   点击:(101)  评论:(0)  加入收藏
一台云服务器能做什么?上次介绍了薅腾讯云和阿里云两家厂商羊毛的方法和过程,那到手的云主机要干什么用呢?或者说,云主机有什么用?过了这么多年,"上云"这个说法好像并没有过时。简...【详细内容】
2020-08-04      Tags:WordPress   点击:(106)  评论:(0)  加入收藏
一般的大型网站系统,都依赖伪静态。如果服务器的伪静态没有配置好,访问部分链接就会出现 404 的情况。在 WordPress 则具体表现为后台“固定链接”选项设置失效。 下面就提供...【详细内容】
2020-07-04      Tags:WordPress   点击:(134)  评论:(0)  加入收藏
在本地的 Mac 电脑上配置开发环境安装 homeBrew安装 PHP 7 和 Composer安装 Valet配置 Valet安装 MySQL安装 WordPress在 Windows 电脑上配置开发环境安装 PHPstudy安装 Wor...【详细内容】
2020-06-20      Tags:WordPress   点击:(138)  评论:(0)  加入收藏
操作场景WordPress 是一款使用 PHP 语言开发的博客平台,您可使用通过 WordPress 搭建属于个人的博客平台。本文以 CentOS 7.6 操作系统的腾讯云云服务器为例,手动搭建 WordPre...【详细内容】
2020-04-27      Tags:WordPress   点击:(100)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条