wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 怎样在wordpress CMS主题文章编辑器前添加自定义面版?

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

    高时银博客 wordpress CMS主题制作 点击: 1,513 次 0 1

    在默认情况下,我们给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
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    发表评论