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同个文件夹。
