WordPress添加自定义字段面板

日期: 标签:WordPress教程 139 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

     我们在WordPress中编写文章的时候,经常会用到一些自定义字段,如网页描述description和关键词keywords这两个meta标签,关于这两个标签,可以看我之前写过的一篇文章:WordPress使用经验(一)独立的Description 和 Keywords

     通常在添加自定义字段和其值的时候,我们都是手动去"自定义字段"模块下拉框中去选择相应的字段,然后再输入其值,最后还要提交等待一小段时间,似乎有点麻烦。那么可不可以给这些常用的自定义字段创建一个单独的面板,直接在里面填内容就可以了呢?就像文章标签,直接添加标签即可,不需要单独提交。答案是可以的,下面是效果图:

文章编辑页添加模块

     下面我将教你如何操作,以下所有代码放到当前主题的functions.php中即可

一、创建需要的字段信息

     这里将以添加两个自定义字段,名称分别为 _description_value 和 _keywords_value,你可以给下面数组添加多个元素,实现添加多个自定义字段的目的。

     数组第一个元素name为自定义字段的名称,在本代码中自定义字段的名称为name值加_value,以防止与其他代码发生冲突,如 _description_value;std为自定义字段的默认值,当你发表文章时该自定义字段没填任何值,那么将取默认值;title为自定义字段模块的标题,如文章编辑页的"摘要"、"分类"和"标签",这些都是模块名称。

$new_meta_boxes =
array(
  "description" => array(
    "name" => "_description",
    "std" => "这里填默认的网页描述",
    "title" => "网页描述:"),

  "keywords" => array(
    "name" => "_keywords",
    "std" => "这里填默认的网页关键字",
    "title" => "关键字:")
);

二、创建自定义字段输入框

     以下代码将用于创建自定义域以及输入框,照写就是了

function new_meta_boxes() {
  global $post, $new_meta_boxes;

  foreach($new_meta_boxes as $meta_box) {
    $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

    if($meta_box_value == "")
      $meta_box_value = $meta_box['std'];

    // 自定义字段标题
    echo'<h3>'.$meta_box['title'].'</h3>';

    // 自定义字段输入框
    echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><br />';
  }
   
  echo '<input type="hidden" name="ludou_metaboxes_nonce" id="ludou_metaboxes_nonce" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
}

三、创建自定义字段模块

     下面代码将在文章编辑页添加自定义字段模块,这其中这用了WordPress的添加模块函数add_meta_box。这与之前的文章WordPress文章编辑页删除相关模块所做的工作恰好相反。

function create_meta_box() {
  if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
  }
}

四、保存文章数据

     之前所有准备都做好了,最重要的还是保存我们的自定义字段中的信息。

function save_postdata( $post_id ) {
  global $new_meta_boxes;
   
  if ( !wp_verify_nonce( $_POST['ludou_metaboxes_nonce'], plugin_basename(__FILE__) ))
    return;
   
  if ( !current_user_can( 'edit_posts', $post_id ))
    return;
               
  foreach($new_meta_boxes as $meta_box) {
    $data = $_POST[$meta_box['name'].'_value'];

    if($data == "")
      delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
    else
      update_post_meta($post_id, $meta_box['name'].'_value', $data);
   }
}

五、将函数连接到指定action(动作)

     这是最后一步,也是最重要的一步,我们要做的是将函数连接到指定action(动作),以让WordPress程序执行我们之前编写的函数:

add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

     好了,我们要做的就是这些了,现在你可以在你的主题中调用这两个自定义字段了,用文本编辑器打开主题目录下的header.php,将以下代码复制到</head>之前,就可以给你的网页自定义description和keywords标签了,更具体的操作请使用搜索引擎:

<?php
if (is_single()) {
  // 自定义字段名称为 description_value
  $description = get_post_meta($post->ID, "_description_value", true);

  // 自定义字段名称为 keywords_value
  $keywords = get_post_meta($post->ID, "_keywords_value", true);

  // 去除不必要的空格和HTML标签
  $description = trim(strip_tags($description));
  $keywords = trim(strip_tags($keywords));

  echo '<meta name="description" content="'.$description.'" />
<meta name="keywords" content="'.$keywords.'" />';
}

?>

参考文章

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/creating-custom-write-panels-in-wordpress.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

