WordPress中的菜单是一个强大的工具. 他们让用户从他们的WordPress帖子数据中快速创建导航菜单. 对于那些刚刚进入主题开发的人来说,它们也是一个常见的障碍.
如果你习惯于用HTML来开发菜单,你可能会像这样构建你的菜单标记:
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.
在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?
在开始将菜单输出到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.
好的,现在我们已经注册了一个菜单,我们想要在我们的主题上显示它.
为此,我们只需要使用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
container - Setting this allows you to wrap the
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标记.
现在你已经得到了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.
在构建导航菜单时, 您应该记住,有些用户可能只使用键盘来导航您的菜单. 这意味着你应该在悬停状态旁边包含焦点状态,这样以键盘为中心的用户就知道他们当前在哪个菜单项上.
Another nice element of the WordPress menu markup is that any nested menus are added within their parent
订阅我们的时事通讯和访问独家内容和提供只提供给og体育首页Post订户.
Leave a Reply
You must be logged in to post a comment.