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

26

刚刚良心同学更新了一下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的宽度与您的主题正文部分相同。

 

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

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 26 条评论

  1. 熊猫稀饭 回复

    直接编辑CSS,对于刚接触独立博客的朋友来说可能会一下就让博客挂掉...

    1. 周良 (文章作者) 回复

      额,没注意这个问题....可以在本地测试一下

  2. 阎魔爱 回复

    表示完全看不懂!!!

    1. 周良 (文章作者) 回复

      额....技术性文章是有点枯燥

  3. 图图 回复

    先收藏了,有时间再折腾这个!

  4. 心淡若水 回复

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

    1. 周良 (文章作者) 回复

      那样要修改的东西岂不是很多?

      1. 心淡若水 回复

        @周良 :
        晚点找找 潜意识里好像看到过
        不过待确定 HOHO

        1. 周良 (文章作者) 回复

          好的,麻烦了~

          1. 心淡若水 回复

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

            1. 周良 (文章作者) 回复

              现在打开博客是很慢....

  5. win8迷 回复

    还不错,只是自己效果就无所谓了

  6. JJ.lin 回复

    这个有用! 😎 迅速实验一下!

  7. phoetry 回复

    很不习惯用可视化编辑器, 老是插入一些可有可无的标记(如br)

  8. 老杨 回复

    此主题甚好,付费就是不一样! 😮

  9. Iecho 回复

    很实用的一个功能啊!以后可以不用再跑到前台去预览了。

    1. 周良 (文章作者) 回复

      是的

  10. seo千里眼 回复

    这功能是不错的!不过对于不大了解Css的博客主就不大推荐这个方法

    1. 周良 (文章作者) 回复

      嗯,可以现在本地测试,不然新手直接修改css,可能会让主题直接报销

  11. 七小罗汉 回复

    貌似良心更新后已经加入这个功能了

    1. 周良 (文章作者) 回复

      是的,我就是从良心那里提取代码的

  12. anquanzuoyi 回复

    订阅下,博主技术不错,我是小白,多来学习

  13. 一堵墙 回复

    这个功能很实用啊抽出时间弄一下

    1. 周良 (文章作者) 回复

      @一堵墙: 好的

  14. yxlz 回复

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

  15. yxlz 回复

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

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

返回顶部