WordPress实时预览,改变后台编辑器样式

WordPress实时预览,改变后台编辑器样式
wordpress

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

由于后台编辑器与前台处于不同的样式框架中,所以如果你想改造其它主题,只需将主题style.css中与正文相关的样式复制出来,并去掉具体的选择器即可,比如我上面的样式代码,也可以参考默认主题Twenty Eleven中的editor-style.css,关键是要设置body的宽度与你的主题正文部分相同。

Wordpress

Wordpress更加有效率的SEO方法,无须插件

2021-10-21 9:45:00

Wordpress

WordPress如何实现键盘翻页,键盘控制网页

2021-10-23 13:39:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索