码迷,mamicode.com
首页 > Web开发 > 详细

WordPress自定义菜单和修改去除多余的css

时间:2015-07-28 00:22:04      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了。

所以我们在模板制作过程中,需要自定义WordPress菜单。

在functions.php文件中加入

if(function_exists(‘register_nav_menus‘)){

register_nav_menus(
array(
‘header-menu‘ => __( ‘导航自定义菜单‘ ),
‘footer-menu‘ => __( ‘页角自定义菜单‘ ),
‘sider-menu‘ => __(‘侧边栏菜单‘)
)
);
}

我们就可以在WordPress后台外观中自定义菜单了。

然后我们在前台调菜单出来

<?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默认的,是可以根据我们的需求进行修改的。

一般WordPress默认的菜单,在前台是这样显示的

<div class="menu-header-container">
    <ul id="menu-header" class="menu">
        <li class="current-menu-item"><a href="http://www.xxx.com/">大学首页</a></li>
        <li><a href="http://www.xxx.com/category/news">WordPress资讯</a></li>
    </ul>
</div>

我们需要将里面的id和class修改成前端工程师设置好的样子。

所以我们就需要修改 wp_nav_menu 里默认的内容。

但是如果我们需要去除li标签的id和class

<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="http://www.xxxx.com/">大学首页</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://www.xxxx.com/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="http://www.xxxx.com/themes">WordPress主题</a></li>

就需要用到下面这段代码了,将这段代码加到functions.php文件中,就可以移除调多余的css选择器了。

/**
 * 移除菜单的多余CSS选择器
 * From http://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);
function my_css_attributes_filter($var) {
    return is_array($var) ? array() : ‘‘;
}

 

WordPress自定义菜单和修改去除多余的css

标签:

原文地址:http://www.cnblogs.com/hxqseo/p/4681434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!