使用WordPress REST API获取文章：日期格式化及缩略图访问问题

嘿，我来帮你搞定这两个头疼的问题！咱们一步步来：

一、正确获取嵌入的特色缩略图 #

你之前的写法item.wp:featuredmedia[0].source_url有两个关键问题：

• WordPress REST API的嵌入内容都存在_embedded顶层属性里，你漏了这个核心节点
• 带冒号的键名（比如wp:featuredmedia）不能用点语法访问，必须用方括号语法来读取

正确的访问方式： #

首先确保你的API请求里加上了?_embed参数（比如https://你的站点/wp-json/wp/v2/posts?_embed），只有加了这个参数，返回的JSON才会包含_embedded字段。然后用下面的代码获取缩略图：

// 用可选链操作符防止没有特色图片时报错
const featuredImageUrl = item._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https://你的默认图片地址';

• ?.是可选链操作符，能避免当某一层节点不存在时抛出错误（比如有些文章没设置特色图片）
• 如果需要兼容旧浏览器，也可以用条件判断替代：

let featuredImageUrl = '默认地址';
if (item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]) {
  featuredImageUrl = item._embedded['wp:featuredmedia'][0].source_url;
}

二、格式化ISO日期字符串 #

你拿到的日期是ISO 8601格式（"2018-02-14T10:00:17"），用JavaScript的Date对象就能轻松格式化：

方法1：用内置的toLocaleDateString生成本地化格式 #

这个方法简单且适配不同地区的显示习惯：

const rawDate = item.date;
const formattedDate = new Date(rawDate).toLocaleDateString('zh-CN', {
  year: 'numeric',
  month: 'long', // 显示"二月"而不是"02"
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
// 输出示例："2018年2月14日 10:00"

你可以根据需求调整配置项，比如把zh-CN改成en-US会输出"February 14, 2018, 10:00 AM"。

方法2：自定义格式化函数 #

如果需要更个性化的格式（比如"2018-02-14 10:00"），可以自己拼接日期组件：

function formatDate(rawDate) {
  const date = new Date(rawDate);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，要+1
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
}

// 使用示例
const formattedDate = formatDate(item.date);
// 输出："2018-02-14 10:00"

完整示例代码 #

把两个功能整合起来，这里用fetch API做演示：

fetch('https://你的WordPress站点/wp-json/wp/v2/posts?_embed')
  .then(res => res.json())
  .then(posts => {
    posts.forEach(post => {
      // 格式化日期
      const formattedDate = new Date(post.date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });

      // 获取特色图片
      const featuredImageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https://默认图片地址';

      // 输出结果
      console.log('标题:', post.title.rendered);
      console.log('链接:', post.link);
      console.log('格式化日期:', formattedDate);
      console.log('缩略图:', featuredImageUrl);
    });
  })
  .catch(err => console.error('获取文章出错:', err));

内容的提问来源于stack exchange，提问作者Dirty Bird Design