WordPress 菜单终极教程：从零开始创建和管理你的网站导航

WordPress 菜单（也称为“导航菜单”）是你网站的骨架，它引导访客找到他们想要的内容，一个清晰、易用的菜单能极大地提升用户体验和网站的专业度。

wordpress菜单教程
（图片来源网络，侵删）

本教程将分为以下几个部分：

  1. 准备工作：了解 WordPress 菜单的基础
  2. 第一步：创建你的第一个菜单
  3. 第二步：向菜单添加项目（链接、页面、文章等）
  4. 第三步：设置菜单样式与层级（下拉菜单、多列等）
  5. 第四步：将菜单应用到网站的不同位置
  6. 高级技巧与常见问题

准备工作：了解 WordPress 菜单的基础

在开始之前,你需要了解几个核心概念：

  • 菜单项目: 你添加到菜单中的单个链接，它可以是一个页面、文章、分类、自定义链接，甚至是其他网站的外部链接。
  • 菜单位置: 这是网站主题中预设好的“插槽”，用于显示菜单。“主导航”、“页脚菜单”、“侧边栏菜单”等，一个主题可以提供多个菜单位置。
  • 主题与菜单: 不同的 WordPress 主题对菜单的支持和显示方式不同，大多数现代主题都支持自定义菜单，并且有多个可用的菜单位置，你可以随时更换主题，但你创建的菜单数据会保留。

第一步：创建你的第一个菜单

  1. 登录你的 WordPress 后台。

  2. 在左侧导航栏中,鼠标悬停在 “外观” 上，然后点击 “菜单”。

    wordpress菜单教程
    （图片来源网络，侵删）

  3. 你会来到“菜单”管理页面，如果这是你第一次创建菜单，页面会是空的，点击 “创建新菜单” 链接。

  4. 输入菜单名称：给你的菜单起一个容易识别的名字，主导航”、“主菜单”或“Header Menu”，这个名字只在你后台使用，不会显示在前端网站上。

  5. 选择菜单位置：在“菜单设置”区域，勾选你希望这个菜单显示的位置，如果你的主题有一个名为“主导航”的位置，就勾选它，你可以稍后再修改这里。

  6. 点击 “创建菜单” 按钮。

你已经成功创建了一个空菜单,可以开始添加项目了！

第二步：向菜单添加项目

在菜单创建页面,左侧是“添加菜单项”区域，右侧是你正在编辑的菜单。

添加页面

这是最常见的方式。

  1. 在左侧,找到 “页面” 部分。
  2. 勾选你想要添加到菜单中的页面旁边的复选框。“首页”、“关于我们”、“服务”等。
  3. 点击 “添加到菜单” 按钮。

这些页面就会出现在右侧的菜单结构中。

添加文章

如果你想将某篇特定的文章添加到菜单中：

  1. 在左侧,找到 “文章” 部分。
  2. 勾选你想要添加的文章。
  3. 点击 “添加到菜单”。

添加分类

如果你想显示一个文章分类的链接（点击后显示该分类下的所有文章）：

  1. 在左侧,找到 “分类目录” 部分。
  2. 勾选你想要添加的分类。
  3. 点击 “添加到菜单”。

添加自定义链接

这非常灵活,可以添加任何外部链接或内部链接。

  1. 在左侧,找到 “自定义链接” 部分。
  2. 在 “URL” 字段中输入你想要链接的地址（https://www.google.com 或 /contact-us/）。
  3. 在 “链接文本” 字段中输入你希望在菜单中显示的文字（“联系我们”、“Google”）。
  4. 点击 “添加到菜单”。

移除菜单项

如果你想从菜单中移除某个项目,只需在右侧的菜单结构中，点击该项目下方的 “移除” 链接即可。

第三步：设置菜单样式与层级

菜单项目已经添加进来了,但它们看起来可能很乱，我们需要对它们进行排序和设置层级。

拖拽排序

  • 在右侧的菜单结构中,将鼠标悬停在你想要移动的菜单项上，按住鼠标左键不放。
  • 将它拖拽到你想要的位置,然后松开鼠标。

创建下拉菜单（子菜单）

下拉菜单是组织相关链接的好方法,可以避免主菜单过长。

  1. 确保父级菜单项（服务”）已经在正确的位置。
  2. 将你想作为其子项的菜单项（网站开发”、“UI/UX设计”）拖拽到父级菜单项的正下方。
  3. 当你看到父级菜单项下方出现一条粗线时，松开鼠标，这个子菜单项就会向右缩进，表示它现在是父级项的子项。

