博客主机
A-A+

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

2014年08月24日 杂七杂八 暂无评论 阅读 278 次
博客主机

在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风格相匹配。
关键就是这句。下面以本主题为例，轻松实现这一功能。
首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，或者直接下载：editor-style.css文件，并放到当前主题的css目录中。

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

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

  1. //后台预览   
  2. add_editor_style('/css/editor-style.css');  //这里/css/**是你模板下的目录

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

标签：
博客主机

给我留言