首页 » WordPress

WordPress添加自定义字段面板

日期：2010-07-20 标签：WordPress教程

如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：点此联系我

文章目录

一、创建需要的字段信息
二、创建自定义字段输入框
三、创建自定义字段模块
四、保存文章数据
五、将函数连接到指定action（动作）
参考文章

我们在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.'" />';
}

?>

参考文章

Tutorial: Creating Custom Write Panels in WordPress

-- 完 --

本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/creating-custom-write-panels-in-wordpress.html

作者：露兜 » kaapass@outlook.com

业余编程爱好者。

140 条留言

点此留言

1 2 3 » 107

only博客
2010年7月21日 07:49

这个功能以前用到的不多，感谢博主分享
又学到一点：）

回复
zchiy2k
2010年7月21日 09:08

露兜这里每一篇都值得好好学习，很强大

回复
- Ludou
  2010年7月21日 19:19
  
  @zchiy2k 但是每篇文章只有少部分人能看得下去，能看得懂。
  
  回复
  - zchiy2k
    2010年7月21日 19:28
    
    @Ludou 愿意学习的人自然会钻研，有的文章也许现在用不上，但是当用的时候回头来看看也受益颇多。
    我加你GTalk了，有点问题想请教一下。
    
    回复
    - Ludou
      2010年7月21日 20:20
      
      @zchiy2k 我不用GTalk，有事给我发邮件
      
      回复
软件盒子
2010年7月21日 19:14

貌似很麻烦，呵呵

回复
- Ludou
  2010年7月21日 19:19
  
  @软件盒子本文是写给具有PHP代码开发能力的人员的看的，呵呵。
  
  回复
拆墙部队
2010年7月22日 14:47

露兜先生，我是“拆墙部队”我今天脑残的决定了离开博客界，当然我还是自己写自己的博客。但是我不想和博客界的人联系，我想摘掉所有的友情链接，因为没加 IM 通讯，所以我跟您打个招呼，我把友情链接摘掉。

摘掉时间：2010/07/22 AM 14:47（下午 2:47）

见谅！

回复
厦门SEO
2010年7月23日 17:18

不错。。。。。。。

回复
kmxz
2010年8月18日 20:10

非常感谢。正好需要这个功能。记得add_meta_box了。

回复
海皇
2010年9月7日 03:56

你好，我用你的方法去操作，怎么每篇文章的title前面都有一个 ” 这个符号
我想去掉
楼主能帮帮我吗？
谢谢啦

回复
- Ludou
  2010年9月7日 11:51
  
  @海皇本文没有教你去修改title
  
  所以你的问题，我不知道是什么原因引起的。
  
  回复
小游
2010年10月26日 23:55

正需要这样的功能，谢谢分享

回复
冰少
2010年11月6日 10:12

感谢分享，学习了！

回复
阿肯
2011年1月26日 13:27

感謝露兜提供的方法，這樣可以更容易把WORDPRESS變成企業網站後台了。
我是在台灣擔任網站設計的個人工作室設計者，去年用WP幫不少客戶建立過網站..
我想我嘗試結合一下檔案上傳欄位的功能，讓自定義字串的使用方式可以更多樣化。
若有更進一步的嘗試結果會回來回饋給您的，謝謝喔！

回复
- Ludou
  2011年1月26日 15:05
  
  @阿肯非常期待你的回音
  
  回复
badJohnny
2011年3月13日 03:29

博主，如果自定义填写面板用到了复选框，在很多值中可能会选择几个，怎么修改呢，麻烦吗？

回复
- Ludou
  2011年3月13日 09:41
  
  @badJohnny 第二段代码第16行改成：
  
  // 这里的 check 是第一段代码中填的复选框的name
  if ($meta_box['name'] == 'check') {
      $checkyes = '';
      // 这里判断复选框的自定义字段值有没有 1
      if(strpos($meta_box_value, '1') !== false) {
          $checkyes = 'checked="checked"';
      }
      echo '<input type="checkbox" name="'.$meta_box['name'].'_value[]" value="1" size="55" '.$checkyes.' /><br />';
  
      $checkyes = '';
      if(strpos($meta_box_value, '2') !== false) {
          $checkyes = 'checked="checked"';
      }
      echo '<input type="checkbox" name="'.$meta_box['name'].'_value[]" value="2" size="55" '.$checkyes.' /><br />';
  }
  else {
      echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'
  .$meta_box_value
  .'</textarea><br />';
  }
  
  第4段代码第18行改成：
  
  if ($meta_box['name'] == 'check' && is_array($_POST[$meta_box['name'].'_value'])) {
      // 自定义字段不能保存数组，所以这里用逗号将各个值隔开
      $data = implode(",",$_POST[$meta_box['name'].'_value']);
  }
  else {
      $data = $_POST[$meta_box['name'].'_value'];
  }
  
  回复
  - badJohnny
    2011年3月13日 10:09
    
    @Ludou 保存成功了，多谢，不过还有个问题，保存后的界面上，选定过的复选框状态不是checked，另外$checkyes这个具体怎么定义呢？
    
    回复
    - Ludou
      2011年3月13日 10:34
      
      @badJohnny 写错了，代码已更改。$checkyes是用于输出checked="checked"，但是你用的是复选框，自定义字段存储的是一个字符串，所以你得检测自定义字段的值是否包含这个框的值，包含就checked，之前选定过的复选框状态为勾选。
      
      回复
      - badJohnny
        2011年3月13日 10:46
        
        @Ludou 好了，感谢！这段代码非常实用
