如何在WordPress 3.0中使用新的自定义菜单功能

One of the most hailed features of the recent WordPress 3.0 release is the addition of customizable menus. Previously, users had to rely on their theme (or hack it) to provide them with a navigation menu for their site, but now they can edit site menus from the WordPress dashboard.

最近的WordPress 3.0版本最受赞誉的功能之一就是添加了可自定义的菜单。 以前，用户必须依靠主题(或修改主题)为他们的网站提供导航菜单，但是现在，他们可以从WordPress仪表板编辑网站菜单。

I’ll first show you how this functionality works in the default new WordPress theme, Twenty Ten; then, I’ll show you a few different ways you can use it in your own themes.

我将首先向您展示此功能如何在默认的新WordPress主题“二十”中工作。 然后，我将向您展示几种在您自己的主题中使用它的方式。

I’ll assume you have a WordPress 3.0 installation up and running. Let’s start by having a look at the new Menus interface. Click on Menus in the Appearance panel of your WordPress Dashboard, and you’ll be presented with an interface for creating your first menu:

我假设您已经安装并运行了WordPress 3.0。 让我们先来看一下新的菜单界面。 单击WordPress仪表板的外观面板中的菜单，将为您提供创建第一个菜单的界面：

Add a new menu

添加一个新菜单

Once you’ve added a menu, the interface on the left-hand side of the page becomes activated: you can now add categories or pages to your menu, as well as any other external or internal links you’d like. You’ll also see a box telling you that your theme supports a menu, and asking you to assign a menu to the Primary Navigation:

添加菜单后，页面左侧的界面将被激活：您现在可以向菜单添加类别或页面，以及您想要的任何其他外部或内部链接。 您还将看到一个框，告诉您您的主题支持菜单，并要求您将菜单分配给主导航：

The Twenty Ten theme’s Primary Navigation

二十一主题的主要导航

What’s this Primary Navigation? It’s the primary menu displayed just below the header image of the Twenty Ten theme. Why, you ask, were there already elements in that menu before you created and assigned your custom menu? Good question.

这是什么主要导航？ 它是显示在“二十十”主题标题图像下方的主菜单。 您问，为什么在创建和分配自定义菜单之前该菜单中已经有元素？ 好问题。

WordPress 3.0’s new menu functionality rests on the wp_nav_menu function, and it’s a clever one. If the user hasn’t defined any menus, wp_nav_menu will fall back on the standard wp_page_menu, which displays a list of the site’s pages. That’s what you’ve been seeing up to now. But if you select your new menu from the drop-down menu below the Primary Navigation and click Save, your custom menu will replace the default page listing.

WordPress 3.0的新菜单功能基于wp_nav_menu函数，这是一个聪明的选择。 如果用户尚未定义任何菜单，则wp_nav_menu将退回到标准的wp_page_menu ，该菜单显示站点页面的列表。 这就是您到目前为止所看到的。 但是，如果您从“主导航”下方的下拉菜单中选择新菜单，然后单击“保存”，则您的自定义菜单将替换默认页面列表。

So, now you know how the new menu functionality works, but how do you make use of it in your theme? Well, the simplest way is to call wp_nav_menu where you’d like a custom menu to appear. Much like post thumbnails and widgetized areas, your menu will first need to be “registered” with WordPress, though. Let’s have a look at how Twenty Ten does all this. First, in header.php, we find the call to wp_nav_menu:

因此，现在您知道了新菜单功能的工作原理，但是如何在主题中使用它呢？ 好吧，最简单的方法是在您希望显示自定义菜单的地方调用wp_nav_menu 。 就像发布缩略图和小部件区域一样，您的菜单首先需要在WordPress中“注册”。 让我们看看二十十是如何做到的。 首先，在header.php ，我们找到对wp_nav_menu的调用：

< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

That’s a little more complicated than a simple call, but not by much: container_class simply specifies the class attribute of the div that will wrap the menu, and theme_location tells WordPress which of the registered menus we want to use.

这比简单的调用要复杂一点，但是并没有太多： container_class只是指定将包装菜单的div的class属性，而theme_location告诉WordPress我们要使用哪个已注册菜单。

To work out where the menus are registered, we need to travel to functions.php, where we find a call to the aptly-named register_nav_menus function:

为了弄清楚菜单的注册位置，我们需要转到functions.php ，在这里找到对适当命名的register_nav_menus函数的调用：

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
	'primary' => __( 'Primary Navigation', 'twentyten' ),
) );

The 'primary' key used here corresponds to the primary location specified in the wp_nav_menus call. Let’s break this down. We’re telling WordPress that our theme will have one menu location, called primary, and will be displayed to the user as the Primary Navigation. Then, in the header, we call wp_nav_menu, asking it for whatever the user has assigned to the primary location. Pretty simple.

此处使用的'primary'键对应于wp_nav_menus调用中指定的primary位置。 让我们分解一下。 我们告诉WordPress，我们的主题将有一个菜单位置，称为primary ，并将作为主要导航显示给用户。 然后，在标题中，我们调用wp_nav_menu ，询问其用户分配给主要位置的内容。 很简单

Now what if you wanted to add a secondary menu to your WordPress theme? Let’s do that. Start by making a copy of the Twenty Ten theme and editing the theme info in style.css to give it your own name. Then we’ll change that section in functions.php to register an extra menu:

现在，如果您想向WordPress主题添加辅助菜单怎么办？ 来做吧。 首先制作二十一个主题的副本，然后在style.css编辑主题信息以为其命名。 然后，我们将在functions.php更改该部分以注册一个额外的菜单：

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
  'primary' => __( 'Primary Navigation', 'twentyten' ),
  'secondary' => __('Secondary Navigation', 'twentyten')
) );

Then, wherever you’d like the secondary menu to appear in your theme, simply plop in the following:

然后，无论您想在主题中出现辅助菜单的任何位置，只需将以下内容放进去：

< ?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>

And you’re done. If you load up the Menus interface in the Dashboard, you’ll now see another drop-down menu that allows you to select a second menu:

这样就完成了。 如果您在仪表板中加载“菜单”界面，现在将看到另一个下拉菜单，可让您选择第二个菜单：

Our secondary menu

我们的二级菜单

从这里到哪里？ (Where to from Here?)

Of course, there’s a lot more to wp_nav_menu and the new menu functionality than I’ve just covered. As always, your first stop on the path to WordPress enlightenment is the Codex: as you’ll quickly see, wp_nav_menu has a sizeable array of options to choose from. And, of course, don’t forget the time-tested technique of every web developer coming to grips with a new toy: experimentation!

当然， wp_nav_menu和新菜单功能比我刚刚介绍的要多得多。 与往常一样，您对WordPress启蒙之路的第一站就是Codex ：正如您很快就会看到的， wp_nav_menu有很多选项供您选择。 而且，当然，不要忘记每个Web开发人员都经过时间考验的技巧来尝试一个新玩具：实验！

翻译自: https://www.sitepoint.com/how-to-use-the-new-custom-menu-feature-in-wordpress-3-0/