如何在WordPress经典编辑器中无需插件为指定文章添加专属CSS样式

方案1：借助WordPress自带的页面类统一管理样式 #

• 先获取目标内容的ID：进入后台文章/页面列表，鼠标悬浮在目标内容标题上，浏览器状态栏会显示类似post=123的参数，数字部分就是对应内容的ID
• 进入后台「外观」-「主题文件编辑器」，优先选择子主题的style.css文件（避免后续主题更新覆盖自定义样式）
• 按照规则编写专属CSS即可，文章的专属类为.postid-XXX，独立页面的专属类为.page-id-XXX，示例代码如下：

/* 给ID为123的文章自定义排版 */
.postid-123 .entry-content p {
    font-size: 16px;
    line-height: 1.8;
    text-indent: 2em;
    margin-bottom: 15px;
}
.postid-123 .custom-card {
    background: #f5f7fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #409eff;
}

/* 给ID为45的独立页面自定义排版 */
.page-id-45 .entry-title {
    text-align: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 30px;
}

• 保存样式文件后刷新对应页面即可生效，该方案优势是所有自定义样式统一管理，修改调试效率高。

方案2：直接在内容中嵌入style标签 #

• 打开经典编辑器，切换到「文本」编辑模式（不要用可视化模式）
• 在内容的头部或者尾部直接插入<style>标签，写入需要的自定义CSS即可，示例如下：

<style>
.custom-heading {
    color: #2c3e50;
    font-weight: 700;
    margin: 30px 0 15px;
}
.highlight-note {
    background: #fff3cd;
    padding: 3px 6px;
    border-radius: 3px;
    color: #856404;
}
</style>

• 后续在可视化编辑模式下，给需要特殊排版的内容添加对应类名即可生效，该方案优势是样式和内容绑定，就算迁移站点、导出内容，样式也不会丢失。

注意：部分安全配置严格的站点可能会过滤前台输出的style标签，如果出现样式不生效的情况，可更换为其他方案。

方案3：通过自定义字段存储专属CSS #

• 打开经典编辑器右上角的「显示选项」，勾选「自定义字段」，让自定义字段模块显示在编辑器下方
• 新增自定义字段，名称填写custom_css，值的位置直接填写需要的CSS代码（不需要加style标签）
• 进入主题文件编辑器，打开当前主题的functions.php文件，添加如下代码，让系统自动把自定义字段的CSS输出到页头：

add_action('wp_head', function() {
    if (is_singular()) {
        global $post;
        $custom_css = get_post_meta($post->ID, 'custom_css', true);
        if ($custom_css) {
            echo '<style type="text/css">' . esc_html($custom_css) . '</style>';
        }
    }
});

• 配置完成后，只需要在对应文章/页面的自定义字段中填写CSS即可，不需要手动插入style标签，也不会被编辑器误操作删除样式。

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