139 条留言

点此留言
1 2 3 107
  1. tanshei

    请问自定义文章类型,怎么把这个加上去。 谢谢!

    • Ludou

      @tanshei 第三段代码第5行add_meta_box那段,把post改成你的文章类型名称;
      或者复制这一行粘贴到下一行,把post改成你的文章类型名称;
      多个文章类型就多个add_meta_box

    • Ludou

      @tanshei 留个言而已,何必用这么多马甲?

      • tanshei

        @Ludou 我浏览器设置了退出时清除所有缓存和记录。

        有时候google找内容经常跳到你这了,

        所以有时候忘记上次评论叫什么名字。真是非常抱歉。下次一定注意。

  2. xuanxi

    自定义面板能不能添加一个 更新 或 添加按钮

    每次去点文章的发布更新 太麻烦

    • Ludou

      @xuanxi 这需要用到AJAX,代码比较复杂,这里不好讲解。

  3. nemo

    Ludou大大,我又来了。
    我使用这个方法制作了一个日期的自定义字段,使用的是HTML5的<input type="date">,但是保存后日期不会保存,如果更新没有日期的文章的话,只要一保存,所有字段的值就都会被清空了,这是怎么回事呢?

    • 露兜

      @nemo input没有name吗?
      另外,我不知道你的代码是怎么写的,但是我觉得是保存文章数据这部分出现问题。

  4. David

    这真是我想找的,谢谢博主。

  5. David

    博主,怎么避免跟原来的定义相冲突。比如页面部分原来定义了一个。后来再写文章时就有两组keyword,如果去掉原来那个,非文章页面就没有描述和Keyword。

    • 露兜

      @David 最后一段代码改成:
      <?php
      if (!is_page()) {
      // 自定义字段名称为 description_value
      $description = get_post_meta($post->ID, "description_value", true);
      // 自定义字段名称为 keywords_value
      $keywords = get_post_meta($post->ID, "keywords_value", true);

      // 去除不必要的空格和HTML标签
      $description = trim(strip_tags($description));
      $keywords = trim(strip_tags($keywords));

      echo '<meta name="description" content="'.$description.'" />
      <meta name="keywords" content="'.$keywords.'" />';
      }
      ?>

      • David

        @露兜 ludou,谢谢回复。可能我的表述不是很清楚,上面的效果不是我想要的。至少应该加个elseif(){$keywords="固定的Kw" ……}才会两者都保留,否则页面上这两项会显示空。
        另外两个问题:
        1、新建页面时这个添加模块不能用,您测试下看是不是这样?
        2、我原来已经存在的keywords和description我不想改了,只是以后发文章时再用另一个,那么就有这样一个需求:设一组默认值,没改动的用默认值,改过的用新值。
        如果可以实现这两点的话,几乎可以替代all-in-one-SEO了。您看能实现不?

        • 露兜

          @David 上面的代码只支持文章,不支持页面,如果要支持页面,第三段代码第5行后添加:
          add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'page', 'normal', 'high' );

          其他意思不懂,不予回复。

          • 陆舒杰

            @露兜 博主,你好,上面代码能否实现tag标签的自定义面板呢?

          • 御斐

            @露兜 博主,您好
            很感谢您这篇文章的分享,在百度中搜索到你的文章,按照你的教程,我一一添加,已经实现在文章页面,但是有一个疑问想请教一下:
            根据您提示的,若要既支持页面,又支持文章页的话,要加几个代码,
            一个是:
            第三段代码添加:
            add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'page', 'normal', 'high' );
            一个是:
            在</head>前面,在多加下面的代码:
            <?php
            if (is_page()) {
            // 自定义字段名称为 description_value
            $description = get_post_meta($post->ID, "description_value", true);
            // 自定义字段名称为 keywords_value
            $keywords = get_post_meta($post->ID, "keywords_value", true);

            // 去除不必要的空格和HTML标签
            $description = trim(strip_tags($description));
            $keywords = trim(strip_tags($keywords));

            echo '<meta name="description" content="'.$description.'" />
            <meta name="keywords" content="'.$keywords.'" />';
            }
            ?>

            我操作了一下,页面以及文章页代码都显示了,meta标签,文章页可以正确的显示我自定义的meta标签内容,但是页面他只显示meta标签,但是具体内容他不显示,希望给予指教!

          • 露兜

            @御斐 什么是具体内容?

          • 御斐

            @露兜 我找到问题了,是代码有一点小错误,现在已经解决了,谢谢你! 对了,想请教一下,您这个代码支持portfolio页面吗?

          • 露兜

            @御斐 理论上支持,你试试看吧

  6. 人生高地

    你好,如果按照你的方法加字段面板。 写文章后没有在字段面板写入自定义的描述及关键字时,meta信息变成了"这里填默认的网页描述"和"这里填默认的关键字"而不是文章内容前200字作为描述和使用文章tags作为关键词

  7. ilikecss

    请问,自定义后台模块可以建立吗?? 

  8. Nie

    最后一步,添加到header.php的代码有没有办法直接添加到主题的function.php里?如果换了主题,每次都要去修改header.php,感觉比较麻烦。

    • 露兜

      @Nie 关键字:wordpress action wp_head

  9. Victor

    露兜,好像添加失效了 是不是因为wordpress 更新了 导致的?发文章页面没有成功添加自定义面板

  10. Victor

    之前都是可以 今天更新了一下 就失效了 但是字段有 面板没有

  11. 酸酸的

    你好,我想问下你这个怎么加一个上传附件的上传框。

  12. 酸酸的

    我添加上传框之后 不知道怎么去调用上传 求帮忙 谢谢啦

  13. 叮语

    添加自定义模板很轻松的解决了我目前的困扰。

  14. 欧美大图吧

    不是专业的,看着好吃力。。

  15. harries

    受教了,回去试试

  16. 大雄

    请问露兜大大,有没有办法调用使用同一个自定义字段的值的文章?
    比如
    "description" => array(
    "name" => "_description",
    "std" => "值",
    "title" => "网页描述:"),
    比如我有3篇文章都设置这个自定义字段的值为 露兜
    那么我怎么样才能把这3篇文章调用出来且只调用这3篇?

    • 大雄

      @大雄 研究了一晚上自己琢磨出来了,分享给有需要的朋友
      其中meta_key=的值为字段名,形式参考下面写的 _*****_value
      meta_value=是字段的值

      下面代码是获取了某个字段里的某个值,然后调用使用了该字段以及该值的6篇文章。
      调用思路有点类似于“调用当前文章的TAG下的其他文章”

      这样我们调用相关文章的形式就可以多种多样了,利于做SEO时的布局。
      <?php $ziduanming = get_post_meta($post->ID, '_ziduanming_value', true);
      query_posts('meta_key=_ziduanming_value&meta_value='.$ziduanming.'&showposts=6');while (have_posts()) : the_post(); ?>
      <li>
      <a target="_blank" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
      </li>
      <?php endwhile;
      wp_reset_query(); ?>

  17. virtual

    请问怎么把这个自定义字段面板放到标题的下面,文章内容的上面?

  18. leishine

    请问露兜大大,我把这几个代码放在functions.php的下面后,整个后台所有的中文都乱码了,是怎么回事啊?
    求解答!

  19. 陆舒杰

    露兜博主,你好,这个代码可以实现分类、标签、文章的自定义title、keywords与description吗?希望能得到解答,谢谢。

  20. 56度

    首先感谢露兜博主,现在正在使用您分享的这个自定义栏,这里想请教一下,如何让输入框宽度100%显示。

  21. Simon

    function create_meta_box() {
    global $theme_name;

    if ( function_exists('add_meta_box') ) {
    add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );
    }
    }

    这个global $theme_name;起什么作用,怎么看好像都没用到它啊

  22. 利器大大

    测试能用后,我把代码放在单独文件中,通过 get_template_part('functions/custom-post')来引用
    后台会提示Warning: Invalid argument supplied for foreach() in 模板路径\custom-post.php on line 113

    我把 function new_meta_boxes() 里面 global $new_meta_boxes;放在外面又可以了

    请教下,为什么在functions.php中时代码是正常,而把代码单独放一个文件时,需要把 global $new_meta_boxes;放在外面

    感谢~~

  23. gpsbar

    露兜大大,不知道如果同时添加两个自定义字段面板该怎么操作呢?我想用来做其企业产品展示,想把不同的产品属性做成不同的属性面板

1 2 3

发表留言