如何向WordPress视觉编辑器添加自定义样式
你想在WordPress视觉编辑器中添加自定义样式吗？添加自定义样式可以让你在不切换到文本编辑器的情况下快速应用格式。在本文中，我们将向你展示如何将自定义样式添加到WordPress的视觉编辑器中。
为什么以及何时需要为WordPress视觉编辑器添加自定义样式
默认情况下，WordPress视觉编辑器提供一些基本的格式和样式选项。然而，有时你可能需要自己的自定义样式来添加CSS按钮、内容块、标语等。你可以随时从视觉编辑切换到文本编辑器并添加自定义HTML和CSS。但如果你经常使用某些样式，那么将它们添加到视觉编辑器中会更好，这样你就可以轻松地重复使用它们。这样可以节省你在视觉编辑器和文本编辑器之间来回切换的时间。此外，它还可以让你在整个网站中一致地使用相同的样式。最重要的是，你可以轻松调整或更新样式，而无需编辑网站上的文章。
方法1：使用插件在视觉编辑器中添加自定义样式
首先，你需要安装并激活TinyMCE Custom Styles插件。激活后，你需要访问设置 » TinyMCE Custom Styles页面来配置插件设置。插件允许你选择样式表文件的位置。它可以使用你的主题或子主题的样式表，或者你可以选择自己的自定义位置。之后，你需要点击“保存所有设置”按钮以存储更改。现在你可以添加你的自定义样式。你需要向下滚动一点到样式部分，然后点击“添加新样式”按钮。首先，你需要为样式输入一个标题。这个标题将在下拉菜单中显示。接下来，你需要选择它是内联、块还是选择器元素。之后，添加一个CSS类，然后添加你的CSS规则。
方法2：手动向WordPress视觉编辑器添加自定义样式
步骤1：在WordPress视觉编辑器中添加自定义样式下拉菜单
首先，我们将在WordPress视觉编辑器中添加一个格式下拉菜单。这个下拉菜单将允许我们选择并应用我们的自定义样式。你需要将以下代码添加到你的主题的functions.php文件或站点特定的插件中。
function wpb_mce_buttons_2($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'wpb_mce_buttons_2');步骤2：向下拉菜单添加选择项
现在你需要向刚刚创建的下拉菜单添加选项。这些选项可以在格式下拉菜单中选择和应用。对于本教程，我们添加了三个自定义样式来创建内容块和按钮。你需要将以下代码添加到你的主题的functions.php文件或站点特定的插件中。
function my_mce_before_init_insert_formats( $init_array ) { $style_formats = array( array( 'title' => '内容块', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true, ), array( 'title' => '蓝色按钮', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true, ), array( 'title' => '红色按钮', 'block' => 'span', 'classes' => 'red-button', 'wrapper' => true, ), ); $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } add_filter('tiny_mce_before_init', 'my_mce_before_init_insert_formats');步骤3：添加CSS样式
最后一步是为你的自定义样式添加CSS规则。你需要将这些CSS添加到你的主题或子主题的style.css和editor-style.css文件中。
.content-block { border:1px solid #eee; padding:3px; background:#ccc; max-width:250px; float:right; text-align:center; } .content-block:after { clear:both; } .blue-button { background-color:#33bdef; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #057fd0; display:inline-block; cursor:pointer; color:#ffffff; padding:6px 24px; text-decoration:none; } .red-button { background-color:#bc3315; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; padding:6px 24px; text-decoration:none; }编辑器样式表控制你在视觉编辑器中内容的外观。查看你的主题文档以找到这个文件的位置。如果你的主题没有编辑器样式文件，那么你可以创建一个。只需创建一个新的CSS文件并命名为custom-editor-style.css。你需要将这个文件上传到你的主题根目录，然后在你的主题的functions.php文件中添加此代码。
function my_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); } add_action('init', 'my_theme_add_editor_styles');就是这样。你已经成功地在WordPress视觉编辑器中添加了你的自定义样式。随意通过添加自己的元素和样式来玩转这个代码。我们希望这篇文章能够帮助你学习如何在WordPress视觉编辑器中添加自定义样式。
