如何格式化wordpress CMS主题文章编辑器？
发布时间：2022-06-23 20:03:07 所属栏目：教程 来源：互联网
导读：对于wordpress主题开发者来说,客户的要求可谓是五花八门,他们什么样的要求都会出现,本章就拿我的一个客户要求来说事对方想让文章发表出来是固定格式的,对方是一家企业客户,就是说,文章发表出来后,不是普通文章那样,而是让这篇文章按固定的布局来显示,也就是
|
对于wordpress主题开发者来说,客户的要求可谓是五花八门,他们什么样的要求都会出现,本章就拿我的一个客户要求来说事——对方想让文章发表出来是固定格式的,对方是一家企业客户,就是说,文章发表出来后,不是普通文章那样,而是让这篇文章按固定的布局来显示,也就是我们今天要讲的“让wordpress主题实现编辑器分区域编辑文章”,怎样实现文章区域格式化呢？下面就随高时银博客来看看吧. 第一步:添加布局代码。 要想达到效果,我们要在主题的functions.php文件中添加如下代码: add_filter( 'default_content', 'custom_editor_content' ); function custom_editor_content( $content ) { $content = ' This is your main page content //phpfensi.com This is your sidebar content '; return $content; } 通过上面的代码,我们给编辑器添加了2个区域,它们分别是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文件,代码如下: 添加好了以后,前台的文章展示就会按后台编辑器的区域编辑来展示了. 这里只是做了一个简单的案例,你还可以让文章布局更加的复杂化,就像我那个客户一样,文章布局中包括以下内容:产品名称、产品种类、产品图片、产品规格、产品功能、产品价格等等. 好了,有关worddpress CMS主题如何格式化文章编辑器就介绍到这里,后续我们会推出更加精彩的文章. （编辑：济源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
