为WordPress的可视化编辑器添加样式实现实时预览

概述

开发定制的时候肯定会对文章内容的样式进行个性定制,但WordPress的可视化编辑器默认可不会载入你的样式,你需要为可视化编辑器载入你的自定义CSS样式,才可实现在可视化编辑器实时编辑实时预览。

实现方法

我们只需要在主题下的functions.php文件加入以下代码即可把主题的CSS样式文件挂载到WordPress的TinyMCE可视化编辑器

function dmeng_theme_add_editor_styles() {
add_editor_style('style.css');
}

add_action( 'init', 'dmeng_theme_add_editor_styles' );

以上是载入主题的style.css文件,如果还需要载入其他CSS文件,在代码中添加多一行即可,如

function dmeng_theme_add_editor_styles() {
add_editor_style('css/bootstrap.min.css');
add_editor_style('style.css');
}

add_action( 'init', 'dmeng_theme_add_editor_styles' );

原文链接:http://www.dmeng.net/wordpress-tinymce-css-style.html