改变WordPress 后台编辑器样式实现直接预览
2011-09-21 10:51
417 查看
在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的宽度与你的主题正文部分相同。
打开默认主题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的宽度与你的主题正文部分相同。
相关文章推荐
- ubuntu14.04下直接修改apache2默认目录导致wordpress样式改变的解决办法
- web前端,jquery实现列表点击条目改变样式并拿到属性值总结1index()
- vue2.0实现引用qrcode.js实现获取改变二维码的样式(2)
- Atom编辑器折腾记_(5)记住上一次打开的目录及浏览器预览功能实现
- 鼠标移动实现样式改变
- WordPress后台中实现图片上传功能的实例讲解
- jquery如何改变html标签的样式(两种实现方法)
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果 2
- 修改WordPress中文章编辑器的样式的方法详解
- Android实现按下Back键程序隐藏到后台,而不是直接退出
- web前端,jquery实现列表点击条目改变样式并拿到属性值总结2attr()
- 保护视力,从改变eclipse编辑器样式风格做起
- CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程
- angularjs下ng-repeat点击元素改变样式实现
- 实现table跳转到指定行,并改变所在行的样式!
- web前端,jquery实现列表点击条目改变样式并拿到属性值
- js实现文件的上传和直接预览(不经过服务端)
- 问题:关于坛友一个获取text内容并改变样式的实现
- 鼠标移动实现样式改变