WP RIG开发WordPress站点：相关文章特色图片引发TypeError问题咨询

这个错误的核心原因是你的代码直接假设wpRigRelated这个自定义图片尺寸一定存在于特色图片的媒体数据中，但实际上有些图片可能因为尺寸不足、主题配置问题，或者API嵌入数据不完整，导致这个尺寸对象是undefined，进而触发读取width属性时的错误。

问题分析 #

错误出现在这一行：

let imgWidth = featuredObject.media_details.sizes.wpRigRelated.width;

当featuredObject.media_details.sizes.wpRigRelated不存在时，访问它的width属性就会抛出TypeError。可能的场景包括：

• 某张特色图片的原始尺寸小于wpRigRelated预设的宽高，WordPress不会生成比原图小的尺寸
• 调用REST API获取相关文章时，没有正确请求嵌入wp:featuredmedia数据，导致媒体信息不完整
• 主题的wpRigRelated尺寸注册有误，没有生效

修复方案 #

我们需要给代码添加多层安全检查，同时提供尺寸降级方案，避免直接访问可能不存在的属性。修改后的代码如下：

// 若存在特色图片则获取之
function getFeaturedImage(postObject) {
    // 若无特色图片，直接返回空
    if (0 === postObject.featured_media) {
        return "";
    }

    // 检查嵌入式媒体数据是否存在且有效
    if (!postObject._embedded || !postObject._embedded["wp:featuredmedia"] || postObject._embedded["wp:featuredmedia"].length === 0) {
        return "";
    }

    const featuredObject = postObject._embedded["wp:featuredmedia"][0];
    
    // 检查媒体详情、尺寸集合是否存在
    if (!featuredObject.media_details || !featuredObject.media_details.sizes) {
        // 直接返回原图（无尺寸信息）
        return `
<figure class="related-post__image">
<img src="${featuredObject.source_url}" alt="${featuredObject.alt_text || ''}">
</figure>`;
    }

    // 优先使用wpRigRelated尺寸，不存在则降级到medium/thumbnail
    const targetSize = featuredObject.media_details.sizes.wpRigRelated 
        || featuredObject.media_details.sizes.medium 
        || featuredObject.media_details.sizes.thumbnail;

    if (targetSize) {
        return `
<figure class="related-post__image">
<img src="${targetSize.source_url}" width="${targetSize.width}" height="${targetSize.height}" alt="${featuredObject.alt_text || ''}">
</figure>`;
    } else {
        // 所有尺寸都不存在，返回原图
        return `
<figure class="related-post__image">
<img src="${featuredObject.source_url}" alt="${featuredObject.alt_text || ''}">
</figure>`;
    }
}

关键改进点 #

1. 多层安全校验：逐层检查_embedded、wp:featuredmedia、media_details、sizes等属性是否存在，避免直接访问undefined对象
2. 尺寸降级策略：当wpRigRelated尺寸不存在时，自动使用WordPress默认的medium或thumbnail尺寸作为备选
3. 可访问性优化：添加了图片alt文本的处理，使用媒体对象自带的alt_text属性，默认为空字符串
4. 语法修正：修复了原代码中img标签多余的单引号和语法错误

额外建议 #

• 检查WP Rig主题的图片尺寸配置，确保wpRigRelated尺寸已经正确注册（通常在主题的functions.php中）
• 如果是通过REST API获取相关文章，确保请求中包含_embed参数，以获取完整的嵌入式媒体数据

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