你想在WordPress可视化编辑器中添加自定义样式吗？ 添加自定义样式可以让您快速应用格式，而无需切换到文本编辑器。 在本文中，我们将向您展示如何将自定义样式添加到WordPress可视化编辑器。
注意： 本教程需要基本的CSS知识。
为什么和什么时候需要WordPress可视化编辑器的自定义样式
默认情况下，WordPress可视化编辑器带有一些基本的格式和样式选项。 但是，有时您可能需要自定义样式才能添加CSS按钮，内容块，标语等。
您可以随时从可视化文本编辑器切换到文本编辑器并添加自定义HTML和CSS。 但是，如果您经常使用某些样式，那么最好将它们添加到可视化编辑器中，以便您可以轻松地重用它们。
这将节省您在文本和可视化编辑器之间来回切换的时间。 它也将允许您在整个网站中始终使用相同的样式。
最重要的是，您可以轻松地调整或更新样式，而无需编辑您网站上的帖子。
话虽如此，让我们来看看如何在WordPress可视化编辑器中添加自定义样式。
方法1：使用插件在Visual Editor中添加自定义样式
首先你需要做的是安装和激活TinyMCE自定义样式插件。 更多细节
激活后，您需要访问 设置»TinyMCE自定义样式 页面配置插件设置。
该插件允许您选择样式表文件的位置。 它可以使用您的主题或儿童主题的样式表，或者您可以选择自己的自定义位置。
之后，您需要点击“保存所有设置”按钮来存储您的更改。
现在您可以添加自定义样式。 您需要向下滚动一下样式部分，然后单击添加新样式按钮。
首先，您需要输入风格的标题。 这个标题将显示在下拉菜单中。 接下来，您需要选择它是内联，块还是选择器元素。
之后，添加一个CSS类，然后添加您的CSS规则，如下面的截图所示。
一旦添加了CSS样式，只需点击“保存所有设置”按钮来存储您的更改。
您现在可以编辑现有的文章或创建一个新的文章。 您会注意到WordPress可视化编辑器第二行的“格式”下拉菜单。
只需在编辑器中选择一些文本，然后从“格式”下拉菜单中选择您的自定义样式即可应用它。
您现在可以预览您的帖子，看看您的自定义样式是否正确应用。
方法2：手动添加自定义样式到WordPress可视化编辑器
这种方法需要你手动添加代码到你的WordPress文件。 如果这是您第一次将代码添加到WordPress
第1步：在WordPress可视化编辑器中添加一个自定义样式下拉菜单
首先，我们将在WordPress可视化编辑器中添加一个格式下拉菜单。 这个下拉菜单将允许我们选择和应用我们的自定义样式。
您需要将以下代码添加到您的主题的functions.php文件或特定于站点的插件。
函数wpb_mce_buttons_2（$ buttons）{
array_unshift（$ buttons，'styleselect'）;
返回$按钮;
}
add_filter（'mce_buttons_2'，'wpb_mce_buttons_2'）;
第2步：添加选择选项下拉菜单
现在您需要将选项添加到您刚刚创建的下拉菜单中。 然后，您可以从“格式”下拉菜单中选择并应用这些选项。
为了本教程的目的，我们添加了三个自定义样式来创建内容块和按钮。
您将需要将以下代码添加到您的主题的functions.php文件或特定于站点的插件。
/ *
*回叫功能过滤MCE设置
* /
函数my_mce_before_init_insert_formats（$ init_array）{
//定义style_formats数组
$ style_formats = array（
/ *
*每个数组子都是一个具有自己设置的格式
*注意每个数组都有标题，块，类和包装参数
标题是将在格式菜单中可见的标签
*块定义是否是跨度，div，选择器或内联样式
*类允许你定义CSS类
*包装是否添加任何选定元素周围的新块级元素
* /
阵列（
'title'=>'内容区块'，
'block'=>'span'，
'classes'=>'content-block'，
'wrapper'=> true，
）
阵列（
'title'=>'蓝色按钮'，
'block'=>'span'，
'classes'=>'蓝色按钮'，
'wrapper'=> true，
）
阵列（
'title'=>'红色按钮'，
'block'=>'span'，
'classes'=>'红色按钮'，
'wrapper'=> true，
）
）;
//将数组JSON ENCODED插入到'style_formats'
$ init_array ['style_formats'] = json_encode（$ style_formats）;
返回$ init_array;
}
//将回调附加到“tiny_mce_before_init”
add_filter（'tiny_mce_before_init'，'my_mce_before_init_insert_formats'）;
现在，您可以在WordPress中添加新帖子，然后单击Visual编辑器中的“格式”下拉菜单。 您会注意到您的自定义样式现在可以在格式下看到。
但是，选择它们现在在帖子编辑器中没有任何区别。
第3步：添加CSS样式
现在最后一步是为您的自定义样式添加CSS样式规则。
您需要将此CSS添加到您的主题或子主题的style.css和editor-style.css文件中。
.content-block {
border：1px solid #eee;
填充：3px的;
背景：#CCC;
最大宽度：250像素;
浮动：权利;
文本对齐：中心;
}
.content-block：在{
明确：两者;
}
.blue-button {
背景色：＃33bdef;
-moz-边界半径：6像素;
-webkit-边界半径：6像素;
边界半径：6像素;
border：1px solid＃057fd0;
显示：内联块;
光标：指针;
颜色：#FFFFFF;
padding：6px 24px;
文字修饰：无;
}
.red-button {
背景色：＃bc3315;
-moz-边界半径：6像素;
-webkit-边界半径：6像素;
边界半径：6像素;
border：1px solid＃942911;
显示：内联块;
光标：指针;
颜色：#FFFFFF;
padding：6px 24px;
文字修饰：无;
}
编辑器样式表控制可视化编辑器中的内容的外观。 检查你的主题的文件，找出这个文件的位置。
如果你的主题没有编辑器样式表文件，那么你总是可以创建一个。 只需创建一个新的CSS文件并将其命名 定制主编的style.css 。
你需要将这个文件上传到你的主题的根目录，然后将这个代码添加到你的主题的functions.php文件中。
函数my_theme_add_editor_styles（）{
add_editor_style（'custom-editor-style.css'）;
}
add_action（'init'，'my_theme_add_editor_styles'）;
就这样。 您已成功将自定义样式添加到WordPress可视化编辑器中。 随意添加你自己的元素和风格来玩代码。