2025年5月31日

优化WordPress文章模板: PC与移动端响应式布局

背景

文章在电脑上看通常没问题。但在手机上，如果内容层级多，比如列表、引用嵌套，缩进一多，实际文字显示区域就变窄，影响阅读。

目标

让文章在电脑和手机上都有合适的阅读宽度，特别是优化手机端多层级内容的显示。

思路

给文章内容区块（通常是主题模板里的“内容”或“文章内容”区块）添加一个自定义CSS类。
通过CSS，针对这个类编写样式：
- 为PC端设置一个最大阅读宽度，使其居中。
- 使用媒体查询，在移动端（小屏幕）调整布局，特别是减少列表、引用的缩进。

操作步骤

一、添加自定义CSS类

进入WordPress后台：外观 > 编辑器。
打开你的“单篇文章”模板（或类似名称的模板）。
在模板编辑视图中，选中承载文章主要内容的区块。通常是名为“内容”（Post Content）的区块。
在右侧的区块设置面板，找到“高级”（Advanced）选项卡。
在“额外的CSS类”（Additional CSS class(es)）字段中，输入一个自定义类名，例如：
single-post-responsive-layout

二、编写CSS样式

将以下CSS代码添加到站点自定义CSS中。路径：外观 > 编辑器 > （右侧边栏）样式图标（通常是半月形或调色板） > 右上角“…”菜单 > 额外CSS。

/* --- 基础及PC端样式 --- */
.single-post-responsive-layout {
    /* PC端内容最大宽度，根据喜好调整，如720px, 800px等 */
    /* 若主题本身对内容宽度控制得很好，此项可酌情调整或省略 */
    max-width: 800px;
    margin-left: auto;  /* 水平居中 */
    margin-right: auto;
    padding-left: 20px; /* PC端左右内边距 */
    padding-right: 20px;
    box-sizing: border-box; /* 推荐，便于宽度计算 */
}

/* PC端列表、引用、代码块等样式 (通常主题已有良好默认，按需调整) */
.single-post-responsive-layout ul,
.single-post-responsive-layout ol {
    /* padding-left: 2em; */ /* PC端默认缩进，若不满意可调整 */
}

.single-post-responsive-layout blockquote {
    /* margin: 1.5em 40px; */
    /* padding: 10px 20px; */
    /* border-left: 4px solid #ccc; */
}

.single-post-responsive-layout pre,
.single-post-responsive-layout .wp-block-code code { /* 兼容区块编辑器代码块 */
    padding: 15px;
    overflow-x: auto; /* 长代码允许横向滚动 */
    white-space: pre;
    background-color: #f5f5f5; /* 示例背景色 */
    border-radius: 4px;
    font-size: 0.9em; /* 示例代码字体大小 */
}

/* --- 移动端调整 (平板和手机) --- */
@media (max-width: 768px) {
    .single-post-responsive-layout {
        max-width: none; /* 移除PC端的最大宽度限制 */
        width: 100%;     /* 内容区占满父容器宽度 */
        padding-left: 15px;  /* 手机端左右内边距 */
        padding-right: 15px;
    }

    /* 解决列表缩进问题 */
    .single-post-responsive-layout ul,
    .single-post-responsive-layout ol {
        padding-left: 20px; /* 大幅减少列表左内边距 */
    }

    .single-post-responsive-layout ul ul,
    .single-post-responsive-layout ol ol,
    .single-post-responsive-layout ul ol,
    .single-post-responsive-layout ol ul {
        padding-left: 15px; /* 嵌套列表，缩进更少 */
    }

    /* 解决引用缩进问题 */
    .single-post-responsive-layout blockquote {
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 10px;
        /* border-left-width: 3px; */ /* 可选：调整边框宽度 */
    }

    .single-post-responsive-layout blockquote blockquote {
        margin-left: 0;
        padding-left: 8px; /* 嵌套引用，缩进更少 */
    }

    .single-post-responsive-layout pre,
    .single-post-responsive-layout .wp-block-code code {
        padding: 10px;
        font-size: 0.85em; /* 手机端代码字体可稍小 */
    }

    /* 可选：调整移动端标题和段落字体大小 */
    .single-post-responsive-layout h1 { font-size: 1.8rem; }
    .single-post-responsive-layout h2 { font-size: 1.5rem; }
    .single-post-responsive-layout p,
    .single-post-responsive-layout li {
        font-size: 0.95rem;
        line-height: 1.65;
    }
}

/* --- 针对非常小的屏幕 (窄手机) --- */
@media (max-width: 480px) {
    .single-post-responsive-layout {
        padding-left: 10px; /* 进一步减少边距 */
        padding-right: 10px;
    }

    .single-post-responsive-layout ul,
    .single-post-responsive-layout ol {
        padding-left: 15px; /* 极小屏幕上列表缩进更少 */
    }

    .single-post-responsive-layout ul ul,
    .single-post-responsive-layout ol ol,
    .single-post-responsive-layout ul ol,
    .single-post-responsive-layout ol ul {
        padding-left: 10px;
    }

    .single-post-responsive-layout blockquote {
        margin-left: 0;
        padding-left: 8px;
    }

    .single-post-responsive-layout h1 { font-size: 1.6rem; }
    .single-post-responsive-layout p,
    .single-post-responsive-layout li { font-size: 0.9rem; }
}

注意事项

主题差异：不同主题对内容宽度、列表、引用的默认样式有差异。上述CSS中的PC端具体元素样式（如列表、引用的 padding）是示例。如果你的主题在PC端显示良好，可以注释或删除这些PC端的具体元素规则，仅保留 .single-post-responsive-layout 的基础布局（max-width, margin, padding）和移动端的媒体查询调整。
theme.json：对于区块主题（如Twenty Twenty-Three），很多全局布局和样式是通过 theme.json 文件控制的。这里提供的CSS方法是对用户层面更直接的补充和覆盖。
媒体查询断点：768px 和 480px 是常用的断点。可根据实际测试效果和主题的默认断点进行调整。
测试：修改后，务必在不同尺寸的设备（或使用浏览器开发者工具模拟）上测试文章页面的显示效果。
缓存：如果修改后未立即生效，尝试清除WordPress缓存插件、CDN缓存以及浏览器缓存。

总结

通过给内容区块添加自定义CSS类，并配合媒体查询，可以相对精确地控制文章内容在PC和移动设备上的布局和缩进，改善阅读体验。核心在于识别问题（移动端缩进过多），并针对性地在小屏幕下调整CSS属性。