提示：你可以创建多级下拉菜单，只需继续向右缩进即可。

修改菜单项属性

在右侧菜单结构的每个菜单项上,都有一个向下的箭头，点击它可以展开更多设置：

  • 导航标签: 这是菜单项显示的文本，你可以随时修改它。
  • 标题属性: 当访客将鼠标悬停在链接上时，会显示这个文本，这有助于提升SEO和用户体验。
  • 链接目标: 对于外部链接，你可以选择在新标签页中打开（_blank），这样访客就不会离开你的网站。
  • CSS 类: 这是高级功能，允许你为特定菜单项添加自定义CSS样式，从而实现更个性化的设计。

第四步：将菜单应用到网站的不同位置

创建好菜单并设置好样式后,最后一步是让它显示在网站上。

  1. 滚动到页面底部的 “菜单设置” 区域。
  2. 在 “主题位置” 部分，你会看到你的主题提供的所有菜单位置（如“主导航”、“页脚菜单”等）。
  3. 在对应的位置下拉菜单中,选择你刚刚创建的菜单（主导航”）。
  4. 点击 “保存菜单” 按钮。

刷新你的网站首页,就能看到你创建的菜单已经成功显示了！

高级技巧与常见问题

如何创建一个“首页”按钮，并让其他页面在它下面显示？

这是一个非常经典的需求,假设你的首页是一个特殊的页面（比如带滑块的首页），而“关于我们”、“服务”等页面是子页面。

  1. 添加“首页”链接：使用 “自定义链接”，URL 填写 （网站根目录），链接文本填写“首页”。
  2. 添加其他页面：将“关于我们”、“服务”等页面添加到菜单中。
  3. 设置层级：将这些页面拖拽到“首页”的下方，使其成为“首页”的子菜单。
  4. 设置首页显示：进入 “设置” > “阅读”，在“首页显示”部分，选择“您的最新文章”或“一个静态页面”，如果选择静态页面，并指定了你的首页，效果会更好。

这样,访问者点击“首页”会回到主页，而将鼠标悬停在“首页”上，则会看到下拉的子菜单。

我的菜单在手机上显示很乱怎么办？

这是响应式设计的问题,好的主题会自动处理，但如果不行，你可以：

  • 使用 WordPress 插件：像 “Responsive Menu” 或 “Max Mega Menu” 这样的插件可以让你轻松创建移动端专属的汉堡菜单。
  • 检查主题设置：有些主题在“外观”或“主题选项”里有专门的移动菜单设置。

如何创建多列的下拉菜单？

这通常需要一些CSS代码,一些高级主题（如 Astra, GeneratePress）自带了多列菜单功能，如果你的主题不支持，你可以：

  1. 在菜单项的 “CSS 类” 字段中输入一个自定义类名，mega-menu。
  2. 通过 “外观” > “自定义” > “额外CSS”，添加一些自定义CSS来控制这个类的样式，例如设置 display: grid; grid-template-columns: repeat(3, 1fr); 等，这需要一些CSS知识。

我想给不同的页面显示不同的菜单怎么办？

WordPress 默认是全局菜单，但你可以通过 “页面模板” 来实现。

  1. 在你的主题文件夹中,创建一个自定义的页面模板（page-menu-template.php）。
  2. 在这个模板文件中,调用特定的菜单，代码通常像这样：wp_nav_menu( array( 'theme_location' => 'footer-menu' ) );。
  3. 在后台编辑某个页面时,在“页面属性”框中，选择这个自定义模板。
  4. 这样,应用了这个模板的页面就会显示你指定的菜单。

恭喜你！现在你已经完全掌握了 WordPress 菜单的创建和管理。

核心流程回顾：

  1. 进入后台：外观 -> 菜单。
  2. 创建菜单：输入名称，选择位置，点击“创建菜单”。
  3. 添加项目：从左侧选择页面、文章、分类或自定义链接，点击“添加到菜单”。
  4. 排序与设置：通过拖拽调整顺序，通过缩进创建下拉菜单。
  5. 应用并保存：在“主题位置”中选择你的菜单，并点击“保存菜单”。

菜单是网站的向导,花时间设计一个清晰、直观的菜单，对你的网站成功至关重要，大胆尝试，多操作几次，你很快就能成为 WordPress 菜单管理专家！