WordPress函数文档add_editor_style()
发布于
by
文章编辑器添加一个自定义的CSS样式表 描述 Allows theme developers to link …
文章编辑器添加一个自定义的CSS样式表
描述
Allows theme developers to link a custom stylesheet file to the TinyMCE visual editor. The function tests for the existence of the relative path(s) given as the $stylesheet argument against the current theme directory and links the file(s) on success. If no $stylesheet argument is specified, the function will test for the existence of the default editor stylesheet file, editor-style.css, against the current theme directory, and link that file on success.
If a child theme is used, both the current child and parent theme directories are tested and both the files with the same relative path are linked with this single call if they are found.
To link a stylesheet file from a location other than the current theme directory, such as under your plugin directory, use a filter attached to the mce_css hook instead.
Note that the behavior of this function with respect to child themes was changed in Version 3.4 and changed back in Version 3.5, see the Notes section below.
用法
<?php add_editor_style( $stylesheet ); ?>
参数
$stylesheet
(string/array) (可选) Path to a stylesheet file, relative to the current theme directory, or an array thereof to link multiple stylesheet files.
默认值: “editor-style.css”
If a child theme is used, both the current child and parent theme directories are considered (see Description).
As of version 3.6, http or https URLs (e.g., http://example/style.css) can be used. Root-relative URLs will not work: e.g., /editor-style.css is treated the same as editor-style.css.
Paths with a query string (e.g., editor-style?ver=…) will fail to be added. You can work around that by using the equivalent http(s) URL, e.g. , http://example/editor-style.css?ver=…. (get_stylesheet_directory_uri() and home_url() can help you build “full” URLs.)
Call get_editor_stylesheets() to see which styles have been added.
返回值
(void)
This function does not return a value.
示例
Basic Usage
Add the following to the functions.php file of your theme.
|
1
2
3
4
5
6
7
8
9
|
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
<?php
function my_theme_add_editor_styles() {
add_editor_style( ‘custom-editor-style.css’ );
}
add_action( ‘admin_init’, ‘my_theme_add_editor_styles’ );
?>
|
Next, create a file named custom-editor-style.css in your themes root directory. Any CSS rules added to that file will be reflected within the TinyMCE visual editor. The contents of the file might look like this:
|
1
2
3
4
5
6
7
8
9
10
|
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
body#tinymce.wp-editor {
font–family: Arial, Helvetica, sans–serif;
margin: 10px;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}
|
Using Google Fonts
Google Fonts API provides a single URL for a CSS file that can include multiple variants of a type face, separated by commas. Commas in a URL need to be encoded before the string can be passed to add_editor_style.
|
1
2
3
4
5
6
7
8
9
10
|
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
<?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’ );
?>
|
Reusing Your Theme Styles
You can reuse the styles from your theme stylesheet file in your custom editor stylesheet file using the @import CSS rule. Working on the previous example, put the following instead into the custom-editor-style.css file.
|
1
2
3
4
5
6
|
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
@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; }
|
If necessary, change ‘style.css’ to the path to your theme stylesheet, relative to the custom-editor-style.css file.
Choosing Styles Based on Post Type
To link a custom editor stylesheet file based on the post type being edited, you can use the following in the functions.php file of your theme. This assumes the stylesheet files with names in the form of editor-style-{post_type}.css are present directly under your theme directory.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/* ———————————-
* wordpress函数 kim收集
* ———————————- */
<?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’ );
?>
|
Note that the pre_get_posts action hook is used to ensure that the post type is already determined but, at the same time, that TinyMCE has not been configured yet. That hook is not run when creating new posts, that is why we need to use it in combination with the init hook to achieve a consistent result.
注意
- As of Version 3.4, WordPress will link the stylesheet file only if its path determined by the $stylesheet argument passes the file_exists() test, so arguments like “editor.css?version=1.0” will not work. Prior to Version 3.4, this will apply only to child themes.
- In Version 3.4, using this function by a child theme to add a stylesheet file will not link the file if a stylesheet file on the same relative path was already added by a parent theme. As of Version 3.5, this was fixed and WordPress will look for the file in both the parent and child theme directories, as was the case before Version 3.4. See the ticket #21026 for details about these changes.
历史
- 添加于 版本: 3.0.0
源文件
add_editor_style() 函数的代码位于 wp-includes/theme.php.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* ———————————-
* 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 );
}
|
相关
- Intro: TinyMCE
- Tutorial: TinyMCE Custom Buttons
- Tutorial: Creating a Custom Style Dropdown
- Function(函数): add_editor_style()
- Filter(过滤器): mce_spellchecker_languages
- Filter(过滤器): mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4
- Filter(过滤器): mce_css
- Filter(过滤器): mce_external_plugins
- Filter(过滤器): mce_external_languages
- Filter(过滤器): tiny_mce_before_init
- Editor Style
Theme Support:
add_theme_support(),
remove_theme_support(),
current_theme_supports()
Theme Features:
sidebar,
menus,
post-formats,
title-tag,
custom-background,
custom-header,
post-thumbnails,
automatic-feed-links,
html5,
editor-style,
content_width
- 原文：http://codex.wordpress.org/Function_Reference/add_editor_style
类别：WordPress函数文档、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
评论功能已经关闭!