将特色图片添加到wp_nav_menu项目 [英] Add featured image to wp_nav_menu items

问题描述

这是一个自问答。

如何修改wp_nav_menu输出中显示的文本/ html？例如，我想为页面和类别添加精选的图片。

您可以看到使用自定义walker执行此操作的示例，但代码非常复杂小小的变化。当然，有一种方法可以通过过滤器来实现吗？

解决方案

这是我得到的代码感谢一个WordPress的StackOverflow的答案，我找不到了（请评论与链接，如果你发现它）。

首先你需要添加过滤器到特定的菜单你可以添加到所有的菜单，如果你想 - 只需使用add_filter行本身）。

  // //将过滤器添加到特定菜单
 add_filter（'wp_nav_menu_args'，'add_filter_to_menus'）; 
函数add_filter_to_menus（$ args）{
 
 //您可以测试agasint的东西，如$ args ['menu']，$ args ['menu_id']或$ args ['theme_location'] 
 if（$ args ['theme_location'] =='header_menu'）{
 add_filter（'wp_setup_nav_menu_item'，'filter_menu_items'）; 
} 
 
 return $ args; 
 
 
 
 
 
 $ b然后，您需要构建代码以获取帖子或类别ID传递给过滤器的$ item对象。这并不像你期望的那样容易，因为$ item不包含底层的帖子/类别ID，只是菜单项ID。所以我使用URL来反向查找ID。  
 
 
 这不适用于菜单或自定义分类法中使用的标签。 
  //滤镜菜单
函数filter_menu_items（$ item）{
 
 if（$ item-> type =='taxonomy'）{
 
 //对于类别菜单项
 $ cat_base = get_option（'category_base'）; 
 if（empty（$ cat_base））{
 $ cat_base ='category'; 
} 
 
 //获取类别的路径（不包括网址的home和category基本部分）
 $ cat_path = str_replace（home_url（）。'/'） $ cat_base，''，$ item-> url）; 
 
 //获取类别和图像ID 
 $ cat = get_category_by_path（$ cat_path，true）; 
 $ thumb_id = get_term_meta（$ cat-> term_id，'_term_image_id'，true）; //我使用'Simple Term Meta'插件将附件ID存储为特色图片
 
} else {
 //获取帖子和图片ID 
 $ post_id = url_to_postid（$ item-> url）; 
 $ thumb_id = get_post_thumbnail_id（$ post_id）; 
} 
 
 if（！empty（$ thumb_id））{
 //使标题成为精选图片。 
 $ item-> title = wp_get_attachment_image（$ thumb_id，'poster'）; 
} 
 
 return $ item; 
 
 $ / code> 
然后，您要删除您在开始时应用的过滤器，那么处理的下一个菜单不会使用与filter_menu_items（）中定义的相同的HTML。 
 $ b 
  //删除过滤器
 add_filter（'wp_nav_menu_items'，'remove_filter_from_menus'，10，2）; 
函数remove_filter_from_menus（$ nav，$ args）{
 remove_filter（'wp_setup_nav_menu_item'，'filter_menu_items'）; 
返回$ nav; 
} 
  
 
This is a self Q&A.


How do you modify the text/html that appears in the output of a wp_nav_menu? For example, I wanted to add the featured image for pages and categories.

You see examples of doing this with a custom walker, but the code is very complex to do for small changes. Surely there is a way to do it with a filter?
解决方案
This is the code I came up with thanks to some help from a Wordpress StackOverflow answer that I can't find anymore (please comment with a link if you find it).

First you need to add the filter to the specific menu (you could add it to all menus if you want - just use the add_filter line by itself).
// Add filter to specific menus 
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {

    // You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
    if( $args['theme_location'] == 'header_menu') {
        add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
    }

    return $args;
}
Then you need to build out the code to get the post or category ID from the $item object passed to the filter. It's not as easy as you'd expect, as $item doesn't contain the underlying post/category ID, just the menu item ID. So I use the URL's to do a reverse lookup of the IDs. 

This won't work for tags used in a menu, or custom taxonomys. I only needed it for categories, so this is all I built.
// Filter menu
function filter_menu_items($item) {

    if( $item->type == 'taxonomy') {

        // For category menu items
        $cat_base = get_option('category_base');
        if( empty($cat_base) ) {
            $cat_base = 'category';
        }

        // Get the path to the category (excluding the home and category base parts of the URL)
        $cat_path = str_replace(home_url().'/'.$cat_base, '', $item->url);

        // Get category and image ID
        $cat = get_category_by_path($cat_path, true);
        $thumb_id = get_term_meta($cat->term_id, '_term_image_id', true); // I'm using the 'Simple Term Meta' plugin to store an attachment ID as the featured image

    } else {
        // Get post and image ID
        $post_id = url_to_postid( $item->url );
        $thumb_id = get_post_thumbnail_id( $post_id );
    }

    if( !empty($thumb_id) ) {
        // Make the title just be the featured image.
        $item->title = wp_get_attachment_image( $thumb_id, 'poster');
    }

    return $item;
}
And then you want to remove the filter that you applied at the beginning, so that the next menu processed doesn't use the same HTML as defined above in filter_menu_items().
// Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
    remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
    return $nav;
}


                        
这篇关于将特色图片添加到wp_nav_menu项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！