WordPress高级自定义布局的内容编辑器(TinyMCE)模板-木庄网络博客

本文整理自网络，侵删。

WordPress的编辑器TinyMCE是一个非常强大的工具，对于网页设计师来说，使用WordPress的编辑器TinyMCE是没什么困难的，但是对于那些不怎么了解HTML的人来说却用起来不是那么的得心应手；如果我们把内容编辑器做到所见即所得，预先把内容编辑器的排版布局都做出来，而我们用户只要在相对应的区域直接输入内容就行了。那上面所说的问题就可以很轻易的解决，而且同样也可以提高我们编辑内容的效率。
今天就为大家介绍下Wordpress高级自定义布局的内容编辑器模板的制作技巧，要做到所见即所得，那么我们得在内容编辑器内自定义添加预设内容和排版布局，再结合我们样式表就可以轻易的实现这个功能。

创建自定义布局

排版布局分为两部分，一个是HTML的排版布局，另一个是CSS的样式表界面。

HTML排版布局

代码如下:

<?php
add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
$content = '
<div class="content-col-main">
这里是主要内容区域
<p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
</div>
<div class="content-col-side">
这里是侧边栏内容区域
<p style="color:#999;">觉唯前端 http://www.jiawin.com</p>
</div>
';
return $content;
}
?>

WordPress的这个default_content过滤器只能作用在新创建的文章或者页面里面，之前已经发布出来的文章或者页面都不会起作用。所以不用担心会影响到发布的文章。

CSS样式设计

接下来我们为这个结构布局引入一个样式表：

代码如下:

<?php
add_editor_style( 'editor-style.css' );
?>

我们需要另外建一个样式表文件，命名为：editor-style.css，里面的示例代码如下：

代码如下:

body {
background: #f5f5f5;
}
.content-col-main {
float:left;
width:66%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
.content-col-side {
float:right;
width:29%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
img { /* Makes sure your images stay within their columns */
max-width: 100%;
width: auto;
height: auto;
}

这里需要注意的是样式表文件的路径，按照这个例子是放在主题的目录下面的，即和style.css同个文件夹。
现在我们切换到我们的后台，点击新建一篇文章（或者页面）内容编辑器区域就会自动添加刚刚我们创建的HTML结构了：

这个就是一个简单的布局，你可以根据你的网站，编辑default_content和styles.css里面的内容以及布局结构。下面是根据我（觉唯前端）自己的网站，做个示例给大家看看：

阅读剩余部分