如何在Twenty Twenty-One主题中将内容区域设置为全宽？

你之前测试的CSS未生效是因为只修改了内容区内部子元素的宽度限制，没有覆盖主内容外层容器的默认宽度约束，父容器宽度被锁定的情况下子元素设置无法生效。可以通过以下步骤用CSS实现需求：

• 进入WordPress后台，点击「外观」→「自定义」→「额外CSS」，或直接编辑子主题的style.css文件
• 将下方CSS代码粘贴到对应位置后保存，清空浏览器缓存和站点缓存即可生效

/* 同步内容区与页眉页脚的全局宽度变量 */
:root {
    --global--content-size: 87rem;
}

/* 覆盖文章、页面、列表页主容器宽度限制 */
main#primary,
.singular .entry-header,
.singular .entry-content,
.blog .site-main > article,
.archive .site-main > article {
    max-width: var(--global--content-size) !important;
    width: calc(100% - 8rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 解除内容区内部默认元素的宽度限制 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 100% !important;
    width: 100% !important;
}

实现效果参考：

异常排查 #

如果配置后仍未生效，可逐一检查以下项：

• 确认子主题style.css加载顺序在父主题样式之后，避免被父主题规则覆盖
• 检查是否存在其他自定义CSS规则与上述代码冲突
• 清空站点缓存、CDN缓存、浏览器缓存后重新测试

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