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

   2025-07-15 admin00110

您想在wordpress可视化编辑器中添加自定义样式吗?添加自定义样式使您可以快速应用格式,而无需切换到文本编辑器。在本文中,我们将向您展示如何向wordpress可视化编辑器添加自定义样式。

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

为什么以及何时需要WordPress可视化编辑器的自定义样式

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

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

这将节省您在文本和可视化编辑器之间来回切换所花费的时间。它还允许您在整个网站上一致地使用相同的样式。

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

说了这么多,我们来看看如何在WordPress可视化编辑器中添加自定义样式。

方法一:使用插件在可视化编辑器中添加自定义样式

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

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

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

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

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

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

之后添加CSS类,然后添加CSS规则,如下面的屏幕截图所示。

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

您现在可以编辑现有帖子或创建新帖子。您会注意到WordPress可视化编辑器第二行中有一个“格式”下拉菜单。

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

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

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

此方法需要您手动将代码添加到WordPress文件中。如果这是您第一次向WordPress添加代码,请参阅我们的有关从Web添加代码片段到WordPress的指南。

第1步:在WordPress可视化编辑器中添加自定义样式下拉菜单

首先,我们将在WordPress可视化编辑器中添加一个格式下拉菜单。然后,此下拉菜单将允许我们选择并应用我们的自定义样式。

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

编辑器样式表控制可视化编辑器中内容的外观。检查主题的文档以找出该文件的位置。

如果您的主题没有编辑器样式表文件,那么您始终可以创建一个。只需创建一个新的CSS文件并将其命名custom-editor-style.css。

您需要将此文件上传到主题的根目录,然后将此代码添加到主题的functions.php文件中。

functionmy_theme_add_editor_styles(){add_editor_style('custom-editor-style.css');}add_action('init','my_theme_add_editor_styles');
 
举报收藏 0打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  RSS订阅
Powered By DESTOON