如何将自定义样式添加到WordPress可视编辑器

2020-08-20
WordPress行业动态

您是否要在WordPress视觉编辑器中添加自定义样式？添加自定义样式使您无需切换到文本编辑器即可快速应用格式。在本文中，我们将向您展示如何向WordPress可视编辑器中添加自定义样式。

注意：本教程需要CSS的基本工作知识。

为什么以及何时需要WordPress Visual Editor的自定义样式

默认情况下，WordPress 可视编辑器附带一些基本的格式和样式选项。但是，有时您可能需要自己的自定义样式来添加CSS按钮，内容块，标语等。

您始终可以从视觉编辑器切换到文本编辑器，并添加自定义HTML和CSS。但是，如果您经常使用某些样式，则最好将它们添加到可视化编辑器中，以便您可以轻松地重用它们。

这样可以节省您在文本和可视编辑器之间来回切换的时间。它还将允许您在整个网站中始终使用相同的样式。

最重要的是，您可以轻松地调整或更新样式，而无需编辑网站上的帖子。

话虽如此，让我们看一下如何在WordPress可视编辑器中添加自定义样式。

方法1：使用插件在Visual Editor中添加自定义样式

您需要做的第一件事是安装并激活TinyMCE自定义样式插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»TinyMCE自定义样式页面来配置插件设置。

该插件允许您选择样式表文件的位置。它可以使用您的主题或子主题的样式表，也可以选择自己的自定义位置。

之后，您需要单击“保存所有设置”按钮来存储您的更改。

现在，您可以添加自定义样式。您需要向下滚动到样式部分，然后单击添加新样式按钮。

首先，您需要输入样式的标题。该标题将显示在下拉菜单中。接下来，您需要选择它是内联元素，块元素还是选择器元素。

之后，添加一个CSS类，然后添加您的CSS规则，如下面的屏幕快照所示。

添加CSS样式后，只需单击“保存所有设置”按钮以存储您的更改。

现在，您可以编辑现有帖子或创建新帖子。您会在WordPress可视编辑器的第二行中看到格式下拉菜单。

只需在编辑器中选择一些文本，然后从“格式”下拉菜单中选择您的自定义样式即可应用它。

现在，您可以预览您的帖子，以查看您的自定义样式已正确应用。

方法2：手动将自定义样式添加到WordPress可视编辑器

此方法要求您手动将代码添加到WordPress文件中。如果这是您第一次向WordPress添加代码，请参阅我们的指南，以将网络中的代码片段添加到WordPress中。

步骤1：在WordPress视觉编辑器中添加自定义样式下拉菜单

首先，我们将在WordPress可视编辑器中添加“格式”下拉菜单。然后，该下拉菜单将允许我们选择并应用自定义样式。

您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。

functionwpb_mce_buttons_2($buttons) { array_unshift($buttons, 'styleselect'); return$buttons;}add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

步骤2：添加选择选项以下拉菜单

现在，您需要将选项添加到刚创建的下拉菜单中。然后，您将能够从格式下拉菜单中选择并应用这些选项。

为了本教程的缘故，我们添加了三种自定义样式来创建内容块和按钮。

您将需要在主题的functions.php文件或特定于站点的插件中添加以下代码。

/** Callback function to filter the MCE settings*/
functionmy_mce_before_init_insert_formats( $init_array) {
// Define the style_formats array
$style_formats= array( /** Each array child is a format with it's own settings* Notice that each array has title, block, classes, and wrapper arguments* Title is the label which will be visible in Formats menu* Block defines whether it is a span, div, selector, or inline style* Classes allows you to define CSS classes* Wrapper whether or not to add a new block-level element around any selected elements*/ array( 'title'=> 'Content Block', 'block'=> 'span', 'classes'=> 'content-block', 'wrapper'=> true, ), array( 'title'=> 'Blue Button', 'block'=> 'span', 'classes'=> 'blue-button', 'wrapper'=> true, ), array( 'title'=> 'Red Button', 'block'=> 'span', 'classes'=> 'red-button', 'wrapper'=> true, ), ); // Insert the array, JSON ENCODED, into 'style_formats' $init_array['style_formats'] = json_encode( $style_formats); return$init_array; } // Attach callback to 'tiny_mce_before_init' add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats');

现在，您可以在WordPress中添加新帖子，然后在可视化编辑器中单击“格式”下拉菜单。您会注意到，自定义样式现在在格式下可见。

但是，选择它们现在在帖子编辑器中没有任何区别。

步骤3：添加CSS样式

现在，最后一步是为您的自定义样式添加CSS样式规则。

您将需要将此CSS添加到主题或子主题的style.css和editor-style.css文件中。

.content-block{ border:1pxsolid#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:1pxsolid#057fd0; display:inline-block; cursor:pointer; color:#ffffff; padding:6px24px; text-decoration:none;}
.red-button { background-color:#bc3315; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1pxsolid#942911; display:inline-block; cursor:pointer; color:#ffffff; padding:6px24px; text-decoration:none;}