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

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

看一下您的WordPress可视编辑器。有一些用于格式化和样式化内容的标准选项,但在自定义方面却不多,可以使您的帖子和页面看起来真的很漂亮.


WordPress编辑器

现在,您可能已经知道您可以在WordPress的文本编辑器和可视编辑器之间来回跳转,以添加一些CSS来创建按钮和文本块之类的东西,但这很痛苦,如果您没有丰富的代码编辑经验,文本编辑器似乎有些吓人.

如果您可以创建自己的自定义样式,将其放置在WordPress编辑器中的下拉菜单中,然后在需要时选择使用它们,是否会更容易?是的,这很容易,所以我们想在这里概述如何做。请记住,尽管我们正在尝试使此过程尽可能简单,但是如果您想了解自定义样式的全部好处,则有助于掌握一些CSS知识。.

让我们看一下如何向WordPress视觉编辑器中添加自定义样式.

通过添加代码将自定义样式添加到WordPress可视编辑器

第一个选项要求您稍微了解如何合并和修改CSS,但是我将为您提供一些逐步的帮助以帮助您学习基础知识,以便将来使用这些知识。如果您不想使用插件来减轻网站负担,这是一个不错的选择.

这样做的目的是在WordPress可视化编辑器中添加一个包含自定义样式的新下拉菜单,使您能够在编辑器中选择元素,然后将自定义样式应用于它们。如果您正在开发新主题,请找到 functions.php 文件,然后将以下代码放入该文件中,或者如果您正在使用已构建的主题,请将此代码粘贴到子主题的functions.php文件中.

函数myprefix_mce_buttons_1($ buttons){
array_unshift($ buttons,'styleselect');
返回$ buttons;
}

add_filter('mce_buttons_1','myprefix_mce_buttons_1');

回到您的WordPress帖子之一中的编辑器,现在您应该在编辑器的第一行中看到一个新的“格式”按钮。请注意,我们是如何迷上“ mce_buttons_1”的?这会将格式菜单按钮放在mce编辑器的第一行中。您也可以使用“ mce_buttons_2”过滤器将其放置在第二行中,或者使用“ mce_buttons_3”将其放置在第三行中.

因此,既然您已经启用了菜单项,那么该是时候添加自定义样式以在帖子中使用了。使用下面列出的代码并将其粘贴到您的 functions.php 文件,它将在“格式”下拉菜单中添加2种新样式-“主题按钮”和“突出显示”.

/ **
*将自定义样式添加到mce格式下拉列表中
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
函数myprefix_add_format_styles($ init_array){
$ style_formats =数组(
//每个数组子元素都是一种具有自己设置的格式-根据需要添加任意数量
数组(
'title'=> __('Theme Button','text-domain'),//下拉标题
'selector'=>'a',//编辑器中要定位的元素
'classes'=>'theme-button'//用于CSS的类名
),
数组(
'title'=> __('Highlight','text-domain'),//下拉标题
'inline'=>'span',//将跨度环绕所选内容
'classes'=>'text-highlight'//用于CSS的类名
),
);
$ init_array ['style_formats'] = json_encode($ style_formats);
返回$ init_array;
}
add_filter('tiny_mce_before_init','myprefix_add_format_styles');

您可以更改标题以在下拉菜单中显示不同的名称,从数组中添加/删除项目等。您可以修改此代码中的几乎任何内容以显示自己的自定义格式样式,请务必查看 WordPress Codex 有关接受的参数和返回值的更深入的说明.

现在您有了新样式,可以在编辑器中突出显示内容并应用样式。请注意,“主题按钮”格式如何具有选择器参数?这意味着样式只能应用于特定的选择器(在这种情况下为“ a”或“ link”标签)。我们添加的第二种格式“Highlight”没有选择器参数,而是“内联”参数,它告诉它将样式应用于您在编辑器中突出显示的任何文本,并将其包装在具有唯一类名的span中。您可以从Total WordPress主题中看到一个示例,该示例说明了如何使用格式,以便用户可以轻松地将清单外观应用于编辑器中的任何项目符号.

