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

2011.09.17 26 Comments 14,419 次阅读

刚刚良心同学更新了一下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 Responses
Comment (26)
Trackback (0)
  • #-14
    yxlz :

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

    2014.09.16 20:16 Reply
  • #-13
    yxlz :

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

    2014.09.16 20:16 Reply
  • #-12
    一堵墙 :

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

    2012.02.4 20:44 Reply
  • #-11
    anquanzuoyi :

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

    2011.10.9 19:51 Reply
  • #-10
    七小罗汉 :

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

    2011.10.2 08:14 Reply
    • 周良 :

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

      2011.10.2 10:19 Reply
  • #-9
    seo千里眼 :

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

    2011.09.30 14:30 Reply
    • 周良 :

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

      2011.09.30 16:32 Reply
  • #-8
    Iecho :

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

    2011.09.27 13:17 Reply
  • #-7
    老杨 :

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

    2011.09.25 21:03 Reply
  • #-6
    phoetry :

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

    2011.09.23 21:59 Reply
  • #-5
    JJ.lin :

    这个有用! :cool: 迅速实验一下!

    2011.09.23 17:40 Reply
  • #-4
    win8迷 :

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

    2011.09.19 15:07 Reply
  • #-3
    心淡若水 :

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

    2011.09.18 23:09 Reply
    • 周良 :

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

      2011.09.19 08:57 Reply
      • 心淡若水 :

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

        2011.09.20 14:23 Reply
        • 周良 :

          好的,麻烦了~

          2011.09.23 17:30 Reply
          • 心淡若水 :

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

            2011.09.24 15:05 Reply
            • 周良 :

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

              2011.09.24 15:07 Reply
  • #-2
    图图 :

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

    2011.09.18 13:58 Reply
  • #-1
    阎魔爱 :

    表示完全看不懂!!!

    2011.09.17 23:08 Reply
    • 周良 :

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

      2011.09.17 23:09 Reply
  • #0
    熊猫稀饭 :

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

    2011.09.17 22:47 Reply
    • 周良 :

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

      2011.09.17 22:48 Reply
  • 还没有Trackback
Leave a Reply