• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 怎样在wordpress CMS主题文章编辑器前添加自定义面版?

    怎样在wordpress CMS主题文章编辑器前添加自定义面版?

    作者: 分类:wordpress CMS主题制作 点击: 2,488 次
    wordpress CMS主题:ssmay主题

      在默认情况下,我们给wordpressCMS主题添加自定义面版时,这个自定义面版都是在编辑器的下方的,这也没什么,习惯了就好。但是,作为wordpressCMS主题的开发者,有时候可能会碰到这样的客户,要求你把这个自定义面版放到wordpressCMS主题编辑器的前面(如下图),就像国内那些CMS程序(如织梦)那个样子。的确,如果把自定义面版放到编辑器的前面,在使用习惯上,似乎要方便一点。好了,既然客户需要,那就做一个呗。但是,怎样在wordpress主题编辑器的前面添加自定义面版呢?按照下面的3步做,就可以实现哦。

      怎样在wordpress CMS主题文章编辑器前添加自定义面版?

      第一步:准备自定义面版。

      如何制作自定义面版,我们在前面的几篇wordpress自定义域创建的介绍中写得非常详细,这里就不做多说了。如果对wordpress自定义面版的制作不太懂,可以先到前面的这几篇wordpress自定义面版制作的教程中去看看。我们就拿前面我们制作好的类文件metabox.class.php 和 自定义面版的模板文件metabox.php 在此作为例子来演示。

      第二步:引用类文件。

      在wordpressCMS主题的functions.php文件中引用这个类文件metabox.class.php。代码如下:

      include_once("metabox.class.php");

      第三步:引用模板文件。

      在你的wordpress主题的functions.php文件中引用模板文件metabox.php。代码如下:

      /** 在编辑器前添加自定义字段。 */
      require_once( 'metabox2.php');

      通过上面3步,我们就为wordpressCMS主题添加了自定义面版,但这时面版还是在wordpress编辑器的下面,而不是上面。所以,还没有达到我们的要求。

      第四步:引用JS文件。

      wordpress目前还没有将自定义面版置前的勾子,所以,通过wordpress自身的代码无法实现置前效果。但是,我们可以通过JS来实现这样的效果。在wordpressCMS主题文件夹下的JS文件夹里创建一个名为metabox_up_1.js的JS文件,在文件中添加如下代码:

      jQuery(document).ready(function(){
      $("#postdivrich").before($("#ashubox"));

      })

      这是一段jquery代码,意思是在ID为postdivrich的标签前面置放ID为ashubox的标签,ID为ashubox的标签里的内容就是我们前面制作好的wordpress主题自定义面版。

      然后,在类文件metabox.class.php中引用这个metabox_up_1.js文件,代码如下:

      wp_enqueue_script('metabox_up_js','/wp-content/themes/wanlimmteach/js/metabox_up_1.js');

      因为这个JS代码要用到jquery库,所以我们还要在类文件中引jquery库文件,代码如下:

      wp_enqueue_script('jquery-1.4.4','/wp-content/themes/wanlimmteach/js/jquery-1.4.4.js');

      这个库文件的版本不限。这里我用的是1.4.1版。

      好了,通过上面的4步,我们就在wordpressCMS主题的文章编辑器前面添加了自定义面版了。这个面版的内容你可以根据自己的需求再添加,我这里只添加了文本框和图片上传。因为是测试,我这里没有为wordpress自定义面版添加CSS样式,所以,为了美观,你还可以为这个自定义面版添加CSS样式。本章完。

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.