wordpress进阶教程(六):创建自定义字段面板

上一篇教程中我们介绍了wordpress自定义字段,以及自定义字段的操作函数,但是对于自定义字段的时候,在后台添加的使用通过那个面板添加十分不方便,比如你要使用自定义字段来实现seo功能,那么你每次都需要重复输入字段名称:title\keywords\description。

今天这篇文章,我们将讲解为自定义字段添加一个固定的面板,这样就不用每次为每个字段输入字段名称了。

说明:不要误以为自定义面板就是用来添加自定义字段的,你可以通过本篇教程添加一个自定义字段来干任何事,比如你只是想显示一个提示信息而已,用来显示浏览次数,等等。。。本篇教程的核心应该是怎样在后台添加自定义面板。

效果图:wordpress自定义字段面板
要在后台创建一个面板,首先了解一个函数:

  1. <?php
  2. add_meta_box( $id$title$callback$post_type$context$priority$callback_args );
  3. //$id--面板的的id属性(html)。
  4. //$title--面板标题
  5. //$callback--调用的函数
  6. //$post_type--要在编辑页面创建面板的文章类型,比如post\page..自定义的文章类型等
  7. //$context--(可选)面板要显示的位置,可以使用normal\advanced\side分别为普通、高级(貌似跟普通效果差不多)、边栏
  8. //$priority--(可选)显示的优先级,可以使用high\core\default\low 如果设置为high那么它会显示在默认的那些自定义字段、评论、作者什么的前面
  9. //$callback_args--(可选、数组)要传给那个$callback函数的参数
  10. ?>

准备工作:

1、准备文件,作者以默认的twenty ten主题做测试,在默认主题中新建一个metabox.php文件,而后在主题的functions.php中include该文件。

步骤、(接下来的代码参考自露兜博客)

一、准备要创建的字段信息,我们将添加keywords和description两个字段。在metabox.php文件中添加代码(php文件别忘了<?php 和?>哦):

  1. $new_meta_boxes =
  2. array(
  3.     "description" => array(
  4.         "name" => "description",
  5.         "std" => "这里填默认的网页描述",
  6.         "title" => "网页描述:"),
  7.     "keywords" => array(
  8.         "name" => "keywords",
  9.         "std" => "这里填默认的网页关键字",
  10.         "title" => "关键字:")
  11. );

这是一个二维数组,数组的第一个元素就是description字段的信息,包括标题、字段名、描述信息。

二、创建(显示)面板内容的函数

  1. function new_meta_boxes() {
  2.     global $post$new_meta_boxes;
  3.     foreach($new_meta_boxes as $meta_box) {
  4.         $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
  5.         if($meta_box_value == "")
  6.             $meta_box_value = $meta_box['std'];
  7.         echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
  8.         // 自定义字段标题
  9.         echo'<h4>'.$meta_box['title'].'</h4>';
  10.         // 自定义字段输入框
  11.         echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><br />';
  12.     }
  13. }

该函数用来显示面板的内容,将作为add_meta_box函数才callback参数调用。

三、创建面板

  1. function create_meta_box() {
  2.     global $theme_name;
  3.     if ( function_exists('add_meta_box') ) {
  4.         add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
  5.     }
  6. }

这个函数代码就不解释了,看前面函数详细介绍。

四、保存更新数据

  1. function save_postdata( $post_id ) {
  2.     global $post$new_meta_boxes;
  3.     foreach($new_meta_boxes as $meta_box) {
  4.         if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) ))  {
  5.             return $post_id;
  6.         }
  7.         if ( 'page' == $_POST['post_type'] ) {
  8.             if ( !current_user_can( 'edit_page', $post_id ))
  9.                 return $post_id;
  10.         }
  11.         else {
  12.             if ( !current_user_can( 'edit_post', $post_id ))
  13.                 return $post_id;
  14.         }
  15.         $data = $_POST[$meta_box['name'].'_value'];
  16.         if(get_post_meta($post_id$meta_box['name'].'_value') == "")
  17.             add_post_meta($post_id$meta_box['name'].'_value', $data, true);
  18.         elseif($data != get_post_meta($post_id$meta_box['name'].'_value', true))
  19.             update_post_meta($post_id$meta_box['name'].'_value', $data);
  20.         elseif($data == "")
  21.             delete_post_meta($post_id$meta_box['name'].'_value', get_post_meta($post_id$meta_box['name'].'_value', true));
  22.     }
  23. }

改函数用来保存和更新我们的字段值

 

OK,函数代码都准备好了,下马就是触发了,我们应该先执行create_meta_box函数,因为 add_meta_box是由它调用的。使用动作钩子,继续添加下面的代码:

  1. add_action('admin_menu', 'create_meta_box');
  2. add_action('save_post', 'save_postdata');

