学习NO.1 发表于 2024-8-7 19:55:07

WordPress简单输出菜单/子菜单的内容列表的方法

在定制网站的时候,高效利用菜单可以节约很多开发时间。比如要输出一系列的相关页面,我们可以新建一个菜单,把这些页面都放到菜单里,然后用“wp_nav_menu”方法输出这些菜单项,比如这样。

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那么高的函数来解决。直接上代码:$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”样式,我们可以利用这个样式对当前页做一些高亮显示等交互处理。我希望在调用子菜单的时候也能有类似功能。并且我们也要封装一个短代吗以便在后台编辑器中随时实用,下面是完整代码://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”的样式。自此,使用如下短代吗即可随时调用指定的子菜单这样就可以了
页: [1]
查看完整版本: WordPress简单输出菜单/子菜单的内容列表的方法