# 再次折腾,wordpress导航继续研究

- Link: https://yjyj.net/learn/wordpress-learn/4447.html
- Published: 2014-01-15T00:22:26+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 先注册导航位置，再用 wp_nav_menu 调用，后台必须先建菜单才会显示。
 * 高亮不生效时，重点检查 current-menu-item 等状态类，并补上对应 CSS。
 * 可用过滤器清理多余菜单 class，让导航输出更简洁，方便后续样式控制。

上一次稍微整理了点wordpress导航的相关资料https://yjyj.net/learn/wordpress-learn/
3774.html

趁着这次请假回山东空闲不少,赶紧的继续折腾起.
 既然资料齐备,剩下的就是动手开工了.
为了显示哥的决心,当然是要拿哥心爱的囧客圈(http://jokeoo.com)开刀.

为了让无意中来到这里的小伙伴也能尽快熟悉上手,哥就不拽那些装逼的了.
 直接上脑残小白
无脑版:

**0.先给你的主题注册一个导航:**
 拿囧客圈做例子,代码伺候:

    ```decode:true
    //添加导航
        register_nav_menus(array(
          'top-menu' => '顶部菜单',
        ));
    ```

**1.接着再主题内原导航菜单的位置用这个替换:**

    ```decode:true
    <?php wp_nav_menu(
    	array(
    		'container'=>'false',
    		'items_wrap' => '<ul class="jokeoo-menu">%3$s</ul>',
    		'theme_location' => 'top-menu'
    		)
    	);
    ?>
    ```

当然,某些情况下,会发现哎呦卧槽怎么调用不出内容,那是因为还没在后台建立相应的导航菜单
啊亲!

**2.最简单的一部到了,上传好刚修改的两枚页面,接着伸出左手中指,心中挚诚的默念:”money
money go my home”999999次.按下键盘上的”F5″.哒铛~! 导航出现了!**

当然,又有某些情况下,导航没有高亮显示,到这里,恭喜你! 你的脑残指数跟哥的淫荡指数差不远
了!
 没有写高亮的css,导航当然不会高亮!

于是接下来我们分析一下生成的导航代码:

你会找到这些css选择器里面的某一个:
 _current-post-ancestor current-menu-ancestor
current-menu-item current-menu-parent 怎么样,只看字面意思也能够知道该怎么做了吧?
没错,就是给他们写好想要的高亮样式,比如:”color:#fff;background:#000;”之类的.

再进阶一点,刚刚检查代码的时候,会发现class真是他喵的好大一串,太烦人了.
 例如:

    ```decode:true
    <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.jokeoo.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://jokeoo.com/category/funnygif">囧来囧去</a></li>
    <li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="http://jokeoo.com/category/mm">福利社</a></li>
    ```

如果你像哥一样热爱生活,当然会想要不相干的class消失掉.那么可以这么做:

过滤一下常用的当前导航高亮选择器:
 current-post-ancestor current-menu-ancestor current-
menu-item current-menu-parent

代码如下:

    ```decode:true
    /**
     * 移除菜单的多余CSS选择器
     */
    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_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : '';
    }
    //修改上面这行可以添加更多想要保留的项目
    ```

修改之后 就会变成:

    ```decode:true
    <li class="current-menu-item"><a href="http://www.jokeoo.com/">首页</a></li>
    <li><a href="http://jokeoo.com/category/funnygif">囧来囧去</a></li>
    <li><a href="http://jokeoo.com/category/mm">福利社</a></li>
    ```

哎呦,这样就成功了!
 给你的class写上中意的样式吧! 哥的囧客圈小宝贝儿已经改好了,一个
字:真他喵的帅毙了!

❓ 延伸问答与排错指南（FAQ）

WordPress 导航菜单为什么调用不出来？

通常是主题里只注册了菜单位置，但后台还没有创建并分配对应的导航菜单。先在主题中注册
导航，再到后台建立菜单并绑定到对应位置，前台调用 wp_nav_menu 才会输出内容。

WordPress 导航高亮不显示怎么处理？

先检查当前页面是否生成了 current-menu-item、current-menu-ancestor、current-menu-
parent 等状态类，再给这些类写高亮样式。如果没有这些类，说明菜单位置、页面归属或调
用方式还需要排查。

怎么去掉 WordPress 菜单里多余的 class？

可以通过 nav_menu_css_class、nav_menu_item_id、page_css_class 这几个过滤器，保留
需要的当前状态类，其余清理掉。这样输出更干净，后续写 CSS 也更省事。

📚 【[WordPress 学习](https://yjyj.net/category/learn/wordpress-learn)】专栏延伸
阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [WordPress 实用代码技巧：为含下载文件文章添加标识与常用函数合集](https://yjyj.net/learn/wordpress-learn/4438.html)
 * [WordPress 的日志循环结构 Loop](https://yjyj.net/learn/wordpress-learn/4340.html)
 * [wordpress自带的JQ太坏了~](https://yjyj.net/learn/wordpress-learn/4449.html)
 * [禁用某个wordpress插件更新](https://yjyj.net/learn/wordpress-learn/4531.html)
 * 热门必读[跨境电商 AI Prompts](https://yjyj.net/ad/7723.html)
 * 热门必读[重置 Mac 的 SMC](https://yjyj.net/learn/7596.html)

## Comments

### By: 笑话大全

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-15628
- Published: 2015-10-01T12:03:03+08:00

很久没有过来了，今天过来看一看！

### By: 歪妖内涵网

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-15449
- Published: 2015-08-25T23:06:32+08:00

不错的站点,以后一定常来。

### By: solifugus

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12576
- Published: 2014-01-15T08:44:37+08:00

你居然已经回来了！

### By: 小虾

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12577
- Published: 2014-01-15T10:44:30+08:00

因为我爱的板面正在呼唤我!所以哥义不容辞的回来了\~!!

### By: solifugus

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12578
- Published: 2014-01-15T15:29:50+08:00

那就别回去了吧。

### By: 小虾

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12582
- Published: 2014-01-16T09:44:04+08:00

联通线路太囧了…不然哥还真留着不走咧哇哈哈哈哈

### By: solifugus

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12583
- Published: 2014-01-16T11:46:55+08:00

那就开铁通吧，哈哈，啥时候有空，出来坐坐，请你吃个饭呗。

### By: 小虾

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12584
- Published: 2014-01-16T13:32:53+08:00

支持哈哈,铁通上大学那会儿给哥留下了不可磨灭的恐怖回忆…等乃们放假了约个时间粗来面
基吧挖哈哈哈哈哈

### By: solifugus

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12585
- Published: 2014-01-16T13:34:30+08:00

OK，哪天有时间，我提前跟你说哈。

### By: 小虾

- Link: https://yjyj.net/learn/wordpress-learn/4447.html/comment-page-1#comment-12586
- Published: 2014-01-16T14:22:59+08:00

好的 加了个油挖!