河北快3下注平台-河北快3注册平台_河北快3官网平台

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

时间:2020-01-14 07:54:43 出处:河北快3下注平台-河北快3注册平台_河北快3官网平台
作者:匿名 hihi 来源:知更鸟 浏览: 2011-9-14 20:12:100 字号:大 中 小

[摘要]在WordPress 3.0完后 ,有还还有一个 新的实用功能:否则你更改默认后台编辑器(TinyMCE)的样式,在后台可视化编辑器模式下直接预览日志内容的编排,否则与前台浏览样式保持一致。本文就讲一下在HotNews Pro主题下,改变WordPress后台编辑器样式实现直接预览的功能。

  在WordPress 3.0完后 ,有还还有一个 新的实用功能:否则你更改默认后台编辑器(TinyMCE)的样式,实现还还有一个 有趣的功能:在后台可视化编辑器模式下直接预览日志内容的编排,否则与前台浏览样式保持一致 ,不需用转到前台查看日志编辑情况报告。WordPress 3.21默认主题Twenty Eleven已集成了该功能,默认主题Twenty Eleven功能强大,集成了众多WordPress新功能。

  打开默认主题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目录中。

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: 6100px;

color: #4e6384;

line-height: 23px;

margin: 5px auto 5px auto;

padding: 10px;

clear: both;

border: 1px solid #ccc;

}

code {

width: 6100px;

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模版文件,加入一句:

1.//后台预览   

2.add_editor_style('/css/editor-style.css');

  原本就改造完成,在HotNews Pro主题下改变WordPress后台编辑器样式实现了直接预览的功能。

  下图是在后台可视化编辑模式下的截图,看看是就有与前台别无二致。在即将发的HotNews Pro 2.7正式版中已集成该功能。

  原困后台编辑器与前台居于不同的样式框架中,统统原困你想改造其它主题,只需将主题style.css中与正文相关的样式复制出来,并加进去具体的选泽器即可,比如上面的样式代码,不让 否参考默认主题Twenty Eleven中的editor-style.css,关键是要设置body的宽度与你的主题正文每项相同。

WordPress 下载:

HotNews Pro主题下载:

本文转自:知更鸟

sssss
Tags: WordPress   WordPress使用   预览  
责任编辑:cc120

热门

热门标签