17713433920 info@mac163.com

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

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

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

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

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

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

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

function myprefix_mce_buttons_1( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}

add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

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

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

/**
 * Add custom styles to the mce formats dropdown
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
function myprefix_add_format_styles( $init_array ) {
	$style_formats = array(
		// Each array child is a format with it's own settings - add as many as you want
		array(
			'title'    => __( 'Theme Button', 'text-domain' ), // Title for dropdown
			'selector' => 'a', // Element to target in editor
			'classes'  => 'theme-button' // Class name used for CSS
		),
		array(
			'title'    => __( 'Highlight', 'text-domain' ), // Title for dropdown
			'inline'   => 'span', // Wrap a span around the selected content
			'classes'  => 'text-highlight' // Class name used for CSS
		),
	);
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

您可以更改标题从阵列等你的下拉菜单中,添加/删除内容,以显示不同的名称,您可以修改任何事情在这个代码泄露自己的自定义格式样式,一定要检查出的WordPress的法典的对接受的参数和返回值的更深入的说明。

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

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

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

.theme-button {
	display: inline-block;
	padding: 10 15px;
	color: #fff;
	background: #1796c6;
	text-decoration: none;
}
.theme-button:hover {
	text-decoration: none;
	opacity: 0.8;
}
.text-highlight {
	background: #FFFF00;
}

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

function 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可视编辑器

如果您没有时间处理代码,或者无法自己搞清楚代码,那么有个好消息。有一个插件可以让您完全完成上面所做的事情,而不必花很多时间在代码上。

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

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

转到 WordPress信息中心左侧的设置> TinyMCE专业样式。在这里您可以修改插件的设置。

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

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

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

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

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

结论

目前为止就这样了!您可以随时查看有关此主题的WordPress Codex页面,以了解有关如何使用新样式的更多信息。

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


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部