天下第一网
2011年3月16日 21:28

太复杂了。

回复
- Ludou
  2011年3月16日 21:50
  
  @天下第一网对于代码盲来说，确实复杂
  
  回复
企鹅
2011年5月29日 15:44

想在page页中，加keywords和description自定义字段应该怎么加？ Ludou，能否给予解答，劳驾。

回复
- Ludou
  2011年5月29日 16:11
  
  @企鹅插件:
  http://wordpress.org/extend/plugins/all-in-one-seo-pack/
  
  回复
  - 企鹅
    2011年5月30日 22:05
    
    @Ludou 谢谢！
    
    回复
artswork
2012年4月4日 21:55

谢谢，原文已经看不到了，幸有些处可以欣赏学习分享

回复
Eddie
2012年4月5日 09:59

呵呵，正需要~！收藏，谢谢~！

回复
eel
2012年4月9日 22:31

Ludou，你好。请问，如果要应用在body中应用该如何修改呢？

回复
- Ludou
  2012年4月9日 22:53
  
  @eel 这个你去网上搜索：wordpress 自定义字段模板
  
  回复
  - eel
    2012年4月9日 23:16
    
    @Ludou 已成功。谢了。
    
    回复
xz
2012年4月11日 12:15

牛牛牛！正需要呢，百度找来，学习了，泪涕感谢啊！

回复
老衲
2012年4月13日 12:30

https://www.ludou.org/creating-custom-write-panels-in-wordpress.html#comment-4171

那arry这个参数里面要赋予多个值的话不需要修改的么？

话说我也想知道下想弄个单选择框，这个怎么弄呢….

回复
- Ludou
  2012年4月13日 22:06
  
  @老衲自行搜索html 复选框、单选框，更改里面的HTML代码就可以了
  
  回复
172look
2012年4月20日 02:32

试着改了几次都没搞好还是用了回复中的代码修改了下终于ok了看来还得学习哈谢谢Ludou

回复
Reuel
2012年6月11日 21:46

除了方块比较大以外,还是可以的。
不过个人还是觉得如果要是有大批量文章的话这样还是不方便。不如直接调去摘要当描述，标签当关键字，多好。

回复
- Ludou
  2012年6月11日 22:21
  
  @Reuel 如果是采集站，你这种方法还是比较方便。
  
  对于个人博客而言，自定义程度高点也未必是坏事，毕竟每篇文章都是一个字一个字敲出来了，也不必在乎那么点时间填写描述和关键字。
  
  另外本文只是举例说明自定义字段面板的使用方法，不一定是用于描述和关键字，也可以用于类似产品价格，剩余数量等等附加信息。
  
  回复
佳仔
2012年6月22日 06:58

你好，我博客有个版块，是提供地图下载的，在文章的编辑页面，该栏目下的所有文章除了地图缩略图和下载地址不同，其他的如文件命名规则解释，相关声明都是一样的，我想在后期维护这些统一信息时节省一些时间，有没有这类插件，比如制定“字段1”的值是一段话，以后只要更新“字段1”，该板块下的所有包含“字段1”的地方都被自动替换了，能否采用你这篇文章的方法？

回复
- Ludou
  2012年6月22日 08:54
  
  @佳仔如果你已经发布了大量文章，且包含字段1，那么你可以直接在phpmyadmin中运行以下SQL语句实现批量替换：
  UPDATE `wp_postmeta` SET `meta_value` = '123' WHERE `meta_key` = '字段1';
  
  即可将所有字段1的值替换成123，如果字段值中有单引号，可以将其替换成 \'
  
  回复
佳仔
2012年6月22日 09:04

该板块下的文章我暂时还没发布，但是我预见会出现一个问题，就是如果我全部文章已经发布，但是我现在需要统一修改“下载说明”这段话，我现在采取什么方法可以减少将来的工作量，毕竟我不想一篇一篇的去修改不同文章的同一段话。

回复
- Ludou
  2012年6月22日 09:30
  
  @佳仔已经提供方法
  
  回复
佑
2012年7月21日 16:20

自定义字段面板是什么呀？是不是代码多出一块来这样子啊

回复
- Ludou
  2012年7月22日 15:33
  
  @佑文章编辑页面下面的自定义栏目，没有可以点击右上角的“显示选项”，勾选自定义栏目
  
  回复
新时代
2012年7月27日 18:11

在wordpress里面怎样把文章放到首页里面的模块里面，好像是添加自定义栏目可是给出名称和值了，也都保存了，可是那个代码怎么真啊不知

回复
北鸟博客
2012年8月3日 11:03

最后一段代码不添加是否可以用，我主要是用自定义字段在首页控制幻灯片的显示。是否必须添加最后一段在header.php文件里？？

回复
- Ludou
  2012年8月3日 15:47
  
  @北鸟博客不需要添加。最后一段是添加description和keywords标签的。
  本文自己是拿添加description和keywords标签作为示例而已，你可以根据需要来使用自定义字段。
  
  回复