wordpress网站CMS主题怎样格式化文章编辑器，达到分区域编辑文章？

对于WordPress主题开发者来说，客户的要求可谓是五花八门，他们什么样的要求都会出现。本章就拿我的一个客户要求来说事——对方想让文章发表出来是固定格式的，对方是一家企业客户。就是说，文章发表出来后，不是普通文章那样，而是让这篇文章按固定的布局来显示，也就是我们今天要讲的“让WordPress主题实现编辑器分区域编辑文章”（如下图，一个简单的编辑器布局）。怎样实现文章区域格式化呢？下面就一起来看看吧。

第一步：添加布局代码。

要想达到上图的效果，我们要在主题的functions.php文件中添加如下代码：

add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
$content = '
<div class="content-col-main">
This is your main page content
&nbsp;
</div>
<div class="content-col-side">
This is your sidebar content
&nbsp;
</div>';
return $content;
}

通过上面的代码，我们给编辑器添加了2个 <div>区域，它们分别是content-col-main 和 content-col-side，即上图中所示的2个区域。但是，要想达到上头的效果，我们还要为这2个 div 添加它们的CSS样式。

第二步：添加CSS样式。

在wordpress主题文件夹下创建一个名为 single-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; }
.content-col-main img, .content-col-side img{ max-width: 100%; width: auto; height: auto; }

第三步：引用CSS样式。

在wordpress主题的functions.php文件中调用上面创建 的single-style.css文件。代码如下：

add_editor_style( 'single-style.css' );

通过上面3步，我们就实现了在wordpress主题的编辑器中区域化编辑文章的功能模块，就如上图的效果。但是，虽然后台编辑器已经实现了这样的布局，但是，如果这亲发布文章出去，前台是看不到效果的，为什么呢？因为，前台我们没有为文章设置样式。所以，我们还要在前台也调用上面创建的CSS样式 文件。

第四步：前台调用CSS样式。

直接在wordpress主题的header.php文件中调用上面创建的single-style.css文件，代码如下：

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/single-style.css" type="text/css" media="screen" />

添加好了以后，前台的文章展示就会按后台编辑器的区域编辑来展示了，效果如下图：

这里只是做了一个简单的案例，你还可以让文章布局更加的复杂化，就像我那个客户一样，文章布局中包括以下内容：产品名称、产品种类、产品图片、产品规格、产品功能、产品价格等等。

好了，有关worddpress CMS主题如何格式化文章编辑器就介绍到这里。后续我们会推出更加精彩的文章。