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

第一步:添加布局代码。

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

1. add_filter( 'default_content', 'custom_editor_content' ); 
2. function custom_editor_content( $content ) { 
3. $content = ' 
4. This is your main page content 
5. //phpfensi.com 
6. This is your sidebar content 
7.  
8. '; 
9. return $content; 
10. } 

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

第二步:添加CSS样式.

在wordpress主题文件夹下创建一个名为 single-style.css 文件,然后打开它,在里面添加如下代码:

1. body { background: #f5f5f5; } 
2. .content-col-main { float:left; width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; } 
3. .content-col-side { float:right; width:29%; padding:1%; border: 1px dotted #ccc; background: #fff; } 
4. .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文件,代码如下:

添加好了以后,前台的文章展示就会按后台编辑器的区域编辑来展示了.

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

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

Tags: wordpress编辑器 wordpress ubb

分享到：