检查清单

因此,现在您可以使用自定义格式,但是在您向网站添加一些自定义CSS样式之前,它们看起来不会有所不同。您应该找到您的主题(如果自己构建)或子主题的样式表,然后将以下CSS代码粘贴到文件中.

.主题按钮{
显示:inline-block;
填充:10 15px;
颜色:#fff;
背景:#1796c6;
文字修饰:无;
}
.主题按钮:悬停{
文字修饰:无;
不透明度:0.8;
}
.文字突出显示{
背景:#FFFF00;
}

现在,这将为您的前端新格式添加样式,以便在应用时可以实时看到它们。好极了!但是,在应用样式时也可以在实际的编辑器中看到样式不是很好吗?为此,您将需要使用WordPress中的“编辑器样式表”功能。如果您要构建自己的主题,则需要使用自定义CSS在主题中创建一个名为“ editor-style.css”的新css文件(您可以随意命名,只要确保相应地编辑下面的代码段即可)。为您的格式添加,然后添加以下功能以将其加载到后端.

函数myprefix_theme_add_editor_styles(){
add_editor_style('editor-style.css');
}
add_action('init','myprefix_theme_add_editor_styles');

如果您正在使用其他人的主题,则需要在您的子主题中添加此主题,只需确保为其指定一个唯一的名称,这样就不会与您的父主题冲突,或者您的父主题已经有一个CSS文件编辑器,您实际上可以将其复制并粘贴到您的子主题中(不添加上面的PHP代码),然后添加您的新CSS,因为WordPress会在加载父主题的编辑器CSS文件之前首先检查子主题,如果找到它,它将从子主题加载它.

使用漂亮的插件将自定义样式添加到WordPress可视编辑器

如果您没有时间使用代码,或者无法自己弄清楚代码,那么有个好消息。有一个插件可以让您完全完成上述操作,而无需花很多时间在代码上.

TinyMCE自定义样式插件

只需搜索,安装并激活 TinyMCE自定义样式插件 并在您的WordPress网站上激活它.

TinyMCE自定义样式设置

设置> TinyMCE专业样式 在WordPress资讯主页的左侧。在这里您可以修改插件的设置.

TinyMCE自定义样式设置

该插件可让您选择样式表的位置或放置样式表的位置。建议您创建一个新的自定义目录。选择第三个选项并给目录命名,然后向下移动页面以单击 保存设置 进行下一步之前.

TinyMCE自定义样式添加新

保存设置后,向下滚动以选择添加新样式按钮.

TinyMCE自定义样式选项

在这里,您可以自定义想要的自定义样式。它基本上是一个简单的基于网络的编辑器,可以为您生成CSS代码。在下拉菜单中输入想要显示的标题。选择是否要选择器,内联或块类型。可以随意使用上面的屏幕快照来填写CSS类和样式,或者根据下拉菜单的计划创建自己的CSS类和样式。完成后,点击页面底部的保存设置.

TinyMCE自定义样式格式

现在是时候查看新的自定义样式在编辑器中的外观了。打开一个新帖子或页面,然后在Visual编辑器的左侧找到Formats下拉菜单。它显示在第二行。单击下拉菜单后,它将显示您刚刚创建的新样式.

TinyMCE自定义样式格式正在使用

单击大蓝色按钮选项或您创建的任何内容,以在编辑器中查看它。要使用它,只需突出显示要设置格式的文本,然后单击您的选项并瞧瞧!

结论

目前为止就这样了!您可以随时通过以下方式了解更多有关如何使用新样式的信息: WordPress Codex页面 致力于这个话题.

如果您对如何向WordPress可视编辑器添加自定义样式有任何疑问,请在评论部分让我们知道。并随时分享您创建的任何不寻常样式,以使您的网站看起来更好看!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map