首页 / WordPress入门 / 改变WordPress 后台编辑器样式实现直接预览

改变WordPress 后台编辑器样式实现直接预览

    • 珂李斯

    发布于

    by

    在WordPress 3.0以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一…

    在WordPress 3.0以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一个有趣的功能：在后台可视化编辑器模式下直接预览日志内容的编排，并且与前台浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能，默认主题Twenty Eleven功能强大，集成了众多WordPress新功能，到目前为止，我还未研究透，囧……喜欢折腾WP主题的童鞋不妨多研究一下。

    打开默认主题Twenty Eleven的functions.php，会看到一句加了明确注释的代码：

    1. // This theme styles the visual editor with editor-style.css to match the theme style.
    2. add_editor_style();

    注释的中文大概意思为：可视化编辑器与主题editor-style.css风格相匹配。

    关键就是这句。下面以HotNews Pro主题为例，轻松实现这一功能。

    首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，或者直接下载：editor-style.css文件，并放到HotNews Pro主题css目录中。

    1. body {
    2.     font: 13px ‘Microsoft YaHei’, 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif;
    3.     color: #000;
    4.     text-shadow: 0px 1px 0px #d1d1d1;
    5.     width: 700px;
    6.     }
    7. ul li{
    8.     list-style: square inside;
    9.     line-height:24px;
    10.     }
    11. h2 {font-size: 18px;line-height:185%;}
    12. h2 {font-size: 16px;line-height:185%;}
    13. h3 {font-size: 14px;line-height:185%;}
    14. ul,ol,dd,pre,hr {
    15.     margin: 0 0 10px 0;
    16.     }
    17. p {
    18.     line-height:185%;
    19.     text-indent:2em;
    20.     margin: 0 0 10px 0;
    21.     }
    22. blockquote {
    23.     width: 660px;
    24.     color: #4e6384;
    25.     line-height: 23px;
    26.     margin: 5px auto 5px auto;
    27.     padding: 10px;
    28.     clear: both;
    29.     border: 1px solid #ccc;
    30.     }
    31. code {
    32.     width: 660px;
    33.     font: 12px/17px tahoma, arial, sans-serif;
    34.     color: #4e6384;
    35.     display: block;
    36.     margin: 5px auto 5px auto;
    37.     padding: 10px;
    38.     border-left: 3px solid #8391A7;
    39.     border-right: 1px solid #8391A7;
    40.     border-top: 1px solid #8391A7;
    41.     border-bottom: 1px solid #8391A7;
    42.     }
    43. blockquote td{
    44.     border-bottom: 1px solid #ccc;
    45.     padding: 2px;
    46.     }
    47. /** 图文混排 **/
    48. img.centered  {
    49.     display: block;
    50.     margin-left: auto;
    51.     margin-right: auto;
    52.     margin-bottom: 10px;
    53.     }
    54. img.alignnone {
    55.     margin: 0 0 10px 0;
    56.     display: inline;
    57.     }
    58. img.alignright {
    59.     margin: 0 0 10px 10px;
    60.     display: inline;
    61.     }
    62. img.alignleft {
    63.     margin: 0 10px 10px 0;
    64.     display: inline;
    65.     }
    66. .aligncenter {
    67.     display: block;
    68.     margin-left: auto;
    69.     margin-right: auto;
    70.     margin-bottom: 10px;
    71.     }
    72. .alignright {
    73.     float: rightright;
    74.     margin: 0 0 10px 10px;
    75.     }
    76. .alignleft {
    77.     float: left;
    78.     margin: 0 10px 10px 0;
    79.     }

    其次，打开HotNews Pro主题的functions.php模版文件，加入一句：

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

    第三，没有第三了呵呵，全部改造完成！

    在即将发的HotNews Pro 2.7正式版中已集成该功能。

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

     

    类别：WordPress入门、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！