为你的主题创建WordPress导航

WordPress中的菜单是一个强大的工具. 他们让用户从他们的WordPress帖子数据中快速创建导航菜单. 对于那些刚刚进入主题开发的人来说，它们也是一个常见的障碍.

如果你习惯于用HTML来开发菜单，你可能会像这样构建你的菜单标记:

 class="nav-wrapper">
     id="site-navigation">
         class="menu-item"> href="/">Home
         class="menu-item"> href="/about.html">About
         class="menu-item"> href="/contact.html">Contact
    

When converting that markup to a WordPress theme, 我经常看到开发人员使用像get_permalink()这样的函数来为每个链接设置href属性.

That works, 但是它把你的用户锁定在导航栏上，没有利用WordPress强大的菜单编辑功能. 如果他们决定在WordPress中创建一个新的About Us页面，那么使用旧页面ID的get_permalink()调用就不起作用了.

That’s no fun for anyone.

我还想知道您是否听说过我们新的订阅服务 ONE. If no, keep reading! 一个是一个很好的机会，节省您的钱，并从Templateog体育首页获得更多的产品. Do you know why? 因为ONE可以给你一个机会，从ONE包下载任何项目，没有任何限制，只要19美元一个月. 这项服务的主要优点是有机会拥有很多主题, plugins, 模板和使用它们的机会, 然后为一个网站选择最好的. 由于WP现在是非常酷和流行的主题，我建议你看看我们现在有什么 WordPress themes in the pack. 如果你是一个博客读者，你可以获得5%的折扣使用促销码 BecomeThe1.

Doing menus the WordPress Way(TM)

在WordPress中显示导航菜单的正确方法是使用wp_nav_menu()函数.

Calling this function with a registered menu 输出导航的所有标记. Plus, it will add classes for current pages and the ancestors of current pages all based off what a user enters in the Appearance > Menus settings screen.

你可能已经注意到了这个关于注册菜单的小提示和想法, “Yeah but how do I register a menu?” You’ve got a keen eye. Was it the link that gave it away?

Registering a Menu Location

在开始将菜单输出到WordPress主题之前, 您需要为导航注册菜单位置. WordPress提供了两个函数来处理这个问题, Register_nav_menus()和register_nav_menu(). 主要区别在于前者允许您使用数组注册多个菜单. We’ll use that one.

假设我们想要创建一个新的菜单位置，用于主站点导航. 首先，我们需要将一个自定义函数挂钩到WordPress的init动作中. 我们可以使用下面的代码 functions.php file:

Add_action ('init'， 'theme_prefix_register_menus');

现在我们需要创建theme_prefix_register_menus()函数.

函数theme_prefix_register_menus() {
    register_nav_menus(
        array(
            'primary_menu' => __( 'Primary Menu', 'theme_prefix' ),
        )
    );
}

Note: 将“theme_prefix”替换为主题特有的字符串. 您应该在主题内注册的所有函数上这样做以保持一致性.

Great! Now your full code in your functions.php file should look like this:

函数theme_prefix_register_menus() {
register_nav_menus(
array(
'primary_menu' => __( 'Primary Menu', 'theme_prefix' ),
)
);
}
Add_action ('init'， 'theme_prefix_register_menus');

Now when editing menus in your Appearance > Menus 在仪表板的编辑屏幕上，您将看到一个复选框，用于将该菜单设置为您的 Primary Menu location.

在WordPress主题上显示菜单

好的，现在我们已经注册了一个菜单，我们想要在我们的主题上显示它.

为此，我们只需要使用wp_nav_menu()函数，并将theme_location参数设置为primary_menu.

