wordpress下拉菜单_如何在WordPress中创建下拉菜单（入门指南）

wordpress下拉菜单

Do you want to make a dropdown menu and add it to your WordPress website?

您要创建一个下拉菜单并将其添加到您的WordPress网站吗？

A dropdown menu shows a list of links as you take your mouse over an item on the menu.

当您将鼠标悬停在菜单上的项目上时，下拉菜单显示链接列表。

We use a dropdown menu on WPBeginner, go ahead and take your mouse over the navigation menu on top.

我们使用WPBeginner上的下拉菜单，继续并将鼠标移到顶部的导航菜单上。

In this beginner’s guide, we will show you how to easily create a dropdown menu in WordPress with step by step instructions.

在此初学者指南中，我们将向您展示如何通过分步说明轻松地在WordPress中创建下拉菜单。

为什么要在WordPress中使用下拉菜单？ (Why Use Dropdown Menus in WordPress?)

WordPress comes with a built-in menu management system that allows you to easily add navigation menus to your WordPress site.

WordPress带有内置的菜单管理系统，可让您轻松地将导航菜单添加到WordPress网站。

Navigation menus are links to the main pages of your website that usually appear on the top as a horizontal row right next to the website’s logo.

导航菜单是指向您网站主页的链接，这些链接通常显示在网站徽标旁边的顶部，为水平行。

If you are starting a blog or creating a website with only a few pages, then you can add them in the single row.

如果您要开始写博客或创建只有几个页面的网站 ，则可以将它们添加到单行中。

However, if you run an online store or a large website, then you may want to add more links to the navigation menu.

但是，如果您经营在线商店或大型网站，则可能需要向导航菜单添加更多链接。

Dropdown menus help you solve the limited space issue by showing menu links only when users bring their mouse over to a parent item. They also allow you to organize the menu structure by topics or hierarchy.

下拉菜单仅在用户将鼠标移至父项时才显示菜单链接，从而帮助您解决空间有限的问题。 它们还允许您按主题或层次结构组织菜单结构。

Lastly, they look pretty nice too.

最后，它们看起来也不错。

That being said, now let’s take a look at how you can easily create WordPress dropdown menus add them to your website.

话虽如此，现在让我们来看看如何轻松创建WordPress下拉菜单将其添加到您的网站。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

步骤1.选择具有下拉菜单支持的主题 (Step 1. Choosing a Theme with Dropdown Menu Support)

WordPress comes with a built-in menu management system but displaying those menus is entirely dependent on your WordPress theme.

WordPress带有内置的菜单管理系统，但是显示这些菜单完全取决于您的WordPress主题。

Almost all WordPress themes support dropdown menus by default. However, some themes may not have proper menu support.

默认情况下，几乎所有WordPress主题都支持下拉菜单。 但是，某些主题可能没有适当的菜单支持。

You need to make sure that you are using a WordPress theme that supports dropdown menus.

您需要确保使用支持下拉菜单的WordPress主题。

How do you know if the theme you are using supports the dropdown menu?

您如何知道您使用的主题是否支持下拉菜单？

You can simply visit the theme’s website where you’ll find a link to the theme’s demo. From there you can see if the demo is showing a dropdown menu in the navigation menu.

您只需访问主题的网站，即可在该网站上找到主题演示的链接。 从那里可以看到演示是否在导航菜单中显示了下拉菜单。

If it is not, then you’ll need to find a WordPress theme that does.

如果不是，那么您将需要找到一个WordPress主题。

See our guide on how to choose the perfect WordPress theme for your website.

请参阅我们的指南，了解如何为您的网站选择理想的WordPress主题 。

Here are a few excellent themes that support the dropdown menu out of the box.

以下是一些出色的主题，它们支持开箱即用的下拉菜单。

