• SEO是一个到底多么牛叉的行业?SEO是一个到底多么牛叉的行业?
  • 郑州SEO郑州seo
  • 郑州SEO你只看到了别人的成功,却看不到别人默默的
  • 郑州SEOSEO切莫浪费时间在不必要的问题上
  • 1
  • 2
  • 3
  • 4

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

时间:2012-12-5 作者:问候seo

在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’);

第三,没有第三了呵呵,全部改造完成!

文章由郑州seo整理,转载请注明:http://www.leiju88.com

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:1448228637@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。