联合创作人招募中!
微信联系:yulone

WordPress后台编辑器加载主题样式实现直接预览

使用WordPress主题的朋友有时候会遇到一个问题,网站前台的样式比较丰富,但是在后台编辑的时候比较单调,因此在写文章的时候不注意的话编辑完之后和前台的效果有着一定的差距,如果后台的编辑器也能直接展现前台的样式,实现即时编辑预览,达到真正的“可视化编辑”就好了。今天爱鱼客就带大家了解一下如何让WordPress后台编辑器加载前台主题样式。

我们需要做的首选是在主题的根目录创建一个样式文件“editor-style.css”,里面写上我们需要的样式,比如我们主要针对的是修改h标题的样式和引用块的样式,那么我们可以添加如下样式:

h1{padding-left:20px; border-left:5px solid;border-color:#ff6666;}
h2{padding-left:20px; border-left:5px solid;border-color:#2593e8;background-color:#f2f9ff;line-height:2em;}
h3{padding-left:20px; border-left:5px solid;border-color:#c4e5fe;}
blockquote{color:#4998e0;font-size:1.15em;font-style:italic;}

接下来我们要让后台编辑器调用这个样式文件,那么我们就需要修改主题的 function.php 文件,加入以下函数:

//后台编辑加入前台样式以直接预览
add_editor_style('editor-style.css');

这个函数便会让后台编辑器调用一个样式文件,而样式文件的地址为主题根目录下的“editor-style.css”,也就是我们一开始创建的样式文件。

完成之后我们进入到WordPress的后台文本编辑器中ctrl+F5刷新浏览器缓存,即可发现我们上面添加的样式,这个样式可以根据你的前台样式设置进行修改;

注意:如果你使用了WordPress的子主题功能(child-theme),并且editor-style.css在子主题目录下,那么上面调用的样式文件地址可以写完整路径,即包含http://的完整路径。

爱鱼客著作权所有!未经允许不得转载:爱鱼客 » WordPress后台编辑器加载主题样式实现直接预览

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址