wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress CMS主题怎样格式化文章编辑器,达到分区域编辑文章?

    wordpress CMS主题怎样格式化文章编辑器,达到分区域编辑文章?

    高时银博客 wordpress CMS主题制作 点击: 2,033 次 0 1
    [文章目录]

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

    wordpress CMS主题怎样格式化文章编辑器,达到分区域编辑文章?

    第一步:添加布局代码。

    要想达到上图的效果,我们要在主题的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" />

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

    wordpress CMS主题怎样格式化文章编辑器,达到分区域编辑文章?

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

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


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506174417.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论