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

问题描述

这是一个自我问答.

如何修改出现在 wp_nav_menu 输出中的 text/html?例如，我想为页面和类别添加特色图片.

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.

您会看到使用自定义 walker 执行此操作的示例，但代码对于小的更改来说非常复杂.肯定有办法用过滤器做到这一点吗?

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?

推荐答案

这是我想出的代码，感谢 Wordpress StackOverflow 答案的一些帮助，但我再也找不到了(如果你找到了，请评论一个链接它).

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).

首先，您需要将过滤器添加到特定菜单(如果需要，您可以将其添加到所有菜单 - 只需单独使用 add_filter 行).

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;
}

然后您需要构建代码以从传递给过滤器的 $item 对象中获取帖子或类别 ID.这并不像您期望的那么容易，因为 $item 不包含底层的帖子/类别 ID，仅包含菜单项 ID.所以我使用 URL 对 ID 进行反向查找.

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.

这不适用于菜单中使用的标签或自定义分类法.我只需要它用于类别，所以这就是我构建的全部内容.

// 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;
}

然后您想删除您在开始时应用的过滤器，以便处理的下一个菜单不会使用与上面 filter_menu_items() 中定义的相同的 HTML.

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屋！