WordPress主题开发：如何实现内容限宽但背景全屏显示？

当然可以搞定这个需求！我开发WordPress主题时也碰到过完全一样的场景，核心思路是把背景层和内容层分离——让背景层占满整个视口宽度，同时让内容层保持和页眉、页脚一致的最大宽度并居中。

核心原理 #

你当前的问题是article元素被设置了max-width，导致它的背景没法突破宽度限制。我们需要让承载背景的元素脱离父容器的宽度约束，同时让内部内容容器沿用页眉/页脚的居中规则。

具体代码修改 #

1. 调整CSS样式

保留页眉、页脚的原有规则，新增全屏背景和内容对齐的类：

/* 保持页眉、页脚的居中逻辑不变，可统一添加内边距避免内容贴边 */
.header-wrapper, .footer-wrapper, .content-inner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 20px; /* 可选，根据设计需求调整 */
}

/* 实现全屏背景的关键类 */
.full-width-bg {
  width: 100vw; /* 占满整个视口宽度 */
  margin-left: calc(-50vw + 50%); /* 技巧：让元素突破父容器宽度，水平居中 */
  /* 这里设置你的背景样式，比如颜色、图片 */
  background-color: #f5f5f5;
  /* 如果用背景图：background-image: url('your-image-path.jpg'); */
  background-size: cover;
  background-position: center;
}

2. 配合Gutenberg编辑器使用

不需要手动修改主题HTML，直接在Gutenberg里操作即可：

• 给需要全屏背景的内容添加一个组区块，在区块设置的「高级」选项里添加自定义CSS类：full-width-bg
• 在这个组区块内部，再添加一个子组区块，同样在「高级」里添加类：content-inner
• 把你的文本、图片等内容放到这个子组区块里，这样内容就会和页眉、页脚保持一致的宽度并居中，而外层组的背景会铺满整个屏幕。

3. （可选）主题结构优化

如果需要在主题模板里默认支持这个逻辑，可以调整文章的HTML结构：

<main class="site-content">
  <article class="post-10">
    <header></header>
    <!-- 全屏背景区块容器 -->
    <div class="full-width-bg">
      <!-- 内容对齐容器 -->
      <div class="content-inner">
        <!-- Gutenberg生成的内容会在这里渲染 -->
        <?php the_content(); ?>
      </div>
    </div>
    <footer></footer>
  </article>
</main>

这样设置后，不管是主题默认内容还是你用Gutenberg创建的区块，都能轻松实现「背景全屏+内容与页眉页脚对齐」的效果啦！

内容的提问来源于stack exchange，提问作者Thessa Verbruggen