改变WordPress 后台编辑器样式实现直接预览
在WordPress 3.0以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一个有趣的功能：在后台可视化编辑器模式下直接预览日志内容的编排，并且与前台浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能，默认主题Twenty Eleven功能强大，集成了众多WordPress新功能，到目前为止，我还未研究透，囧......喜欢折腾主题的童鞋不妨多研究一下。
打开默认主题Twenty Eleven的functions.php，会看到一句加了明确注释的代码：
add_editor_style();&&
注释的中文大概意思为：可视化编辑器与主题editor-style.css风格相匹配。
关键就是这句。下面以HotNews Pro主题为例，轻松实现这一功能。
首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，或者直接下载：，并放到HotNews Pro主题css目录中。
&&&&font:&13px&'Microsoft&YaHei',&微软雅黑,&Arial,&Lucida&Grande,&Tahoma,&sans-serif; &&
&&&&color:� &&
&&&&text-shadow:&0px&1px&0px&#d1d1d1; &&
&&&&width:&<font color="#ffpx; &&
&&&&list-style:&square&inside; &&
&&&&line-height:24px; &&
h1&{font-size:&18px;line-height:185%;} &&
h2&{font-size:&16px;line-height:185%;} &&
h3&{font-size:&14px;line-height:185%;} &&
ul,ol,dd,pre,hr&{ &&
&&&&margin:&0&0&10px&0; &&
&&&&line-height:185%; &&
&&&&text-indent:2 &&
&&&&margin:&0&0&10px&0; &&
blockquote&{ &&
&&&&width:&<font color="#ffpx; &&
&&&&color:&#4e6384; &&
&&&&line-height:&23px; &&
&&&&margin:&5px&auto&5px&auto; &&
&&&&padding:&10px; &&
&&&&clear:&both; &&
&&&&border:&1px&solid&#ccc; &&
&&&&width:&<font color="#ffpx; &&
&&&&font:&12px/17px&tahoma,&arial,&sans-serif; &&
&&&&color:&#4e6384; &&
&&&&display:&block; &&
&&&&margin:&5px&auto&5px&auto; &&
&&&&padding:&10px; &&
&&&&border-left:&3px&solid&#8391A7; &&
&&&&border-right:&1px&solid&#8391A7; &&
&&&&border-top:&1px&solid&#8391A7; &&
&&&&border-bottom:&1px&solid&#8391A7; &&
blockquote&td{ &&
&&&&border-bottom:&1px&solid&#ccc; &&
&&&&padding:&2px; &&
img.centered&&{ &&
&&&&display:&block; &&
&&&&margin-left:&auto; &&
&&&&margin-right:&auto; &&
&&&&margin-bottom:&10px; &&
img.alignnone&{ &&
&&&&margin:&0&0&10px&0; &&
&&&&display:&inline; &&
img.alignright&{ &&
&&&&margin:&0&0&10px&10px; &&
&&&&display:&inline; &&
img.alignleft&{ &&
&&&&margin:&0&10px&10px&0; &&
&&&&display:&inline; &&
.aligncenter&{ &&
&&&&display:&block; &&
&&&&margin-left:&auto; &&
&&&&margin-right:&auto; &&
&&&&margin-bottom:&10px; &&
.alignright&{ &&
&&&&float:&rightright; &&
&&&&margin:&0&0&10px&10px; &&
.alignleft&{ &&
&&&&float:&left; &&
&&&&margin:&0&10px&10px&0; &&
其次，打开HotNews Pro主题的functions.php模版文件，加入一句：
add_editor_style(&#39;/css/editor-style.css&#39;);&&
第三，没有第三了呵呵，全部改造成完成！
下图是在后台可视化编辑模式下的截图，看看是不是与前台别无二致。在即将发的HotNews Pro 2.7正式版中已集成该功能
由于后台编辑器与前台处于不同的样式框架中，所以如果你想改造其它主题，只需将主题style.css中与正文相关的样式复制出来，并去掉具体的选择器即可，比如我上面的样式代码，也可以参考默认主题Twenty Eleven中的editor-style.css，关键是要设置body的宽度与你的主题正文部分相同。博主录制的Python3爬虫视频教程已发布！详情请戳！希望大家支持！非常感谢！
> WordPress中去掉CSS文件后的参数，解决修改样式不生效的问题
一、移除主题中的样式版本号
在更新新版本之后，发现WordPress中的JS和CSS文件引入时带有ver参数，在浏览器中审查元素或者 F12 查看其引入的文件，就如图中一样，文件的末尾会带有一个这样的参数，这样带来的麻烦有很多。很大的问题就是 修改style.css 文件不生效，它带有这个参数的作用就会让浏览器加载缓存的 JS 和 CSS 文件，而你修改了样式之后它还是不会生效。
那么这个怎么去除？
找到你的主题文件中的 functions.php 文件
找到类似于下面的代码：
wp_register_script( 'jquery','//libs.baidu.com/jquery/1.8.3/jquery.min.js', false,'1.0');
wp_enqueue_script( 'jquery' );
wp_register_script( 'default', get_template_directory_uri() . '/js/jquery.js', false, '1.0', dopt('d_jquerybom_b') ? true : false );
wp_enqueue_script( 'default' );
wp_register_style( 'style', get_template_directory_uri() . '/style.css',false,'1.0');
wp_enqueue_style( 'style' );
wp_register_script( 'jquery','//libs.baidu.com/jquery/1.8.3/jquery.min.js', false,'1.0');wp_enqueue_script( 'jquery' );wp_register_script( 'default', get_template_directory_uri() . '/js/jquery.js', false, '1.0', dopt('d_jquerybom_b') ? true : false ); wp_enqueue_script( 'default' ); wp_register_style( 'style', get_template_directory_uri() . '/style.css',false,'1.0');wp_enqueue_style( 'style' );
你可以查找这几个函数名来找到。
你可以发现倒数第二行，引入了 style.css 文件，那么第四个参数就是罪魁祸首了，就是文件的版本号，把第四个参数修改为 null 即可，记住不要加引号的 null
wp_register_style( 'style', get_template_directory_uri() . '/style.css',false,null);
wp_register_style( 'style', get_template_directory_uri() . '/style.css',false,null);
这样刷新页面，你就会发现 style.css 样式表后面的参数就不见啦。
同样的道理，对于 JS文件，你同样可以通过修改第四个参数来解决问题。
二、移除主题之外样式版本号
除了主题之内的CSS和JS带有版本号，主题之外的界面也带有版本号，比如登录界面等等，如果你想定制一个个性化的登录界面，那么你可以修改 wp-admin 目录下的css样式。但是，修改完之后仍然存在不生效的问题。这个怎么办？
如下图所示，
审查该登录界面的元素，你会发现它的CSS样式仍然带有版本号，这会导致我们不管怎样修改 login.min.css 仍不会生效，那么我们就分析一下源代码。
我从 wp-admin 目录下找到了 load-styles.php 文件，它正是加载 CSS样式所必备的文件，但是和上面的主题中加载CSS文件的方式不同，它并不存在 wp_register_style 这个方法，不过我发现，它引入了一个 version.php 文件，代码如下：
require( ABSPATH . WPINC . '/version.php' );
require( ABSPATH . WPINC . '/version.php' );
那么它的路径在哪里，我们会发现 ABSPATH和 WPINC两个变量，这是两个宏定义
define( 'ABSPATH', dirname(dirname(__FILE__)) . '/' );
define( 'WPINC', 'wp-includes' );
define( 'ABSPATH', dirname(dirname(__FILE__)) . '/' );define( 'WPINC', 'wp-includes' );
顺藤摸瓜，我们找到了 wp-includes 目录下的 version.php 文件，其中就定义了版本号这个变量
$wp_version = '4.0.1';
$wp_version = '4.0.1';
根据上面的思路，我们只需要把 version 改成null即可，试一下。这个方法不算好，去掉版本号之后一些插件可能识别有问题，请谨慎修改。
$wp_version =
$wp_version = null;
再来审查一下元素，我们就已经发现，版本号的后缀不见啦。
我们之前修改的样式也已经生效了！如果还有更好的方法，欢迎补充！
以上只是我的一些拙见，希望对大家有帮助！
转载请注明： &
or分享 (0)
我的个人微信公众号，联系我请直接在公众号留言即可~
扫码或搜索：进击的Coder
进击的Coder
微信公众号
扫一扫关注
想结交更多的朋友吗?
来进击的Coder瞧瞧吧
进击的Coder
进击的Coder灌水太多?
这里是纯粹的技术领地
激进的Coder
您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请狠狠点击下面的为什么在WORDPRESS后台修改CSS文件后，毫无效果？_Wopus问答
为什么在WORDPRESS后台修改CSS文件后，毫无效果？
想给在用的主题换个LOGO和加大点字体但用WP后台编辑CSS后不起作用（我确定我代码正确，在本地搭建的WP一改就成功）最后忍不住用FPT把服务器上的LOGO图片替换掉，但还是没效果？求解。。
共有6个回答
确定主题的样式修改对了文件？在主题的修改界面可以选择其他主题的，注意一下所选的主题。
绝对没错啊。并且我把主机上的图片替换了 还是没效果
还有一个可能的原因是浏览器缓存，你用浏览器的时候，强制刷新，或是换一个浏览器打开看。
对有时浏览器缓存也会出现这个问题
用DW改，一般在后台改css不提示错误，可能一些小得符号之类的。
我也是这个问题啊，以前没有的，自从换了新的主机就这样了，在那台电脑都不能马上起作用，有时几分钟，有时要半天或者第二天。
做好事要留名，请先再回答，如果还没有帐户请先。WordPress TinyMCE编辑器定制方法总结 &#8211; ~SolagirL~Wordpress里改变style.css设置后 页面显示无变化_百度知道
Wordpress里改变style.css设置后 页面显示无变化
我刚开始学习使用WP
今天在练习修改WP自带默认主题时
发现在Style.css里修改的内容保存成功后
点击查看站点后显示的页面还是修改前的样子
再进入Style.css里显示的是修改后的代码
应该如何处理？
另在论坛里看了下类似问题的解答说是修改ftp权...
我有更好的答案
看看是不是被覆盖了,CSS显示是有优先策略的,权重的才能最终显示,权轻的是要被权重的覆盖的
采纳率：12%
建议改成px,不要%
你换下改变其它的东西呀,这个你都看不怎么出,还有就是你改变的样式本来就是无效的,你试着改变下index.php里面的块,去掉看是不是还有?
为您推荐：
其他类似问题
wordpress的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。