同时在保存文章的时候执行更新和保存字段的函数。

 

调用:通过 get_post_meta函数调用即可

  1. $description = get_post_meta($post->ID, "description_value", true);
  2. $keywords = get_post_meta($post->ID, "keywords_value", true);

注意字段名称,我们在保存数据的时候,保存的字段名称分别是description_value、keywords_value。。。

OK,自定义面板的创建结束。

敬告:此教程发表于2012年,建议直接下载本站的提供的框架,研究和使用皆可。

已有24条评论

  1. grantchao
    grantchao : 回复

    可以用Advanced Custom Fields这个插件来做的,很方便,而且可以自定义很多类型的字段,比如文字,文本段,选项,相关文章,图片,文件等等,可以看一下这篇文章的详细介绍

    • 阿树工作室
      阿树工作室 回复grantchao: 回复

      您的建议很好,不过里面的链接我删了。

  2. 皮皮囧
    皮皮囧 : 回复

    请问框架去哪里下?并没有看到框架的下载啊

    • 阿树工作室
      阿树工作室 回复皮皮囧: 回复

      首页有前往github下载的按钮。

  3. TIM
    TIM : 回复

    新建一个post_type.php 文件,怎么在这个文件添加新的字段???

  4. 网友
    网友 : 回复

    发现个问题,我自定义字段后,在自定义字段填写内容后提交,提交后自定义字段里的值显示的还是默认的内容,不是我填写的内容。

    • 阿树工作室
      阿树工作室 回复网友: 回复

      下载本站框架

  5. 陆舒杰
    陆舒杰 : 回复

    博主,你好,露兜的代码只能实现在文章,能否把在标签里实现这个自定义面板呢,谢谢!

    • 阿树工作室
      阿树工作室 回复陆舒杰: 回复

      请下载本站提供的后台框架可实现在文章、分类等添加自定义字段。

      • 陆舒杰
        陆舒杰 回复阿树工作室: 回复

        很完善,感谢。

  6. 华子
    华子 : 回复

    请问树哥,想弄两个自定义模块的话,怎么添加?

    • 阿树工作室
      阿树工作室 回复华子: 回复

      把类实例化那一块多复制一份,,注意修改变量名称即可。

  7. 珲珲哥
    珲珲哥 : 回复

    感谢阿树的教程,保存数据备份我发现这样的问题:发表文章的时候如果不填写自定义字段,就会添加一个空值的自定义字段,以后重新编辑文章时如果想要给自定义字段添加值,保存后数据库中就有了两个相同的自定义字段,只是一个是空值,一个有值,那么读取的时候就有可能读到空的那个。我改了一下:

    if($data && $data != get_post_meta($post_id, $meta_box[‘name’]) ) {
    update_post_meta($post_id, $meta_box[‘name’], $data);
    } elseif(!$data) {
    delete_post_meta($post_id, $meta_box[‘name’]);
    }

  8. odayou
    odayou : 回复

    楼主,教程很强大,不过有个问题,当我添加自定义字段以后,编辑内容会出现默认面板textare 和 新建的 tinymce 都显示相关内容。

  9. monad
    monad : 回复

    自定义类型的内容页面浏览器标题怎么能显示分类目录啊!

  10. 冷剑苍穹
    冷剑苍穹 : 回复

    博主太强大了,我是在一连看了贵站多篇文章后才在此处留言的。你所介绍的自定义字段这方面的我以前用到过一些,但大多都是从国外网站上看过的代码样板,而感觉你写的比较系统、详细。差距啊,差距,我要学的东西还有太多……希望通过仔细研读你的这部分文章,让自己把自定义字段这一块的只是摸熟、练透

    • 阿树工作室
      阿树工作室 回复冷剑苍穹: 回复

      哎呀。。。过奖了类。。。伦家会修射的。。

      • 冷剑苍穹
        冷剑苍穹 回复阿树工作室: 回复

        好吧亲,这一“萌”让“您”的形象大跌……本人是回来告诉你,邮件通知中的链接有问题,不能回访,404!完善一下吧,我先去吐……呕……

        • 阿树工作室
          阿树工作室 回复冷剑苍穹: 回复

          嗯,这个问题早知道了。。。就是没时间也不没激情去解决。。

  11. 天边
    天边 : 回复

    复制代码粘贴的时候前面的行号数字也复制过来了,希望改进

    • 阿树工作室
      阿树工作室 回复天边: 回复

      额。。。为毛我复制不了行号。。

      • 天边
        天边 回复阿树工作室: 回复

        我是IE8,你呢?

        • 阿树工作室
          阿树工作室 回复天边: 回复

          额。。貌似IE就会把行号给复制了。。

  12. 手机访客
    手机访客 : 回复

    我是手机访客

发表评论