改变WordPress 后台编辑器样式实现直接预览
发布时间:2011-09-21 12:45:46
在WordPress 3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样式,实现一个有趣的功能:在后台可视化编辑器模式下直接预览日志内容的编排,并且与前台浏览样式保持一致 ,不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能,默认主题Twenty Eleven功能强大,集成了众多WordPress新功能,到目前为止,我还未研究透,囧。喜欢折腾WP主题的童鞋不妨多研究一下。
打开默认主题Twenty Eleven的functions.php,会看到一句加了明确注释的代码:
// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();
注释的中文大概意思为:可视化编辑器与主题editor-style.css风格相匹配。
关键就是这句。下面以HotNews Pro主题为例,轻松实现这一功能。
首先,新建一个名称为:editor-style.css的文件,将下面样式复制进去,或者直接下载:editor-style.css文件,并放到HotNews Pro主题css目录中。
body {
font: 13px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
color: #000;
text-shadow: 0px 1px 0px #d1d1d1;
width: 700px;
}
ul li{
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;
}
p {
line-height:185%;
text-indent:2em;
margin: 0 0 10px 0;
}
blockquote {
width:660px;
color: #4e6384;
line-height: 23px;
margin: 5px auto 5px auto;
padding:10px;
clear: both;
border: 1px solid #ccc;
}
code {
width: 660px;
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('/css/editor-style.css');
第三,没有第三了呵呵,全部改造完成!
下图是在后台可视化编辑模式下的截图,看看是不是与前台别无二致。在即将发的HotNews Pro 2.7正式版中已集成该功能。
由于后台编辑器与前台处于不同的样式框架中,所以如果你想改造其它主题,只需将主题style.css中与正文相关的样式复制出来,并去掉具体的选择器即可,比如我上面的样式代码,也可以参考默认主题Twenty Eleven中的editor-style.css,关键是要设置body的宽度与你的主题正文部分相同。
原文地址:知更鸟
猜你喜欢
- 一:持之以恒,每日更新。此条排在第一位,相信绝大多数个人站长不会有异议吧。一个网站从前期策划到建设维护再到后期推广,其中零碎烦琐之事不胜枚举
- 很多初学者在看一些SEO教程时可能经常见到,优化就要将网站URL静态化,甚至将这一点列入非常重要的行列。个人不赞成此观点,选择动态URL还是
- 远程网络连接在企业的信息化应用中是一门比较实用的技术。他可以通过各种方式实现,如VPN、远程控制工具等等。不过,远程桌面Web连接也是其中的
- 隐藏旗标(软件名和版本号)将提高安全性,可能的情况下,也请使用Sendmail以外的其他邮件服务器,因为Sendmail以root运行,比较
- 10月14日,中国软件资讯网据外电报道,当苹果的市值又再度超越Google时,这次它能够一直保持领先吗?《BusinessWeek》专栏作家
- 你可能知道Google +1按钮已经对网站站长开放使用,网站所有者和发布者他们的内容中包含了它,争先使用这新功能。为什么不?它影响你网站在搜
- Apache模块 mod_rewrite 提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求。它支持每个完整规则可以拥有不限数量的
- 10月20日下午消息,瑞星今日宣布正式推出瑞星全功能安全软件2010三年版(以下简称瑞星2010版)。瑞星方面表示,这一基于云安全系统的产品
- 一旦你的网站跟这十大标准之中的几个挂上钩,就难逃经典特差网站的厄运,如果不幸以下这十条你的网站全都占了,那还是请离开站长圈,另谋出路比较好。
- 本文将讨论UNIX平台下,Apache WEB服务器安装和配置的安全问题。我们假定阅读本文的系统管理员已经针对自己站点的情况选择了相关的模块
- 1.1 直接路由(Direct forwarding)当参与集群的计算机和作为控制管理的计算机在同一个网段时可以用此法,控制管理的计算机接收
- Google AdSense发布者在账号被停止后是否可以收到已经支付或即将支付的款项,这是最近很多发布者都在关注的问题,尤其是通过西联汇款支
- 前段时间,又一个SNS网站在短时间内得到了大量互联网人士的关注,那就是搜狐推出的“白社会”。除去依托于搜狐这个大平台外,还因为其在细节方面的
- 情人节将至,有网络广告界分析人士预计,情人节期间网络广告整体额度将较去年同期上升两成,因众多商家在节后纷纷开张,选择情人节期间进行网络营销势
- 在Godaddy注册一个域名,还可以获得Godaddy赠送的一个10G的免费空间。虽然是免费空间,速度还挺快的,容量也蛮大,遗憾的是网页顶部
- 近日,知名影星徐静蕾联手VANCL(凡客诚品)推出开啦饰品、进军B2C的消息,在业界颇受关注。今天记者从VANCL了解到,9号上线的徐静蕾开
- c:\administrators 全部system 全部iis_wpg 只有该文件夹列出文件夹/读数据读属性读扩展属性读取权限c:\ine
- 11月20日 谷歌在11月初发布了Chrome 4.0首个Beta版,并引入用户较为看重的书签同步功能,但扩展功能尚有欠缺。近日谷歌将推出一
- 昨天参加“中国·西部电子商务高峰论坛”的国内外电子商务企业高层像商量好似的,每
- 北京时间11月25日消息,据国外媒体报道,微软周二表示,其CFO克里斯-里德尔(Chris Liddell)将于今年底离职,由现任微软企业部