---
title: "再次折腾,wordpress导航继续研究"
url: "https://yjyj.net/learn/wordpress-learn/4447.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2014-01-15T00:22:26+08:00"
updated_at: "2014-01-15T00:22:26+08:00"
categories: "WordPress 学习"
tags: "php, wordpress导航, WordPress开发, 折腾, 服务器安全"
summary: "这篇实战笔记手把手讲清 WordPress 导航菜单怎么注册、怎么在主题里调用、怎么让当前页高亮，以及如何精简菜单输出的多余 CSS 类。适合刚接触主题开发的人快速上手，少走弯路，直接把导航折腾到能用、好看、还更干净。"
source: "生猛大蝦 (https://yjyj.net)"
---

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

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/wordpress-learn/4447.html) · 作者：小 虾 · 发布时间：2014-01-15

## 30 秒核心看点 (TL;DR)

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

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

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

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

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

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


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

```

## 延伸问答与排错指南 (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 也更省事。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)