WordPress 后台编辑器实现文章样式直接预览

刚刚良心同学更新了一下Deve主题,添加了一个“文章编辑器应用主题样式”选项。周良好奇了一下,所以拆分了一下Deve的更新包,并询问了一下良心和谷歌。

原来在 WordPress 3.0 以后,有一个新的实用功能:可以更改默认后台编辑器(TinyMCE)的样式,实现在后台可视化编辑器模式下直接预览日志内容的 编排,并且与发表后的文章浏览样式保持一致 ,不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能,默认主题Twenty Eleven功能强大,集成了众多WordPress新功能,到目前为止,我还是没用过比这主题更强的的,呵呵。

下面来说一下应该如何操作。PS:感谢良心同学的指导

打开默认主题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风格相匹配。
关键就是这句。周良就不用什么主题做示范了,直接上方法!

1、新建一个名称为:editor-style.css 的文件,将下面样式复制进去,并放到主题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;
}

2、打开主题的functions.php模版文件,加入一句:

//后台预览
add_editor_style(‘/css/editor-style.css’);

注:这里的/css/editor-style.css代表的是editor-style.css文件在您主题中的地址,如果您的主题中没有css这个文件夹,您可以直接把editor-style.css文件拖到主题目录中,在functions.php中就不需要把/css这个文件夹加进去了!

到目前文章,基本都已经完成咯~~~~

下图是周良博客的后台文章编辑器截图:

但由于后台的编辑器与发表后的文章(前台)出于不同的样式框架中,在您修改主题的时候,只需要将主题style.css中与正文相关的样式复制出来,并去掉具体的选择器即可,比如我上面的样式代码,也可以参考默认主题Twenty Eleven中的editor-style.css,关键是要设置body的宽度与您的主题正文部分相同。

如果您看了此文,修改主题的时候有困难,可以给周良留言,或者在谷歌搜索一下类似的教程。

26 条评论 / 发表评论

  1. 站长你好:你使用的是自带的编辑器,请问你是怎么发表代码的,就貌似你上面这个代码好像自带的编辑器是做不到的。能告知下么?

  2. 站长你好:你使用的是自带的编辑器,请问你是怎么发表代码的,就貌似你上面这个代码好像自带的编辑器是做不到的。能告知下么?

  3. 好像还有一种更好的 修改后就是可以预览模式下 直接就像WLW预览一样
    带主题的 像发布后的一样 貌似更给力

          1. @周良 :
            此刻 打开哥们的博客很慢啊
            关于后台编辑可视化我说的那种是没有的
            看错了 是里面插入了很多图片给人感觉像是包含主题预览一样
            啊哦

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注