Wordpress去掉顶部菜单导航的class和id
wordpress 3.0的导航菜单功能是WP3的一大亮点。本文介绍如何去定顶部导航菜单wp_nav_menu中的class和id的方法,对于函数本身具体的参数设置,大家可以通过 wp_nav_menu的使用 来查找相关的参数和详细的使用说明。
我们想要实现的输出代码样式如下:
<ul>
<li><a href="" class="present" >首页</a></li>
<li><a href="" title="建站套餐">建站套餐</a></li>
<li><a href="" title="成功案例">成功案例</a></li>
<li><a href="" title="交互设计">交互设计</a></li>
<li><a href="" title="视觉设计">视觉设计</a></li>
<li><a href="" title="网页重构">网页重构</a></li>
<li><a href="" title="联系我们">联系我们</a></li>
</ul>
下面具体讲解一下改成这种样式的步骤:
-
去掉外层的container,这个很简单,直接设置参数即可。在调用的时候使用:
<?php wp_nav_menu(array('container'=>'')); ?>
就是把container的值设置为空。
-
去掉<ul>标签的class和id
找到wp-include/nav_menu_templet.php。大约第255行,$nav_menu .= '<ul'. $attributes .'>'
在上面增加代码:$attributes = '';也就是清空这个变量。
-
去掉<li>标签的class和id
大约第320行,foreach ( (array) $menu_items as $key => $menu_item ) 附近,改为:
foreach ( (array) $menu_items as $key => $menu_item ) {
$classes = (array) $menu_item->classes;
//$classes[] = 'menu-item';
//$classes[] = 'menu-item-type-' . $menu_item->type;也就是注释掉这两个样式。
然后再注释掉这个样式:(即在代码前面加两条斜线)
//$classes[] = empty( $queried_object->taxonomy ) ? 'current-' . $queried_object->post_type . '-ancestor' : 'current-' . $queried_object->taxonomy . '-ancestor';
-
设置当前页面的样式
也就是使用一个current样式,当前页面的li中增加一个class="present"。
大约第243行改为:
$classes[] = 'present'; //changed , oriented. current-menu-item
$_anc_id = (int) $menu_item->db_id;然后大约第370行,改为:
$classes[] = 'present'; //changed here
$_anc_id = (int) $menu_item->db_id;至此,我们就完全清除了导航菜单的class和id样式了。来添加自己喜欢的样式再外层,然后使用级联样式控制即可,达到页面的极简效果,实现CSS核心观点的要求。