• Astra – It is a multipurpose WordPress theme that comes with several starter sites and tons of features. Astra –这是一个多用途WordPress主题，带有多个入门站点和大量功能。
• StudioPress themes – Built on top of genesis theme framework, these professional themes are highly optimized for performance.
• StudioPress主题 –基于创世纪主题框架，这些专业主题针对性能进行了高度优化。
• OceanWP – A popular WordPress theme that is suitable for all kind of websites.OceanWP –一种流行的WordPress主题，适用于所有类型的网站。
• Ultra – Powered by Ultra –由Themify builder this drag and drop WordPress theme comes with beautiful templates and flexible theme options.Themify构建器提供支持，此拖放式WordPress主题附带漂亮的模板和灵活的主题选项。
• Divi – popular theme by Elegant Themes that uses the Divi page builder and comes with tons of drag & drop features including dropdown menus.
• Divi –由Elegant Themes流行的主题 ，使用Divi页面构建器，并具有大量的拖放功能，包括下拉菜单。

That being said, now let’s take a look at how to create a dropdown WordPress menu.

话虽如此，现在让我们看一下如何创建一个下拉WordPress菜单。

步骤1.在WordPress中创建导航菜单 (Step 1. Creating a Navigation Menu in WordPress)

If you have already set up a navigation menu on your website, then you can skip to the next step.

如果您已经在网站上设置了导航菜单，则可以跳到下一步。

Let’s create a simple menu first.

首先创建一个简单的菜单。

Go to Appearance » Menus page and click on the ‘Create a new menu’ link at the top.

转到外观»菜单页面，然后单击顶部的“创建新菜单”链接。

Next, you need to provide a name for your navigation menu. This name will not be publicly visible on your website. The purpose of menu name is to help you identify the menu inside the WordPress admin area.

接下来，您需要为导航菜单提供一个名称。 此名称不会在您的网站上公开显示。 菜单名称的目的是帮助您识别WordPress管理区域内的菜单。

Enter a name for your menu and then click on the ‘Create Menu’ button.

输入菜单名称，然后单击“创建菜单”按钮。

WordPress will now create a new empty menu for you.

WordPress现在将为您创建一个新的空白菜单。

Let’s add the top links to the navigation menu. These items will appear in the top row of your menu.

让我们将顶部链接添加到导航菜单。 这些项目将显示在菜单的第一行。

Simply select the pages you want to add from the left column and click on the ‘Add to menu’ button. You can also select blog posts, categories, or add custom links.

只需从左栏中选择要添加的页面，然后单击“添加到菜单”按钮。 您还可以选择博客文章，类别或添加自定义链接。

You will now see those pages appear in the right column under your new menu.

现在，您将看到这些页面出现在新菜单的右列中。

步骤2.将子项添加到菜单 (Step 2. Adding Sub-Items to a Menu)

Sub-items are the items that will appear inside the dropdown menu. Depending on how you want to organize your menus, you can add them under any of the existing items.

子项目是将显示在下拉菜单中的项目。 根据您想要组织菜单的方式，可以将它们添加到任何现有项目下。

For the sake of this tutorial, we will be adding categories under the blog link.

为了本教程的缘故，我们将在博客链接下添加类别。

Simply select the items you want to add from the left column and then click on the ‘Add to menu’ button. Your items will now appear in the right column.

只需从左栏中选择要添加的项目，然后单击“添加到菜单”按钮。 您的项目现在将出现在右列中。

However, these links will appear as regular items. We need to make them a sub-item of a parent menu.

但是，这些链接将显示为常规项目。 我们需要使它们成为父菜单的子项。

You can simply drag and drop a menu item and place it under the parent item. Move it slightly to the right, and it will become a sub-item.

您只需将菜单项拖放到父项下即可。 稍微向右移动它，它将成为一个子项目。

Repeat the process for all links you want to show under the dropdown menu.

对您要在下拉菜单下显示的所有链接重复此过程。

Once you are done, don’t forget to click on the ‘Save menu’ button to store your changes.

完成后，请不要忘记单击“保存菜单”按钮来存储您的更改。

步骤3.发布您的下拉菜单 (Step 3. Publish Your Dropdown Menu)

If you are editing a menu that’s already live on your website, then it will start appearing on your website right away.

如果您正在编辑网站上已经存在的菜单，那么它将立即开始出现在您的网站上。

However, if it is a new menu item, then you now need to choose a theme location to display this menu.

但是，如果它是一个新菜单项，那么您现在需要选择一个主题位置来显示此菜单。

