在定制网站的时候，高效利用菜单可以节约很多开发时间。比如要输出一系列的相关页面，我们可以新建一个菜单，把这些页面都放到菜单里，然后用“wp_nav_menu”方法输出这些菜单项，比如这样。
1 2 3 | wp_nav_menu( array( 'theme_location' => 'menu-top' ) ); |
wp_nav_menu是一个已经高度封装的输出函数，你可以通过注入参数自定义各种标签和样式，具体可以查看官方文档（https://developer.wordpress.org/reference/functions/wp_nav_menu/），本文就不赘述了。但有一个问题它没有办法解决，也就是只输出特定的子菜单项，而不是整个菜单的菜单树。
假如我通过wp_nav_menu方法可以输出以下这个菜单，我需要在某些地方只输出圈出的这块子菜单，有什么方法可以做到吗？
自然是有的，我们可以借助wp_get_nav_menu_items这个封装读没有wp_nav_menu那么高的函数来解决。直接上代码：
1 2 3 4 5 6 7 8 9 10 11 12 | $parent_item_id = 888; //change this id by your needs $menu_items = wp_get_nav_menu_items( $navigation_attributes['menu_id'] ); $menu_html = ''; for ( $x = 0; $x < count( $menu_items ); $x++ ) { $menu_item_parent = $menu_items[ $x ]->menu_item_parent; if( $menu_item_parent == $parent_item_id ){ $url = $menu_items[ $x ]->url; $title = $menu_items[ $x ]->title; $menu_html .= '<li><a href="' .esc_attr( esc_url( $url ) ). '">' .wp_kses_post( $title ).'</a></li>'; } } echo $menu_html; |
修改第一行的$parent_item_id 即可输出对应子菜单项了。$parent_item_id是一个数字，可以在菜单设置界面的控制台里找到：
接下来我们再加工一下功能，要知道wp_nav_menu是可以标记当前页面的，它会给当前页的项加一个”current_page_item”样式，我们可以利用这个样式对当前页做一些高亮显示等交互处理。我希望在调用子菜单的时候也能有类似功能。并且我们也要封装一个短代吗以便在后台编辑器中随时实用，下面是完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //Out put submenu items in certain menu - https://blog.brain1981.com //load navigation shortcode add_shortcode( 'brain1981_custom_navigation', 'brain1981_add_custom_navigation' ); //create shortcode for navigation function brain1981_add_custom_navigation( $attributes, $content = null ) { $navigation_attributes = shortcode_atts( array( 'menu_id' => '', 'parent_item_id' => '', ), $attributes ); $menu_items = wp_get_nav_menu_items( $navigation_attributes['menu_id'] ); $menu_html = ''; $current_page_url = get_permalink( get_queried_object_id() ); for ( $x = 0; $x < count( $menu_items ); $x++ ) { $menu_item_parent = $menu_items[ $x ]->menu_item_parent; if( $menu_item_parent == $navigation_attributes['parent_item_id'] ){ $url = $menu_items[ $x ]->url; $is_current = ''; if( $current_page_url == $url) $is_current = 'current'; $title = $menu_items[ $x ]->title; $item_id = $menu_items[ $x ]->post_slug; $menu_html .= '<li class="'.$is_current.'"><a href="' .esc_attr( esc_url( $url ) ). '">' .wp_kses_post( $title ).'</a></li>'; } } return '<u>'.$menu_html.'</ul>'; } |
以上代码中，参数menu_id即菜单ID，parent_item_id即上面提到的子菜单ID，输出的菜单项如果是当前页面，会自动生成“current”的样式。自此，使用如下短代吗即可随时调用指定的子菜单
[brain1981_custom_navigation menu_id=123 parent_item_id=60]
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3315.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。