wordpress标签说明,wp:post-featured-image
这段代码 <!-- wp:post-featured-image {"aspectRatio":"3/2"} /--> 是 WordPress 块编辑器（Gutenberg） 的块标记，用于 显示当前文章或页面的特色图像（Featured Image），并通过参数控制其显示比例。以下是详细解析：
核心功能
动态输出特色图像
自动显示在文章/页面编辑器中设置的「特色图像」（需在后台提前上传）。
如果未设置特色图像，则不会渲染任何内容。
"aspectRatio":"3/2"参数强制将图像裁剪为 3:2 的宽高比（宽度与高度的比例）。
保持比例一致化，适合卡片式布局或网格设计。
代码分解
| 部分 | 说明 |
|---|---|
wp:post-featured-image | 块类型，表示「文章特色图像」块。 |
{"aspectRatio":"3/2"} | 参数：固定图像比例为 3:2（例如 900px × 600px）。 |
/--> | 自闭合标签，无需嵌套内容。 |
输出示例
前端渲染结果
<figure class="wp-block-post-featured-image"> <img src="https://example.com/wp-content/uploads/2024/05/featured.jpg" alt="文章标题" class="wp-image-123" style="aspect-ratio:3/2; object-fit:cover" /> </figure>
关键特性
比例控制逻辑
图像会按 3:2 比例裁剪或缩放，优先保证 宽度充满容器，高度自适应。
使用 CSS 的
aspect-ratio属性和object-fit:cover实现（避免变形）。响应式适配
在不同屏幕尺寸下保持比例不变（如移动端自动调整宽度，高度按比例计算）。
与主题样式交互
图像容器（
figure）的宽度通常由父级布局（如Group或Column块）决定。
适用场景
文章列表页
在
wp:query-loop中统一文章卡片图片比例（示例）：
<!-- wp:query-loop --> <!-- wp:post-featured-image {"aspectRatio":"3/2"} /--> <!-- wp:post-title {"level":3} /--> <!-- /wp:query-loop -->
单篇文章页
在文章头部显示标准化比例的特色图：
<!-- wp:group {"layout":{"type":"constrained"}} -->
<!-- wp:post-featured-image {"aspectRatio":"3/2"} /-->
<!-- wp:post-title {"level":1} /-->
<!-- /wp:group -->
全宽布局
结合
Cover块实现全宽图像（比例仍受约束）：
<!-- wp:cover -->
<!-- wp:post-featured-image {"aspectRatio":"16/9"} /-->
<!-- /wp: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 场景 |
如需更复杂的图像效果（如滤镜、遮罩），可结合 wp:cover 或第三方插件实现。
发表评论