上一篇教程中我們介紹了 WordPress 自定義欄位，以及自定義欄位的操作函式，但是對於自定義欄位的時候，在後臺新增的使用透過那個面板新增十分不方便，比如你要使用自定義欄位來實現 seo 功能，那麼你每次都需要重複輸入欄位名稱：titlekeywordsdescription 。

今天這篇文章，我們將講解為自定義欄位新增一個固定的面板，這樣就不用每次為每個欄位輸入欄位名稱了。

說明：不要誤以為自定義面板就是用來新增自定義欄位的，你可以透過本篇教程新增一個自定義欄位來幹任何事，比如你只是想顯示一個提示資訊而已，用來顯示瀏覽次數，等等。。。本篇教程的核心應該是怎樣在後臺新增自定義面板。

效果圖：

要在後臺建立一個面板，首先了解一個函式：

  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--要在編輯頁面建立面板的文章型別，比如 postpage.. 自定義的文章型別等
  7. //$context--(可選) 面板要顯示的位置，可以使用 normaladvancedside 分別為普通、高階 (貌似跟普通效果差不多) 、邊欄
  8. //$priority--(可選) 顯示的優先順序，可以使用 highcoredefaultlow 如果設定為 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" => "網頁描述:"),
  8.     "keywords" => array(
  9.         "name" => "keywords",
  10.         "std" => "這裡填預設的網頁關鍵字",
  11.         "title" => "關鍵字:")
  12. );

這是一個二維陣列，陣列的第一個元素就是 description 欄位的資訊，包括標題、欄位名、描述資訊。

二、建立 (顯示) 面板內容的函式

  1. function new_meta_boxes() {
  2.     global $post, $new_meta_boxes;
  4.     foreach($new_meta_boxes as $meta_box) {
  5.         $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
  7.         if($meta_box_value == "")
  8.             $meta_box_value = $meta_box['std'];
  10.         echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
  12.         // 自定義欄位標題
  13.         echo'<h4>'.$meta_box['title'].'</h4>';
  15.         // 自定義欄位輸入框
  16.         echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><br />';
  17.     }
  18. }

該函式用來顯示面板的內容，將作為 add_meta_box 函式才 callback 引數呼叫。

三、建立面板

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

這個函式程式碼就不解釋了，看前面函式詳細介紹。

四、儲存更新資料

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

改函式用來儲存和更新我們的欄位值

 

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 年，建議直接下載本站的提供的框架，研究和使用皆可。