主页 > 网站建设 > PHP教程 >
Wordpress去掉顶部菜单导航的class和id

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>

下面具体讲解一下改成这种样式的步骤:

  1. 去掉外层的container，这个很简单，直接设置参数即可。在调用的时候使用：

    <?php wp_nav_menu(array('container'=>'')); ?>

    就是把container的值设置为空。

  2. 去掉<ul>标签的class和id

    找到wp-include/nav_menu_templet.php。大约第255行，$nav_menu .= '<ul'. $attributes .'>'

    在上面增加代码：$attributes = '';也就是清空这个变量。

  3. 去掉<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';

  4. 设置当前页面的样式

    也就是使用一个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核心观点的要求。