文章编辑器添加一个自定义的CSS样式表
描述
允许主题开发人员将自定义样式表文件链接到TinyMCE可视化编辑器。该函数测试作为当前主题目录的$stylesheet参数给出的相对路径是否存在，并在成功时链接文件。如果未指定$stylesheet参数，则该函数将针对当前主题目录测试默认编辑器样式表文件（编辑器样式.css）是否存在，并在成功时链接该文件。
如果使用子主题，则会测试当前子主题目录和父主题目录，并且具有相同相对路径的两个文件将与此单个调用链接（如果找到）。
要从当前主题目录以外的位置（例如插件目录下）链接样式表文件，请改用附加到mce_css钩子的过滤器。
请注意，此函数相对于子主题的行为在 3.4 版中已更改，在 3.5 版中已更改回，请参阅下面的“注释”部分。
用法
<?php add_editor_style( $stylesheet ); ?> 参数
$stylesheet
(string/array) (可选) 相对于当前主题目录的样式表文件的路径，或其用于链接多个样式表文件的数
默认值: “editor-style.css”
如果使用子主题，则同时考虑当前子主题目录和父主题目录（请参阅说明）。
从版本 3.6 开始，可以使用 http 或 https URL（例如， http://example/style.css ）。根相对 URL 将不起作用：例如， /editor-style.css 被视为与 editor-style.css .
包含查询字符串（例如 editor-style?ver=… ）的路径将无法添加。您可以通过使用等效的 http（s） URL 来解决此问题，例如 . http://example/editor-style.css?ver=… （get_stylesheet_directory_uri（） 和 home_url（） 可以帮助您构建“完整”URL。
调用 get_editor_stylesheets（） 以查看添加了哪些样式。
返回值
(void)
此函数不返回值。
示例
基本用法
将以下内容添加到主题的functions.php文件中。
/* ———————————-
* wordpress函数 星空站长网收集
* ———————————- */
<?php
function my_theme_add_editor_styles() {
add_editor_style( ‘custom-editor-style.css’ );
}
add_action( ‘admin_init’, ‘my_theme_add_editor_styles’ );
?>接下来，在主题根目录中创建一个名为自定义编辑器样式.css的文件。添加到该文件的任何CSS规则都将反映在TinyMCE可视化编辑器中。该文件的内容可能如下所示：
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
body#tinymce.wp-editor {
font–family: Arial, Helvetica, sans–serif;
margin: 10px;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}使用谷歌字体
Google Fonts API 为 CSS 文件提供单个网址，该文件可以包含字体类型的多个变体，用逗号分隔。在将字符串传递给add_editor_style之前，需要对 URL 中的逗号进行编码。
/* ———————————-
* wordpress函数 XingkonGweb.com收集
* ———————————- */
<?php
function my_theme_add_editor_styles() {
$font_url = str_replace( ‘,’, ‘%2C’, ‘//fonts.useso.com/css?family=Lato:300,400,700’ );
add_editor_style( $font_url );
}
add_action( ‘after_setup_theme’, ‘my_theme_add_editor_styles’ );
?>重复使用您的主题样式
您可以使用 @import CSS 规则在自定义编辑器样式表文件中重用主题样式表文件中的样式。在上一个示例上，将以下内容改为放入自定义编辑器样式.css文件中。
/* ———————————-
* wordpress函数 星空站长网 收集
* ———————————- */
@import url( ‘style.css’ );
/* Add overwrites as needed so that the content of the editor field is attractive and not broken */
body { padding: 0; background: #fff; }如有必要，请将“style.css”更改为主题样式表的路径，相对于自定义编辑器样式.css文件。
根据帖子类型选择样式
要根据正在编辑的帖子类型链接自定义编辑器样式表文件，您可以在主题的函数.php文件中使用以下文件。这假设名称为编辑器样式-{post_type}.css形式的样式表文件直接存在于主题目录下。
/* ———————————-
* wordpress函数 星空站长网收集
* ———————————- */
<?php
function my_theme_add_editor_styles() {
global $post;
$my_post_type = ‘posttype’;
// New post (init hook).
if ( stristr( $_SERVER[‘REQUEST_URI’], ‘post-new.php’ ) !== false
&& ( isset( $_GET[‘post_type’] ) === true && $my_post_type == $_GET[‘post_type’] ) ) {
add_editor_style( get_stylesheet_directory_uri()
. ‘/css/editor-style-‘ . $my_post_type . ‘.css’ );
}
// Edit post (pre_get_posts hook).
if ( stristr( $_SERVER[‘REQUEST_URI’], ‘post.php’ ) !== false
&& is_object( $post )
&& $my_post_type == get_post_type( $post->ID ) ) {
add_editor_style( get_stylesheet_directory_uri()
. ‘/css/editor-style-‘ . $my_post_type . ‘.css’ );
}
}
add_action( ‘init’, ‘my_theme_add_editor_styles’ );
add_action( ‘pre_get_posts’, ‘my_theme_add_editor_styles’ );
?>请注意，pre_get_posts操作挂钩用于确保已经确定了帖子类型，但同时尚未配置 TinyMCE。创建新帖子时不会运行该钩子，这就是为什么我们需要将其与 init 钩子结合使用以实现一致的结果。
注意
从版本3.4开始，只有当$stylesheet参数确定的路径通过file_exists（）测试时，WordPress才会链接样式表文件，因此像“editor.css？version=1.0”这样的参数将不起作用。在版本 3.4 之前，这仅适用于子主题。
在 V3.4 中，如果父主题已添加相同相对路径上的样式表文件，则子主题使用此函数添加样式表文件将不会链接该文件。从版本3.5开始，此问题已修复，WordPress将在父主题和子主题目录中查找该文件，就像版本3.4之前的情况一样。有关这些更改的详细信息，请参阅票证 #21026。
历史
添加于 版本: 3.0.0
源文件
add_editor_style() 函数的代码位于 wp-includes/theme.php.
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
/**
* Add callback for custom TinyMCE editor stylesheets.
*
* The parameter $stylesheet is the name of the stylesheet, relative to
* the theme root. It also accepts an array of stylesheets.
* It is optional and defaults to ‘editor-style.css’.
*
* This function automatically adds another stylesheet with -rtl prefix, e.g. editor-style-rtl.css.
* If that file doesn’t exist, it is removed before adding the stylesheet(s) to TinyMCE.
* If an array of stylesheets is passed to add_editor_style(),
* RTL is only added for the first stylesheet.
*
* Since version 3.4 the TinyMCE body has .rtl CSS class.
* It is a better option to use that class and add any RTL styles to the main stylesheet.
*
* @since 3.0.0
*
* @global array $editor_styles
*
* @param array|string $stylesheet Optional. Stylesheet name or array thereof, relative to theme root.
* Defaults to ‘editor-style.css’
*/
function add_editor_style( $stylesheet = ‘editor-style.css’ ) {
add_theme_support( ‘editor-style’ );
if ( ! is_admin() )
return;
global $editor_styles;
$editor_styles = (array) $editor_styles;
$stylesheet = (array) $stylesheet;
if ( is_rtl() ) {
$rtl_stylesheet = str_replace(‘.css’, ‘-rtl.css’, $stylesheet[0]);
$stylesheet[] = $rtl_stylesheet;
}
$editor_styles = array_merge( $editor_styles, $stylesheet );
}