wordpress标签说明,wp:post-featured-image

这段代码  是 WordPress 块编辑器（Gutenberg）的块标记，用于显示当前文章或页面的特色图像（Featured Image），并通过参数控制其显示比例。以下是详细解析：

核心功能

动态输出特色图像

自动显示在文章/页面编辑器中设置的「特色图像」（需在后台提前上传）。
如果未设置特色图像，则不会渲染任何内容。

"aspectRatio":"3/2" 参数

强制将图像裁剪为 3:2 的宽高比（宽度与高度的比例）。
保持比例一致化，适合卡片式布局或网格设计。

代码分解

部分	说明
`wp:post-featured-image`	块类型，表示「文章特色图像」块。
`{"aspectRatio":"3/2"}`	参数：固定图像比例为 3:2（例如 900px × 600px）。
`/-->`	自闭合标签，无需嵌套内容。

输出示例

前端渲染结果

关键特性

比例控制逻辑

图像会按 3:2 比例裁剪或缩放，优先保证宽度充满容器，高度自适应。
使用 CSS 的 aspect-ratio 属性和 object-fit:cover 实现（避免变形）。

响应式适配

在不同屏幕尺寸下保持比例不变（如移动端自动调整宽度，高度按比例计算）。

与主题样式交互

图像容器（figure）的宽度通常由父级布局（如 Group 或 Column 块）决定。

适用场景

文章列表页

在 wp:query-loop 中统一文章卡片图片比例（示例）：

单篇文章页

在文章头部显示标准化比例的特色图：

全宽布局

结合 Cover 块实现全宽图像（比例仍受约束）：

常用参数扩展

参数	示例值	作用
`"aspectRatio"`	`"16/9"`, `"1/1"`	设置图像宽高比（如 16:9、1:1 方形）。
`"width"`	`"100%"`	控制图像容器宽度（需主题支持）。
`"height"`	`"auto"`	覆盖高度（通常与比例参数冲突，慎用）。
`"scale"`	`"cover"`	裁剪方式（cover/contain）。

自定义样式

通过 CSS 调整图像效果：

/* 全局特色图像样式 */ .wp-block-post-featured-image { margin: 0 0 1.5em 0; border-radius: 8px; overflow: hidden; } /* 悬停动画 */ .wp-block-post-featured-image img { transition: transform 0.3s; } .wp-block-post-featured-image:hover img { transform: scale(1.02); }

注意事项

图像上传要求

原始图片尺寸应大于目标比例尺寸，否则会拉伸模糊（建议上传至少 1200px 宽度的图片）。

与主题冲突

部分主题可能强制覆盖 aspectRatio，需检查主题的 theme.json 或 CSS。

SEO 优化

图像的 alt 属性自动继承文章标题，无需手动设置。

与其他图像块对比

块名称	作用	数据来源	特色
`wp:post-featured-image`	文章特色图像	文章设置的特色图	支持动态比例控制
`wp:image`	普通图像	手动上传/媒体库	自由调整尺寸
`wp:site-logo`	网站 Logo	自定义izer 或主题设置	专用于 Logo 场景