WordPress

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的宽度与您的主题正文部分相同。

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

微信扫一扫,分享到朋友圈

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

你也可能喜欢

26 条评论

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

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

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

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

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

    1. @七小罗汉 是的,我就是从良心那里提取代码的

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

    1. @seo千里眼 嗯,可以现在本地测试,不然新手直接修改css,可能会让主题直接报销

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

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

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

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

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

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

    1. @心淡若水 那样要修改的东西岂不是很多?

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

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

      3. @心淡若水 现在打开博客是很慢....

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

  14. 表示完全看不懂!!!

    1. @阎魔爱 额....技术性文章是有点枯燥

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

    1. @熊猫稀饭 额,没注意这个问题....可以在本地测试一下

Leave a Reply to 周良 取消回复

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

提示:点击验证后方可评论!

插入图片

关于周良粥凉

产品经理,现电商从业者;从事过互联网医疗与金融等行业。 / 写了 9 年独立博客,喜恶皆在字里行间。

分类

微信扫一扫

微信扫一扫