wp_nav_menu( array ( 'theme_location' => 'primary_menu ) );

That’s it. 有了这个调用，我们的主题现在将菜单集显示到菜单编辑屏幕中的主菜单位置. If the user doesn’t set one, 上面的函数会回退到使用wp_page_menu()，它会显示所有页面的列表.

这可能不是你想要的退路, 但是我们可以通过添加传递给wp_nav_menu参数数组的参数来控制这一点以及其他一些有用的特性. Let’s go through a few useful ones.

menu_id - Set the ID to be used on the menu

element. This defaults to the menu slug. primary_menu in our example.

container - Setting this allows you to wrap the

in a specific element. This defaults to
.
container_class -这允许你设置一个类应用到你的容器元素. For example, if we wanted to wrap our nav in
we’d set this to nav-wrapper.
fallback_cb -如果菜单不存在，将触发一个函数. 默认情况下，使用wp_page_menu显示所有页面. 如果你不想返回任何东西，你可以把它设为false. 或者，您可以将wp_nav_menu调用包装在一个has_nav_menu条件语句中.
For a full list check out the Codex for wp_nav_menu.
那么，让我们把所有这些放在一起，并为原始HTML菜单生成标记.
wp_nav_menu( array(
'theme_location' => 'primary_menu',
'menu_id' => 'site-navigation',
'container' => 'nav',
'container_class' => 'nav-wrapper',
'fallback_cb' => false
) );
现在我们应该得到像原始HTML菜单一样的HTML标记.
---
Styling your WordPress Menu
现在你已经得到了WordPress菜单的标记输出，你需要对它进行样式化.
链接、活动状态、悬停和焦点. Oh, my!
使用WordPress内置菜单功能的一个美妙之处在于，它为你的菜单项应用了各种各样的类，用来跟踪哪些菜单项是活动的，哪些菜单项有活动的子菜单项. 这些可以用来调整项目的样式，向用户显示他们在网站上的位置.
这里有一些更有用的项目来确定用户当前在网站上的位置.
.current-menu-item -该类被添加到与当前显示的页面相对应的菜单项中.
.current-menu-parent -这个类应用于当前呈现页面的层次化父级. For example, 如果你的“关于”页有“og体育”的子页, 那么当你在“og体育”页面时，你的“og体育”菜单项就会有这个类 .当前菜单项和“关于”菜单项将具有 .current-menu-parent.
.current-menu-ancestor - This class works similar to .当前菜单父元素，除非它在页面层次结构中向上移动多个级别. In our About example, 如果我们添加了一个子页面og体育，我们就有以下类在我们的菜单项.
About - .current-menu-ancestor
Contact Us - .current-menu-ancestor .current-menu-parent
Third Level Page - .current-menu-item
这些类在创建可访问且易于使用的导航菜单方面为您提供了强大的功能，这些导航菜单可以让您的用户了解他们在您的站点上的位置.
有关添加到菜单项的所有类的列表，请参见 the Codex.
在构建导航菜单时, 您应该记住，有些用户可能只使用键盘来导航您的菜单. 这意味着你应该在悬停状态旁边包含焦点状态，这样以键盘为中心的用户就知道他们当前在哪个菜单项上.
---

---
Sub Menus and Dropdowns
Another nice element of the WordPress menu markup is that any nested menus are added within their parent
element as a
element.

这使得在WordPress菜单中创建下拉导航非常容易.

下面是一个快速示例，说明如何使用CSS和wp_nav_menu函数添加的类构建下拉导航.


.sub-menu {
left: -999em;
position: absolute;
background: #fff;
}

li:hover > .sub-menu {
left: auto;
}

Essentially we’re hiding the .子菜单的方式，从屏幕的一边和看不见. Then when a user hovers the

• it moves the .子菜单，它是屏幕上的直接子菜单.

  ---

  Gotchyas!

  Sub-menu inception

  WordPress菜单给了用户很多权力, not to go all Uncle Ben on your, 但是，这给开发人员带来了很多责任，以确保您的菜单适用于许多用例.需要考虑的一个重要事项是多层嵌套子菜单. 如果你的用户只使用单一的父菜单和子菜单结构，上面的例子就会非常有效. 但如果他们进入第3、4、5个关卡菜单，游戏就会崩溃.

  我首选的处理方法是在下拉菜单中打开第一个子菜单. 然后第三、第四和第五层在第二层项目下面缩进. 你也可以将第三个关卡开向一边，从而提供一个额外的窗口.

  Using the wp_page_menu fallback

  如果您决定使用wp_page_menu作为回退, 您需要确保适当地设置样式，因为生成的标记可能略有不同. The best way is to test.

  ---

  一个新的WordPress网站的最佳插件[免费电子书]

  ---

  Where to go from here

  Going Mobile

  现在您已经掌握了使用wp_nav_menu在主题中实现WordPress菜单的技巧, you may want to go deeper.

  也许你想为移动导航考虑一个自定义菜单. I like to use the jQuery mmenu plugin for easy slide out navigations.

  Custom Markup

  如果需要为菜单创建自定义标记, 你可以使用WordPress创建一个自定义菜单Walker Walker class.

  Be careful; this can be an advanced technique.

  ---

  Some Navigation Inspiration

  如果你正在寻找一些关于如何使用WordPress导航菜单的灵感, check out some of these examples.

  ---

  Monstroid

  

  Monstroid2 handles 2nd, 3rd, 而第4个关卡则是通过从前一个关卡的侧面展开每个添加的关卡而向下拉. 他们也做了一个出色的工作，重新定位的一边. 导航出现是为了防止菜单脱离屏幕.

  ---

  Houston

  

  Houston 一个优秀的动画下拉导航的进出与一个漂亮的淡出和运动动画. 这为用户创造了一个更平滑的视觉过渡.

  ---

  Bhanti

  

  Bhanti 在主导航上用下划线显示用户所处的页面是否出色. 他们也有一个愉快的动画和多层次的菜单结构.

  ---

  A Gift from me to you

  在你走之前，我还有最后一件事. 我已经创建了一个易于集成的自定义WordPress导航，使用菜单和上面列出的所有实践 released it on Github.

  

  随意获取它并在您的项目中使用它.

  如果你有任何问题，请随时在评论中留言或给我留言 jasonyingling.me.

  ---

  Related Posts

  创意和创新的眼睛吸引人的网站导航设计

  你的受众想从你的网站导航中得到什么

  20个策略，最大限度地从过滤导航在您的网站

  如何添加更多的导航菜单到您的WordPress主题

  带子菜单的彩色编码下拉导航

  ---

---



og体育首页Post Editorial

发布有关主要网页设计亮点和新奇之处的文章. 浏览一些由网页设计和在线营销领域的专家分享的有用的教程和指南.