WordPress如何调整页面布局

1. 进入WordPress后台，在「外观」里找到「主题编辑器」。别慌，这里能直接改代码，但建议先搞个子主题备份，不然更新主题时改动全丢。比如在style.css里加段自定义间距代码：

.page-content {
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

2. 用页面构建器更省事。像Elementor或者Gutenberg区块编辑器，拖拽就能调布局。比如想弄两栏布局，在Gutenberg里加个「栏目」区块，调整比例像这样：

<!-- wp:columns -->
<div class="147a-90ee-6fad-e09e wp-block-columns">
    <!-- wp:column {"width":"66.66%"} -->
    <div class="90ee-6fad-e09e-9942 wp-block-column" style="flex-basis:66.66%">左侧内容</div>
    <!-- /wp:column -->
    <!-- wp:column {"width":"33.33%"} -->
    <div class="6fad-e09e-9942-1934 wp-block-column" style="flex-basis:33.33%">右侧边栏</div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

3. 有时候CSS Flexbox能快速解决对齐问题。比如让页脚元素自动均匀排列：

.footer-widgets {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

4. 改响应式布局记得加媒体查询。手机端把两栏变单栏：

@media screen and (max-width: 768px) {
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

5. 自定义CSS的入口在「外观-自定义-额外CSS」，这里改代码即时预览不怕崩站。比如调个诡异背景色实验：

body {
    background: linear-gradient(45deg, #ffcccc, #ccffcc);
}

最后记住，改布局就是和浏览器渲染较劲，多按F12检查元素，边调边看效果。别死磕代码，有时候换个主题比硬改更高效。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。