改变WordPress 后台编辑器样式实现直接预览

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 21:22 点击:

在WordPress 3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样式,实现一个有趣的功能:在后台可视化编辑器模式下直接预览日志内容的编排,并且与前台浏览样式保持一致 ,不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能,默认主题Twenty Eleven功能强大,集成了众多WordPress新功能,到目前为止,我还未研究透,囧......喜欢折腾WP主题的童鞋不妨多研究一下。

打开默认主题Twenty Eleven的functions.php,会看到一句加了明确注释的代码:

  1. // This theme styles the visual editor with editor-style.css to match the theme style.   
  2. add_editor_style();  

注释的中文大概意思为:可视化编辑器与主题editor-style.css风格相匹配。

关键就是这句。下面以HotNews Pro主题为例,轻松实现这一功能。

首先,新建一个名称为:editor-style.css的文件,将下面样式复制进去,或者直接下载:editor-style.css文件,并放到HotNews Pro主题css目录中。

  1. body {   
  2.     font13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahomasans-serif;   
  3.     color#000;   
  4.     text-shadow0px 1px 0px #d1d1d1;   
  5.     width700px;   
  6.     }   
  7. ul li{   
  8.     list-stylesquare inside;   
  9.     line-height:24px;   
  10.     }   
  11. h1 {font-size18px;line-height:185%;}   
  12. h2 {font-size<

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1