您是否正在寻找使用 WordPress 导航菜单的最佳教程？ WordPress 导航菜单允许您轻松自定义和管理网站上的菜单。在本文中，我们将向您展示掌握 WordPress 导航菜单的最佳教程。
您是否正在寻找使用 WordPress 导航菜单的最佳教程？ WordPress 导航菜单允许您轻松自定义和管理网站上的菜单。在本文中，我们将向您展示掌握 WordPress 导航菜单的最佳教程。
由于这是一篇很长的文章，我们添加了一个内容列表以便于导航。
由于这是一篇很长的文章，我们添加了目录列表以简化导航。
- WordPress 导航菜单入门WordPress 导航菜单入门
- 将社交媒体图标添加到 WordPress 菜单将社交媒体图标添加到 WordPress 菜单
- 在 WordPress 中向登录用户显示不同的菜单显示不同的菜单来登录 WordPress 用户
- 将条件逻辑添加到导航菜单向导航菜单添加条件逻辑
- 设计 WordPress 导航菜单WordPress 导航菜单样式
- 在 WordPress 中添加带有导航菜单的图像图标在 WordPress 中添加带有导航菜单的图像图标
- 在 WordPress 中添加自定义导航菜单在 WordPress 中添加自定义导航菜单
- 在 WordPress 主题中添加滑动面板菜单在 WordPress 主题中添加幻灯片面板菜单
- 创建移动就绪响应式 WordPress 菜单创建适合移动设备的响应式 WordPress 菜单
- 在 WordPress 中添加全屏响应式菜单在 WordPress 中添加全屏响应菜单
- 在 WordPress 中添加带有导航菜单的描述在 WordPress 中使用导航菜单添加描述
- 如何在 WordPress 导航菜单中添加主题如何将主题添加到 WordPress 导航菜单
- 如何在 WordPress 侧边栏添加导航菜单如何向 WordPress 侧边栏添加导航菜单
- 在帖子和页面中添加 WordPress 导航菜单将 WordPress 导航菜单添加到帖子和页面
- 在 WordPress 导航菜单中添加 NoFollow 链接在 WordPress 导航菜单中添加 NoFollow 链接
1. WordPress导航菜单入门 （1. Getting Started with WordPress Navigation Menus）
在网页设计中，导航菜单是一个链接列表，允许网站访问者访问网站上的不同页面和部分。它可以帮助用户在您的网站上导航，因此得名导航菜单。
在网页设计中，导航菜单是一个链接列表，允许网站访问者访问网站上的不同页面和部分。它可以帮助用户导航您的网站，以便可以使用名称导航菜单。
WordPress comes with a built in tool that allows you to create and use menus on your website. This tool is located at 外观 » 菜单 page in your WordPress 管理区.
WordPress带有内置工具，可让您在网站上创建和使用菜单。 该工具位于WordPress 管理区中的外观 » 菜单页面。
在这里，您可以通过将左侧列中的项目添加到右侧来创建菜单。您可以将任何 WordPress 帖子、页面、类别和自定义链接添加到菜单中。
在这里，您可以通过向左侧边栏添加项目来创建菜单。您可以将任何 WordPress 帖子、页面、类别和自定义链接添加到菜单。
For detailed instructions see our beginner’s guide on 如何在 WordPress 中添加导航菜单.
有关详细说明，请参阅有关如何在 WordPress 中添加导航菜单初学者指南。
2.将社交媒体图标添加到WordPress菜单 （2. Add Social Media Icons to WordPress Menus）
WordPress 菜单还可用于向您的网站添加社交媒体按钮。这使您可以轻松更新图标、重新排列它们，并在需要时添加新的社交媒体图标。
WordPress 菜单还可用于向您的网站添加社交媒体按钮。这使您可以轻松更新图标、重新排列它们并根据需要添加新的社交媒体图标。
The easiest way to do this is by using the 菜单社交图标 plugin. For more details, see our step by step guide on 如何安装 WordPress 插件.
最简单的方法是使用“ 菜单社交图标”插件。 有关更多详细信息，请参阅有关如何安装 WordPress 插件步指南。
Upon activation, head over to 外观 » 菜单 page. Create a new social menu and then on custom links tab from left column.
激活后，转到外观 » 菜单页面。 创建一个新的社交菜单，然后在左列的“自定义链接”选项卡上。
您将在链接文本和 URL 字段下方看到社交媒体图标。您所需要做的就是单击社交媒体图标并输入您的社交个人资料 URL。完成后，单击“添加到菜单”按钮。
您将在链接文本和 URL 字段下方看到社交媒体图标。您所需要做的就是单击社交媒体图标并输入您的社交个人资料 URL。完成后，单击“添加到菜单”按钮。
对您要添加的所有社交媒体配置文件重复此过程。完成后，选择菜单位置，然后单击“保存菜单”按钮。
对您要添加的所有社交媒体配置文件重复此过程。完成后，选择菜单位置并单击“保存菜单”按钮。
For more detailed instructions see our guide on 如何将社交媒体图标添加到 WordPress 菜单.
有关更详细的说明，请参阅有关如何将社交媒体图标添加到 WordPress 菜单的指南 。
3.显示不同的菜单以登录WordPress用户 （3. Show Different Menus to Logged In Users in WordPress）
If you run a WordPress 会员网站, then you may want to show different menus to your logged in users. Here is how you can easily achieve this.
如果您运行WordPress 会员网站 ，则可能要向登录的用户显示不同的菜单。 这是您可以轻松实现的方法。
首先您需要创建两个不同的菜单。一种用于已登录的用户，另一种用于未登录的用户。您可以将这些菜单命名为“登录”和“注销”。
首先，您需要创建两个不同的菜单。一种适用于已登录的用户，另一种适用于未登录的用户。您可以将这些菜单命名为“登录”和“注销”。
Next, you need to add this code to your theme’s 函数.php file or a 特定于站点的插件.
接下来，您需要将此代码添加到主题的函数.php文件或具体的于在网站的插件中 。
function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
就这样。您现在可以测试实际的导航菜单。
就这样。现在您可以测试导航菜单的实际效果。
For more detailed instructions see our tutorial on how to 在 WordPress 中向登录用户显示不同的菜单.
有关更详细的说明，请参见我们的教程，该教程如何显示不同的菜单以使用 WordPress 登录用户 。
4.将条件逻辑添加到导航菜单 （4. Add Conditional Logic to Navigation Menus）
想根据特定条件更改菜单吗？就像主页上的不同菜单，或者隐藏单个帖子上的项目。以下是如何在 WordPress 中实现这一目标的方法。
想根据具体情况更改菜单吗？就像主页上的其他菜单一样，或者隐藏单个帖子上的项目。这是在 WordPress 中实现它的方法。
First you need to install and activate the 如果菜单 plugin.
首先，您需要安装并激活如果菜单插件。
Upon activation, visit 外观 » 菜单 screen and click on a menu item that you want to edit. You will notice a new option to ‘Enable conditional logic’.
激活后，访问“ 外观»菜单屏幕，然后单击要编辑的菜单项。 您会注意到“启用条件逻辑”的新选项。
选中此选项将显示两个下拉选项。如果菜单符合特定条件，您可以选择显示或隐藏菜单。例如，如果用户是管理员，则隐藏菜单项；或者仅当用户查看单个帖子时才显示菜单项。
选中此选项将显示两个下拉选项。如果菜单满足特定条件，您可以选择显示或隐藏菜单。例如，如果用户是管理员，则隐藏菜单项，或者仅当用户发表单个帖子时才显示菜单项。
For more detailed instructions see our article on 如何向 WordPress 菜单添加条件逻辑.
有关更详细的说明，请参阅有关如何向 WordPress 菜单添加条件逻辑文章。
5.设置WordPress导航菜单的样式 （5. Styling WordPress Navigation Menus）
您的 WordPress 主题控制网站上导航菜单的外观。使用 CSS，您可以自定义导航菜单的外观。
WordPress 主题控制网站上导航菜单的外观。导航菜单的外观可以使用 CSS 进行自定义。
The easiest way to do this is by using the CSS 英雄 plugin. It is a premium WordPress plugin that allows you to customize any WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS 英雄评论 to learn more.
最简单的方法是使用CSS 英雄插件。 这是一个高级WordPress插件，可让您自定义任何WordPress主题，而无需编写任何代码(无需HTML或CSS)。 请参阅我们的CSS 英雄评论以了解更多信息。
You can also style your navigation menus by manually writing CSS. For detailed instructions, see our guide on 如何设计 WordPress 导航菜单的样式.
您还可以通过手动编写CSS来设置导航菜单的样式。 有关详细说明，请参阅有关如何设计 WordPress 导航菜单的样式指南。
6.在WordPress中添加带有导航菜单的图像图标 （6. Add Image Icons with Navigation Menus in WordPress）
许多流行的网站在导航菜单旁边使用图像图标以使其更加引人注目。以下是如何在 WordPress 中添加带有导航菜单的图像图标。
许多流行网站在导航菜单旁边使用图像图标，使其更加引人注目。以下是如何使用 WordPress 中的导航菜单添加图像图标。
First, you need to install and activate the 菜单图片 plugin. Upon activation, go to Appearance » Menus. There you will see an option to add images with each item in your existing menu.
首先，您需要安装并激活菜单图片插件。 激活后，转到外观»菜单。 在那里，您将看到一个在现有菜单中为每个项目添加图像的选项。
You can also use CSS to add image icons. For detailed instructions, see our guide on how to 在 WordPress 中添加带有导航菜单的图像图标.
您还可以使用CSS添加图像图标。 有关详细说明，请参阅有关如何在 WordPress 中使用导航菜单添加图像图标指南。
7.在WordPress中添加自定义导航菜单 （7. Add Custom Navigation Menus in WordPress）
Most 免费和高级 WordPress 主题 come with pre-defined locations to display your navigation menus. However, you can also add custom navigation menus to your themes.
大多数免费和高级 WordPress 主题都带有预定义的位置，以显示您的导航菜单。 但是，您也可以将自定义导航菜单添加到主题。
First you will need to register your new navigation menu by adding this code to your theme’s 函数.php file.
首先，您需要通过将此代码添加到主题的函数.php文件中来注册新的导航菜单。
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
This code will create ‘My Custom Menu’ for your theme. You can see this by editing a menu on 外观 » 菜单 page.
此代码将为您的主题创建“我的自定义菜单”。 您可以通过在外观 » 菜单页面上编辑菜单来查看此内容。
要显示自定义菜单，您需要将此代码添加到要显示菜单的主题中。
要显示自定义菜单，您需要将此代码添加到要显示菜单的主题中。
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
For more detailed instructions, see our article on 如何在 WordPress 主题中添加自定义导航菜单.
有关更多详细说明，请参阅有关如何在 WordPress 主题中添加自定义导航菜单文章。
8.在WordPress主题中添加幻灯片面板菜单 （8. Add Slide Panel Menu in WordPress Themes）
想要将您网站的导航菜单显示为滑入式面板吗？使用滑入式面板可以让您的菜单更具互动性、更少干扰且更有趣，特别是在移动设备上。
想要将网站的导航菜单显示为滑入式面板吗？在面板中使用幻灯片可以使您的菜单更具交互性、更少分散注意力并且更有趣，尤其是在移动设备上。
但是，为了添加它们，您需要对 JavaScript、WordPress 主题和 CSS 有中等程度的了解。
但是，要添加它们，您需要具备中级 JavaScript、WordPress 主题和 CSS 知识。
For step by step instructions, see our guide on how to add a WordPress 主题中的滑动面板菜单.
有关逐步说明，请参阅有关如何在 WordPress 主题中添加滑动面板菜单指南。
9.创建移动就绪响应式WordPress菜单 （9. Creating a Mobile Ready Responsive WordPress Menu）
大多数 WordPress 主题都是响应式的，并带有适合移动设备的导航菜单。但是，如果您的主题不能很好地处理移动设备上的导航菜单，则会影响移动设备上的用户体验。
大多数 WordPress 主题都是响应式的，并带有适合移动设备的导航菜单。但是，如果您的主题不能很好地处理移动设备上的导航菜单，则会影响移动设备上的用户体验。
幸运的是，有一些简单的方法可以让您添加移动就绪的响应式菜单，而无需编写任何代码。
幸运的是，有一些简单的方法可以添加适合移动设备的响应式菜单，而无需编写任何代码。
First, you need to install and activate the 响应式菜单 plugin.
首先，您需要安装并激活“ “回复菜单”插件。
激活后，您需要单击 WordPress 管理栏中的“响应式菜单”来配置插件设置。
激活后，您需要单击 WordPress 管理栏中的“响应式菜单”来配置插件设置。
只需选择一个宽度，之后移动响应菜单就应该可见。之后，您需要选择现有的导航菜单。
只需选择一个宽度，之后就会出现移动响应菜单。之后，您需要选择现有的导航菜单。
不要忘记单击“更新选项”按钮来存储您的设置。这就是您现在可以访问您的网站并调整浏览器屏幕大小以查看移动响应菜单的全部内容。
不要忘记单击“更新选项”按钮来存储您的设置。这就是您现在可以访问您的网站并调整浏览器屏幕大小以查看移动响应菜单的全部内容。
There are many other ways to add a mobile responsive menu. Like a menu that appears with a toggle effect, a slide in menu, and responsive select menu. Learn more about all of them in our guide on how to 创建适合移动设备的响应式 WordPress 菜单.
还有许多其他方法可以添加移动响应菜单。 就像出现带有切换效果的菜单，菜单中的幻灯片和响应式选择菜单一样。 在我们的指南中详细了解所有这些内容，以了解如何创建适合移动设备的响应式 WordPress 菜单 。
10.在WordPress中添加全屏响应菜单 （10. Add a Fullscreen Responsive Menu in WordPress）
您是否注意到一些流行网站如何使用全屏导航菜单？通常它需要对 JavaScript 和 CSS 进行一些创造性的使用。幸运的是，您可以在 WordPress 中执行此操作，而无需编写任何代码。
您是否注意到一些流行网站如何使用全屏导航菜单？通常，它需要创造性地使用 JavaScript 和 CSS。幸运的是，您可以在 WordPress 中执行此操作，而无需编写任何代码。
First, you need to install and activate the DC – 全屏响应式菜单. Upon activation, you need to visit 外观 » DC 全屏菜单 page to configure the plugin settings.
首先，您需要安装并激活DC – 全屏响应式菜单 。 激活后，您需要访问外观»DC全屏菜单页面来配置插件设置。
Here you can choose a menu, background and text color, and 谷歌字体 for your fullscreen menu.
在这里，您可以为全屏菜单选择菜单，背景和文本颜色以及谷歌字体 。
单击提交按钮以存储您的设置。您现在可以访问您的网站以查看正在运行的全屏响应菜单。
单击“提交”按钮来存储您的设置。您现在可以访问您的网站以查看正在运行的全屏响应菜单。
For more on this topic, see our guide on how to 在 WordPress 中添加全屏响应菜单.
有关此主题的更多信息，请参见有关如何在 WordPress 中添加全屏响应菜单指南。
11.在WordPress中通过导航菜单添加描述 （11. Adding Description with Navigation Menus in WordPress）
WordPress 导航菜单通常只是显示链接标签或锚文本的文本链接。如果您想为导航菜单中的每个项目添加一些描述或标签行怎么办？
WordPress 导航菜单通常只是显示链接标签或锚文本的文本链接。如果您想为导航菜单中的每个项目添加一些描述或标签行怎么办？
幸运的是，WordPress 具有内置功能，可以为导航菜单中的每个项目添加描述。
幸运的是，WordPress 带有一个内置功能，可以为导航菜单中的每个项目添加描述。
First, you will need to enable the descriptions item. Click on the 屏幕选项 button at the top right corner of the screen.
首先，您将需要启用描述项。 单击屏幕右上角的“屏幕选项”按钮。
这将显示您可以启用的框和选项的列表。您需要选中描述旁边的框。
这将显示您可以启用的框和选项的列表。您需要选中描述旁边的框。
现在向下滚动并单击菜单项进行编辑，您将看到一个添加描述的选项。
现在向下滚动并单击菜单项“编辑”，您将看到一个添加描述的选项。
添加您的描述并单击保存菜单按钮。
添加您的描述并单击“保存”菜单按钮。
如果您的主题支持菜单描述，那么您将能够立即看到它们。否则，您将必须编辑主题文件才能显示说明。
如果您的主题支持菜单描述，您将能够立即看到它们。否则，您将必须编辑主题文件才能显示说明。
For detailed instructions, see our guide on 如何在 WordPress 主题中添加菜单描述.
有关详细说明，请参阅有关如何在WordPress主题中添加菜单描述指南。
12.如何在WordPress导航菜单中添加主题 （12. How to Add Topics in WordPress Navigation Menus）
我们经常被问到如何将博客主题添加到 WordPress 的导航菜单中。许多初学者认为他们需要为每个主题创建页面才能将它们添加到菜单中。
我们经常被问到如何将博客主题添加到 WordPress 的导航菜单中。许多初学者认为他们需要为每个主题创建一个页面才能将其添加到菜单中。
What you actually need is categories. 类别和标签 are built in WordPress taxonomies which allow you to sort content into relevant topics.
您真正需要的是类别。 类别和标签内置于WordPress分类法中，可让您将内容分类为相关主题。
Add your articles into relevant categories and then head over to 外观 » 菜单 page. Click on the categories tab to expand it and then select the categories that you want to display in your navigation menus.
将您的文章添加到相关类别中，然后转到外观 » 菜单页面。 单击类别选项卡以将其展开，然后选择要在导航菜单中显示的类别。
For more details, see our article on how to 在 WordPress 导航菜单中添加主题.
有关更多详细信息，请参阅有关如何将主题添加到 WordPress 导航菜单文章。
13.如何在WordPress边栏中添加导航菜单 （13. How to Add Navigation Menus in WordPress Sidebar）
WordPress 主题通常在顶部或底部有导航菜单。但是，您也可以创建菜单并将其添加到 WordPress 侧边栏中。
WordPress 主题通常在顶部或底部有导航菜单。但是，您也可以在 WordPress 侧边栏中创建菜单并将菜单添加到 WordPress 侧边栏。
Simply visit 外观 » 小部件 page and add ‘Custom Menu’ widget to your sidebar. For detailed instructions, see our guide on 如何在 WordPress 中添加和使用小部件.
只需访问外观 » 小部件页面，然后将“自定义菜单”小部件添加到侧边栏中。 有关详细说明，请参阅有关如何在 WordPress 中添加和使用小部件指南。
将小部件添加到侧边栏后，您可以从下拉选项中选择一个菜单。不要忘记单击“保存”按钮来存储您的设置。
将小部件添加到侧边栏后，您可以从下拉选项中选择一个菜单。不要忘记单击“保存”按钮来存储您的设置。
14.在帖子和页面中添加WordPress导航菜单 （14. Add WordPress Navigation Menu in Posts and Pages）
通常导航菜单显示在网站的标题或侧栏中。但是，有时您可能想在 WordPress 帖子或页面中添加菜单。以下是您将如何做到这一点。
通常，导航菜单出现在网站的标题或侧栏中。但是，有时您可能想在 WordPress 帖子或页面中添加菜单。这就是您想要做的。
First, you need to install and activate the 菜单简码 plugin. Upon activation, edit the post or page where you want to display your menu and add this 短代码:
首先，您需要安装并激活菜单简码插件。 激活后，编辑要显示菜单的帖子或页面，并添加以下短代码 ：
[listmenu menu="Your Menu Name"]
[listmenu menu="Your Menu Name"]
不要忘记将“您的菜单名称”替换为您自己的导航菜单的名称。保存或发布您的帖子，然后单击预览按钮。
不要忘记将“您的菜单名称”替换为您自己的导航菜单的名称。保存或发布您的帖子，然后单击“预览”按钮。
For more details, see our guide on how to 在帖子或页面中添加 WordPress 导航菜单.
有关更多详细信息，请参阅有关如何将 WordPress 导航菜单添加到您的帖子或页面指南。
15.在WordPress导航菜单中添加NoFollow链接 （15. Add NoFollow Links in WordPress Navigation Menus）
通常，您网站的导航菜单包含指向您自己的帖子和页面的链接。但是，有时您可能需要添加指向外部站点的链接。
通常，您网站的导航菜单包含指向您自己的帖子和页面的链接。但是，有时您可能想要添加到外部站点的链接。
许多SEO专家建议在外部链接中添加rel=”nofollow”属性。以下是如何向 WordPress 导航菜单中的链接添加 nofollow 属性。
许多 SEO 专家建议在外部链接中添加 rel="nofollow" 属性。以下是如何将 nofollow 属性添加到 WordPress 导航菜单中的链接。
First, you need to visit 外观 » 菜单 page and then click on Screen Options button at the top right corner of the screen.
首先，您需要访问外观 » 菜单页面，然后单击屏幕右上角的屏幕选项按钮。
这将打开一个菜单，您需要在其中选中链接关系 (XFN) 和链接目标选项旁边的框。
这将打开一个菜单，您需要在其中选中链接关系 (XFN) 和链接目标选项旁边的框。
现在单击您要编辑的菜单项。您会注意到两个新选项：“链接关系”和“在新窗口/选项卡中打开链接”。
现在单击您要编辑的菜单项。您会注意到新窗口/选项卡中的两个新选项：链接关系和打开链接。
You need to enter nofollow in the link relationship option. You can also check the open link in new window/tab option if you want.
您需要在链接关系选项中输入nofollow 。 如果需要，您还可以检查在新窗口/选项卡中的打开链接选项。
单击“保存”菜单按钮来存储您的更改。现在，您的 WordPress 导航菜单中的这个特定链接将添加 rel=”nofollow” 属性。
单击“保存”菜单按钮来存储您的更改。现在，您的 WordPress 导航菜单中的这个特定链接将添加 rel="nofollow" 属性。
For more detailed instructions, see our tutorial on how to 在 WordPress 导航菜单中添加 nofollow 链接.
有关更多详细说明，请参阅有关如何在 WordPress 导航菜单中添加 nofollow 链接教程。
We hope this article helped find the best tutorials to master WordPress navigation menus. You may also want to see our list of 24个商业网站必备的WordPress插件.
我们希望本文能帮助您找到掌握WordPress导航菜单的最佳教程。 您可能还希望查看我们的24列表， 这些列表商业网站必须有 WordPress 插件 。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/showcase/best-tutorials-to-master-wordpress-navigation-menus/