如何为WordPress文章添加CSS实现段落边框盒效果？

嘿，我完全懂你的需求——看到同主题的站点用pre类实现了舒服的代码样式，想在自己的WordPress文章编辑界面里不用折腾就能快速插入对吧？下面给你几个实用的解决办法：

1. 编辑器快速插入方案（零基础友好版） #

如果你用的是古腾堡编辑器（WordPress默认新编辑器） #

• 打开文章编辑页，点击左上角的「+添加块」，搜索「代码」块并添加
• 选中这个代码块，右侧打开「设置」面板，找到「高级」选项，在「额外CSS类」里填入pre（如果原站点的pre是带自定义类名的，就填对应名称）
• 搞定！这个代码块会自动套用你看到的那套样式

如果你还在使用经典编辑器 #

• 切换到「文本模式」，直接粘贴这段代码模板：

<pre class="pre">
// 这里替换成你的代码内容
</pre>

• 可以把这段模板存成一个快捷笔记，下次直接复制粘贴，切换回可视化模式就能看到样式效果

2. 让所有pre标签自动生效（一劳永逸版） #

首先确认你的主题里已经加载了目标CSS样式（就是你从站点源码里拿到的这段），如果还没添加，把这段代码放进主题的「自定义CSS」里：

pre { 
    font-family: Open Sans; 
    font-weight: 400; 
    display: block; 
    font-size: 13px; 
    white-space: pre; 
    white-space: pre-wrap; 
    border: 1px solid #ededed; 
    background: #FCFCFC; 
    -webkit-box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
    /* 记得补全原代码里省略的box-shadow属性值哦 */
}

添加完成后，所有<pre>标签都会自动套用这个样式，你在编辑器里直接插入代码块或者写<pre>标签就行，不用手动加类名了。

3. 自定义编辑器快捷按钮（高效进阶版） #

如果想进一步提升效率，可以给编辑器加个一键插入的按钮：

• 古腾堡编辑器：安装类似「Custom Block Style」的插件，创建一个绑定了目标CSS类的自定义代码块样式，之后点击就能快速插入带样式的代码块
• 经典编辑器：可以用「TinyMCE Advanced」这类插件，添加自定义按钮，点击直接插入带指定类的<pre>标签；有基础PHP知识的话，也可以修改主题functions.php文件自定义按钮功能

这样操作下来，你就能在文章创建界面轻松插入想要的pre样式啦！

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