wordpress标签说明,wp:post-content
这段代码 <!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /--> 是 WordPress 块编辑器（Gutenberg） 的核心块标记，用于 动态显示当前文章或页面的完整内容，并通过参数控制其布局和对齐方式。以下是详细解析：
核心功能
自动输出文章/页面内容
渲染在 WordPress 编辑器中创建的所有内容（包括文本、图片、区块等）。
完全动态，内容更新后自动同步变化。
关键参数作用
"align":"full"：让内容突破默认容器宽度，实现 全宽布局（需主题支持）。"layout":{"type":"constrained"}：约束内部内容的宽度（与主题全局容器对齐）。
代码分解
| 部分 | 说明 |
|---|---|
wp:post-content | 块类型，表示「文章内容」块，输出当前文章/页面的完整内容。 |
{"align":"full"} | 参数：外层容器全宽（覆盖主题默认边距）。 |
"layout":{"type":"constrained"} | 参数：内部内容宽度受主题约束（避免全宽内容过长难以阅读）。 |
/--> | 自闭合标签，无需嵌套内容。 |
渲染后的 HTML 结构
<div class="wp-block-post-content alignfull"> <div class="wp-block-group is-layout-constrained"> <!-- 文章内容的所有区块（段落、图片、列表等） --> </div> </div>
布局效果
外层容器 (
alignfull)宽度：100% 视窗宽度（忽略主题的
max-width限制）。典型用途：全宽背景色或全宽图片画廊。
内层容器 (
is-layout-constrained)宽度：与主题的主内容区域对齐（如
1200px）。保证文本段落、标题等不会拉伸到全屏宽度，提升可读性。
适用场景
全宽页面设计
例如 Landing Page 中混合全宽和约束内容：
<!-- 全宽封面 --> <!-- wp:cover {"align":"full"} --> <!-- wp:post-title {"level":1} /--> <!-- /wp:cover --> <!-- 约束宽度的正文 --> <!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /--> <!-- 全宽CTA --> <!-- wp:group {"align":"full","backgroundColor":"black"} --> <!-- 内容... --> <!-- /wp:group -->
兼容主题布局
在支持 FSE（全站编辑）的块主题中，确保内容既全宽又保持合理行宽。
自定义控制
通过主题 JSON 扩展
在 theme.json 中定义全宽和约束布局的默认行为：
{ "settings": { "layout": { "contentSize": "800px", // 约束布局的宽度 "wideSize": "1200px" // 宽对齐（alignwide）的宽度 } } }
通过 CSS 覆盖
/* 全宽容器的背景色 */
.alignfull {
background-color: #f5f5f5;
padding: 2rem 0;
}
/* 约束内容的最大宽度 */
.is-layout-constrained {
max-width: 80ch; /* 最佳阅读宽度 */
}
注意事项
主题支持
alignfull需主题添加add_theme_support('align-wide')才能生效。移动端适配
全宽内容在移动端可能需额外边距（通过 CSS 的
padding-left/right调整）。嵌套冲突
如果父级容器已有宽度限制（如
Group块），alignfull可能失效。
与其他内容块对比
| 块名称 | 作用 | 是否动态 | 典型用途 |
|---|---|---|---|
wp:post-content | 当前文章/页面完整内容 | 是 | 单篇文章、页面正文 |
wp:post-excerpt | 文章摘要 | 是 | 列表页、存档页 |
wp:query-loop | 动态文章列表 | 是 | 博客首页、分类页 |
如需更精细的内容控制，可结合 wp:group 或 wp:columns 嵌套使用。
发表评论