导航菜单是您主题中可定制的菜单。 wordpress主题开发它们允许用户在菜单中添加页面,帖子,类别和URL。 要创建导航菜单,您需要注册,然后在主题中的适当位置显示菜单。
注册菜单
在主题的functions.php中,您需要注册您的菜单。 这将设置出现在外观 – >菜单的名称。
首先,你将使用register_nav_menus()来注册菜单。
在此示例中,两个位置添加到“管理位置”选项卡:“标题菜单”和“额外菜单”。
1 2 3 4 5 6 7 8 9 |
function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); |
显示菜单
一旦你注册了菜单,你需要使用wp_nav_menu()来告诉你的主题哪里可以显示它们。 例如,将以下代码添加到您的header.php文件中,以显示上面注册的标题菜单。
1 |
wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); |
注意:参数的完整列表可以在函数引用的wp_nav_menu()页面中找到
对您想要在主题中显示的任何其他菜单重复此过程。 或者,您可以添加容器类,允许您使用CSS对菜单进行样式化。
1 2 3 4 5 6 |
wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) ); |
注意:可以在函数引用的wp_nav_menu()页面中找到CSS类的完整列表。 您可以使用这些来设计菜单。
显示其他内容
以下是“Twenty Seventeen”页面社交菜单的简化版本,它在菜单项标签文本之前和之后显示跨度元素。
1 2 3 4 5 6 7 |
wp_nav_menu( array( 'menu' => 'primary', 'link_before' => '<span class="screen-reader-text">', 'link_after' => '</span>', ) ); |
输出将显示为…
1 2 3 4 5 6 7 |
<div class="menu-social-container"> <ul id="menu-social"> <li id="menu-item-1"> <a href="http://twitter.com/"><span class="screen-reader-text">Twitter</span> </li> </ul> </div> |
注意:要在每个菜单项的
<li>
和<a>
元素之间显示文本,请在参数之前和之后使用。
定义回调
默认情况下,当没有找到指定的菜单或位置时,WordPress显示第一个非空菜单,或者当没有选择自定义菜单时,WordPress将生成一个页面菜单。 为了防止这种情况,请使用theme_location和fallback_cb参数。
1 2 3 4 5 6 7 8 9 |
wp_nav_menu( array( 'menu' => 'primary', // do not fall back to first non-empty menu 'theme_location' => '__no_such_location', // do not fall back to wp_page_menu() 'fallback_cb' => false ) ); |