如何自定义WordPress编辑器样式

在本文中，我们将讨论一个我认为很多人都忽略的WordPress功能，即Editor Styles 。

在每个新版本中，它都引入了一些新功能或对现有功能进行了一些改进。

WordPress定期更新，每年大约更新2到3次。

前端的样式来自主题styles.css，而编辑器样式则由WordPress核心功能指定。

这是由于WordPress TinyMCE编辑器的内容样式与前端的样式完全不同的事实。

在3.0版（首次引入此功能）之前，您经常需要刷新页面才能在正面看到帖子的外观。

如下所示，WordPress编辑器使用Serif字体系列作为内容，而在前端使用Sans Serif字体。

让我们来看看。

在3.0版中，WordPress让您自定义编辑器样式以匹配您的主题样式。

添加编辑器样式功能

假设您将其命名为editor-style.css ，则可以在主题的functions.php文件中添加以下内容。

除了默认样式表之外，您需要为样式编辑器创建单独的样式表。

可以使用add_editor_style()函数添加编辑器样式。

add_editor_style('editor-style.css');

但是，如果您不确定要在此样式表中包含什么内容，请参考以下提示：

此样式表应仅包含帖子中元素的样式，如段落，标题，链接和图像。

下载诸如TwentyTen的WordPress默认样式之一，复制editor-style.css，然后可以自定义样式规则以匹配主题中的样式规则，并设置tinyMCE宽度，我们可以在样式表中添加以下内容：

html .mceContentBody {
	max-width: 640px;
	padding: 10px;
}

就是这样，您现在应该在编辑器中找到与前端类似的内容样式。

帖子类型的编辑器样式

例如，使用职位类型，您可以为产品或投资组合创建一个具有更多自定义字段集的字段。

默认情况下，WordPress允许您创建Page and Post。

在3.0版中，WordPress允许您创建帖子类型以保留不同的内容焦点。

要为您的帖子类型添加特定的编辑器样式，可以添加以下function.php。

function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type( $post->ID );
    $editor_style = 'editor-style-' . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );

如果您喜欢使用其他名称，只需更改$editor_style的值$editor_style 。

现在，在主题目录中，使用以下名称约定editor-style- {post_type} .css创建样式表。

有关更高级的实现，请访问WordPress.org Codex上的以下参考。

翻译自: https://www.hongkiat.com/blog/customize-wordpress-editor-styles/