搬码资源网广告位搬码资源网广告位

WordPress如何删除导航菜单多余ID和Class

上面是搬码源码网 abnma.com 经由过程收集网络收拾整顿的代码片断。搬码源码网小编此刻分享给各人,也给各人做个参考。

应用 wordpress 步伐建站少不了用到民间提供的菜单功效,关于一个爱折腾的 WEB 前段喜好者来说那不成控的 css 抉择器着实望着头疼,如上面的这段应用默许菜单功效天生的代码前段 html 代码傍边呈现了多个 id 和 class 抉择器,可是这些咱们比必然全都能用到,于是就孕育发生了一系列的过剩代码。

在讲删除 WordPress 导航菜单过剩 ID 和 Class 之前,咱们先相识下 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' => ''// //挪用一个对象界说显示导航菜单 ));

?>

在应用 wp_nav_menu() 添加菜单,会输入许多 CSS 抉择器,好比上面的代码:

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="/">WPMAKER</a></li>

<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="/news">WordPress资讯</a></li>

<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="/themes">WordPress主题</a></li>

下面这段代码就是用默许的菜单功效天生此中我只用到了 menu-item 像 id=”menu-item-13″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13″这些都是没用的,明天我就把往除过剩 css 抉择的的代码分享给各人,代码很是简朴哄骗 wordpress 的过滤器来删除这些没有的代码,可以将上面的代码添加到主题的 functions.php,移除一切的 css 抉择器:

/**

* 移除菜单的过剩CSS抉择器

*/

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

add_filter('nav_menu_item_id',1);

add_filter('page_css_class',1);

function my_css_attributes_filter($var) {

return is_array($var) ? array() : '';

}

输入后果如下,够精简了吧:

<li><a href="/">WPMAKER</a></li>

<li><a href="/news">WordPress资讯</a></li>

<li><a href="/themes">WordPress主题</a></li>

不外,你可能要思量到界说以后菜单的某些样式,好比高亮显示以后菜单,那你就需求保留一些 CSS 抉择器,才气界说以后菜单。常用确当前菜单的抉择器有以下 4 个:

current-post-ancestor

current-menu-ancestor

current-menu-item

current-menu-parent

以是咱们只需不外滤它们即可,可以参考上面的代码:假如你想保留更多 CSS 类,可以改动以下代码的第 9 行的数组内容:

/**

* 移除菜单的过剩CSS抉择器

*/

add_filter('nav_menu_css_class',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 导航菜单中咱们常常应用的抉择器有(menu-item、 current-menu-item、 current-post-parent、 current-menu-parent)这几个那么咱们可以把这几个标签都保留上去假如以后拜候的是 WPMAKER 的首页,输入的代码为:

<li class="current-menu-item"><a href="/">WPMAKER</a></li>

<li><a href="/news">WordPress资讯</a></li>

<li><a href="/themes">WordPress主题</a></li>

保留了 class=“current-menu-item” ,对这个类添加样式即可。

以上是搬码源码网(abnma.com)为你网络收拾整顿的全数代码内容,但愿文章可以或许帮你解决所碰到的步伐开提问题。假如感觉搬码源码网网站内容还不错,接待将搬码源码网网站保举给步伐员挚友。

总结

以上是搬码源码网为你网络收拾整顿的删除WordPress导航菜单过剩ID和Class全数内容,但愿文章可以或许帮你解决删除WordPress导航菜单过剩ID和Class所碰到的步伐开提问题。

假如感觉搬码源码网网站内容还不错,接待将搬码源码网网站保举给步伐员挚友。

0
分享到:
搬码资源网广告位

评论0

请先

为了配合净网行动 , 本站下架所有娱乐源码 , 如有疑问 , 请联系站长qq 43233524
没有账号? 忘记密码?