WordPress themes can show menus at different locations. Each theme defines their own menu locations, and you can select which menu you want to display there.

WordPress主题可以在不同位置显示菜单。 每个主题定义了自己的菜单位置，您可以选择要在此处显示的菜单。

You’ll find this option in the right column under ‘Menu settings’. Select an option next to the ‘Display location’ setting and click on the ‘Save menu’ button.

您可以在“菜单设置”下的右列中找到此选项。 选择“显示位置”设置旁边的选项，然后单击“保存菜单”按钮。

You can now visit your website to see your dropdown menu in action.

现在，您可以访问您的网站以查看下拉菜单的运行情况。

创建交互式下拉菜单的提示 (Tips on Creating Interactive Dropdown Menus)

Navigation menus are important because this is the first place your users will look if they want to see specific information.

导航菜单很重要，因为这是用户想要查看特定信息时会首先看到的菜单。

Using them correctly will help your users find their way around your website. It will also help you get more pageviews, conversions, and sales on your website.

正确使用它们将帮助您的用户在您的网站上找到自己的方式。 它还将帮助您在网站上获得更多的浏览量，转化和销售量。

Here are a few tips on making your navigation menus more interactive with dropdown menus.

以下是有关使导航菜单与下拉菜单更具交互性的一些技巧。

1. You can create multi-level dropdown menus

1.您可以创建多级下拉菜单

Making a link a sub-item of another link makes it appear in the dropdown menu. You can also add a sub-item below another sub-item to create multi-level dropdown menus.

将链接设为另一个链接的子项目会使它显示在下拉菜单中。 您也可以在另一个子项目下面添加一个子项目，以创建多级下拉菜单。

Your theme would automatically show them as a sub-menu inside the dropdown.

您的主题会自动将其显示为下拉菜单中的子菜单。

2. You can also create multiple dropdown menus

2.您也可以创建多个下拉菜单

You can create a dropdown under any top link in your menu. You can even add multiple dropdown menus in your main navigation menu.

您可以在菜单中的任何顶部链接下创建一个下拉菜单。 您甚至可以在主导航菜单中添加多个下拉菜单。

3. Create menus with a live preview

3.创建带有实时预览的菜单

If your menu gets too complicated, then you can switch to the visual preview. Go to Appearance » Customize to launch the live theme customizer.

如果菜单过于复杂，则可以切换到视觉预览。 转到外观»定制以启动实时主题定制器。

From there, click on the ‘Menus’ tab and then select your navigation menu. You’ll now see a drag and drop menu editor in the left column with a live preview of your site in the right panel.

从那里，单击“菜单”选项卡，然后选择导航菜单。 现在，您将在左列中看到一个拖放菜单编辑器，并在右面板中看到您站点的实时预览。

4. Creating a large mega menu as dropdown in WordPress

4.在WordPress中创建一个大型大型菜单作为下拉菜单

The dropdown menus only show one dropdown at a time. What if you wanted to show the full structure of your website as a mega menu that only appears when users hover on the main menu?

下拉菜单一次仅显示一个下拉菜单。 如果您想将网站的完整结构显示为仅在用户将鼠标悬停在主菜单上时才显示的大型菜单，该怎么办？

Mega menus do appear as a dropdown menu, but they can show a lot more links, sub-menus, and more. For detailed instructions, see our step by step tutorial on how to create a mega menu in WordPress.

超级菜单确实显示为下拉菜单，但它们可以显示更多链接，子菜单等等。 有关详细说明，请参阅有关如何在WordPress中创建大型菜单的分步教程。

We hope this article helped you learn how to easily create a dropdown menu in WordPress. You may also want to see our guide how to create a sticky floating navigation menu in WordPress and how to add image icons to navigation menus in WordPress.

我们希望本文能帮助您学习如何轻松地在WordPress中创建下拉菜单。 您可能还想看看我们的指南， 该指南如何在WordPress中创建粘性浮动导航菜单以及如何在WordPress中 向导航菜单添加图像图标 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner/wp-tutorials/how-to-create-a-dropdown-menu-in-wordpress-beginners-guide/

wordpress下拉菜单