看看您的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主题中看到一个有关如何使用格式的示例，以便用户可以轻松地将清单外观应用于编辑器中的任何项目符号。

因此，现在您可以使用自定义格式，但是在您向网站添加一些自定义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可视编辑器

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

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

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

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

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

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

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

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

结论

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

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

---

---

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