WordPress定期更新,每年大约更新2到3次。 在每个新版本中,它都引入了一些新功能或对现有功能进行了一些改进。 在本文中,我们将讨论一个我认为很多人都忽略的WordPress功能,即Editor Styles 。
在3.0版(首次引入此功能)之前,您经常需要刷新页面以查看正面的外观。 这是由于WordPress TinyMCE编辑器的内容样式与前端的样式完全不同的事实。 前端的样式来自主题styles.css,而编辑器样式则由WordPress核心功能指定。
如下所示,WordPress编辑器使用Serif字体系列作为内容,而在前端使用Sans Serif字体。
![](https://i-blog.csdnimg.cn/blog_migrate/afbea0c3ba11ce04b51e0501fe0fda1f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/afbea0c3ba11ce04b51e0501fe0fda1f.png)
在3.0版中,WordPress让您自定义编辑器样式以匹配您的主题样式。 让我们来看看。
添加编辑器样式功能
可以使用add_editor_style()
函数添加编辑器样式。 除了默认样式表之外,您需要为样式编辑器创建单独的样式表。 假设您将其命名为editor-style.css ,则可以在主题的functions.php文件中添加以下内容。
add_editor_style('editor-style.css');
此样式表应仅包含帖子中元素的样式,如段落,标题,链接和图像。 但是,如果您不确定要在此样式表中包含什么内容,请参考以下提示:
下载诸如TwentyTen的WordPress默认样式之一,复制editor-style.css,然后可以自定义样式规则以匹配主题中的样式规则,并设置tinyMCE宽度,我们可以在样式表中添加以下内容:
html .mceContentBody {
max-width: 640px;
padding: 10px;
}
就是这样,您现在应该在编辑器中找到与前端类似的内容样式。
![](https://i-blog.csdnimg.cn/blog_migrate/7848d49ddaa7afadd0abcc46a539032d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7848d49ddaa7afadd0abcc46a539032d.png)
帖子类型的编辑器样式
在3.0版中,WordPress允许您创建帖子类型以容纳不同的内容焦点。 默认情况下,WordPress允许您创建Page and Post。 例如,使用职位类型,您可以为产品或投资组合创建一个具有更多自定义字段集的字段。
要为您的帖子类型添加特定的编辑器样式,可以添加以下functions.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- {post_type} .css创建样式表。 如果您希望使用其他名称,只需更改$editor_style
的值$editor_style
。
有关更高级的实现,您可以转到WordPress.org Codex上的以下参考。
翻译自: https://www.hongkiat.com/blog/customize-wordpress-editor-styles/