如何通过WPGraphQL无头查询获取文章缩略图而非特色图片

WPGraphQL默认返回的特色图片包含多尺寸资源，但要直接获取WordPress默认的「缩略图（thumbnail）」尺寸，有两种实用方式：

1. 直接在查询中指定缩略图尺寸 #

WordPress的缩略图对应WPGraphQL中的THUMBNAIL枚举值，你可以在查询特色图片时通过size参数指定该尺寸，直接拿到缩略图的地址和srcSet，无需额外开发。

示例GraphQL查询：

query GetPostsWithThumbnails {
  posts {
    nodes {
      id
      title
      featuredImage {
        node {
          # 获取缩略图的直接地址
          sourceUrl(size: THUMBNAIL)
          # 获取缩略图的响应式srcSet
          srcSet(size: THUMBNAIL)
          altText
        }
      }
    }
  }
}

2. 注册自定义字段单独返回缩略图 #

如果需要更清晰的字段命名（比如单独的postThumbnail字段），可以通过PHP代码在WordPress中注册自定义GraphQL字段，专门返回缩略图资源：

在主题的functions.php或自定义插件中添加以下代码：

add_action('graphql_register_types', function() {
  register_graphql_field('Post', 'postThumbnail', [
    'type' => 'MediaItem',
    'description' => '返回文章的缩略图（thumbnail尺寸）',
    'resolve' => function($post, $args, $context) {
      $thumbnail_id = get_post_thumbnail_id($post->ID);
      if (!$thumbnail_id) {
        return null;
      }
      // 返回符合WPGraphQL MediaItem类型的结构
      return WPGraphQL\Data\DataSource::resolve_post_object($thumbnail_id, $context);
    }
  ]);
});

之后就可以在查询中直接使用postThumbnail字段：

query GetPostsWithCustomThumbnails {
  posts {
    nodes {
      id
      title
      postThumbnail {
        sourceUrl
        srcSet
        altText
      }
    }
  }
}

两种方式都能满足性能优化需求，第一种无需额外代码，是最便捷的方案。

内容的提问来源于stack exchange，提问作者MaxwellLynn