wordpress标签说明,wp:post-content

这段代码  是 WordPress 块编辑器（Gutenberg）的核心块标记，用于动态显示当前文章或页面的完整内容，并通过参数控制其布局和对齐方式。以下是详细解析：

核心功能

自动输出文章/页面内容

渲染在 WordPress 编辑器中创建的所有内容（包括文本、图片、区块等）。
完全动态，内容更新后自动同步变化。

关键参数作用

"align":"full"：让内容突破默认容器宽度，实现全宽布局（需主题支持）。
"layout":{"type":"constrained"}：约束内部内容的宽度（与主题全局容器对齐）。

代码分解

部分	说明
`wp:post-content`	块类型，表示「文章内容」块，输出当前文章/页面的完整内容。
`{"align":"full"}`	参数：外层容器全宽（覆盖主题默认边距）。
`"layout":{"type":"constrained"}`	参数：内部内容宽度受主题约束（避免全宽内容过长难以阅读）。
`/-->`	自闭合标签，无需嵌套内容。

渲染后的 HTML 结构

布局效果

外层容器 (alignfull)

宽度：100% 视窗宽度（忽略主题的 max-width 限制）。
典型用途：全宽背景色或全宽图片画廊。

内层容器 (is-layout-constrained)

宽度：与主题的主内容区域对齐（如 1200px）。
保证文本段落、标题等不会拉伸到全屏宽度，提升可读性。

适用场景

全宽页面设计

例如 Landing Page 中混合全宽和约束内容：

兼容主题布局

在支持 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`	动态文章列表	是	博客首页、分类页