WordPressのカスタムフィールドはプラグインのAdvanced Custom Fieldsを利用すると簡単に追加し活用することができますが、当方は項目数が10個以内ぐらいであれば、プラグインを利用しないようにしています。プラグインは入れれば入れるほど重くなりますし、動作干渉によるバグも起こりやすくなりますので、できるだけ利用を控えたいというのが理由です。

ここでは、プラグインなしでカスタムフィールドを追加するコードと、その解説を致します。

カスタムフィールドをプラグインなしで追加する方法

カスタムフィールドとは

カスタムフィールドとは、WordPressの管理画面に入力項目を設置し、そこに入力された値を活用してサイトに反映できる機能で、この機能自体はWordPressにデフォルトで備わっています。

入力項目を管理画面に表示するには、プラグインを利用するか、functions.phpへの追記が必要になります。

カスタムフィールドの追加方法(プラグインなし)

ここでは、店舗A、店舗B、店舗Cでそれぞれ住所を入力する項目を設置する例としてコードをお示しします。

PHP

<?php
//カスタムフィールドのメタボックス
function add_custom_fields(){
   add_meta_box(
      'custom_field_01', //セクションのID
      '店舗住所', //セクションのタイトル
      'insert_shop_fields', //フォーム部分を指定する関数
      'page', //投稿タイプの場合は「post」、カスタム投稿タイプの場合は「スラッグ名」、固定ページの場合は「page」
      'normal', //セクションの表示場所
      'high'  //優先度
    );
  }
add_action('admin_menu', 'add_custom_fields');
 
//カスタムフィールドの入力エリア
function insert_shop_fields() {
  global $post;
  //nounceフィールドの追加
  wp_nonce_field('custom_field_save_meta_box_data', 'custom_field_meta_box_nonce');
echo '
<table class="custom-fields">
  <tr class="border-top border-bottom">
     <th scope="row">
       <label for="shop_a">店舗A</label>
     </th>
     <td> 
       <input type="text" id="shop_a" name="shop_a" value="'.get_post_meta($post->ID, 'shop_a', true).'" />
     </td>
   </tr>
   <tr class="border-bottom">
      <th scope="row">
        <label for="shop_b">店舗B</label>
      </th>
      <td> 
        <input type="text" id="shop_b" name="shop_b" value="'.get_post_meta($post->ID, 'shop_b', true).'" />
      </td>
   </tr>
   <tr class="border-bottom">
   <th scope="row">
     <label for="shop_c">店舗C</label>
   </th>
   <td> 
     <input type="text" id="shop_c" name="shop_c" value="'.get_post_meta($post->ID, 'shop_c', true).'" />
   </td>
</tr>
</table>
';
}
 
//カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {
  //nonceがセットされているか確認
  if (!isset($_POST['custom_field_meta_box_nonce'])) {
   return;
 }
 //nounceが正しいか検証
   if (!wp_verify_nonce($_POST['custom_field_meta_box_nonce'], 'custom_field_save_meta_box_data')) {
    return;
}
  if(!empty($_POST['shop_a'])) { //入力済みの場合
    update_post_meta($post_id, 'shop_a', $_POST['shop_a'] ); //値を保存
  } else { //未入力の場合
    delete_post_meta($post_id, 'shop_a'); //値を削除
  }
  if(!empty($_POST['shop_b'])) { //入力済みの場合
   update_post_meta($post_id, 'shop_b', $_POST['shop_b'] ); //値を保存
 } else { //未入力の場合
   delete_post_meta($post_id, 'shop_b'); //値を削除
 }
 if(!empty($_POST['shop_c'])) { //入力済みの場合
   update_post_meta($post_id, 'shop_c', $_POST['shop_c'] ); //値を保存
 } else { //未入力の場合
   delete_post_meta($post_id, 'shop_c'); //値を削除
 }
}
add_action('save_post', 'save_custom_fields');
?>

設置結果

次のように、WordPressの投稿編集画面または固定ページ編集画面に入力項目が設置されました。ただし、この見た目はCSSで調整していて、デフォルトの見た目とは異なります。

コードの解説

add meta box

まず、カスタムフィールドを追加する関数add_meta_boxを用います。引数の詳細はこちらのページなど参照されると載っています。
ここでは固定ページに追加する例として'page'と書いている部分は、通常の投稿タイプであれば'post'、カスタム投稿タイプの場合はそのスラッグ名を'スラッグ名'と書きます。
セクションの表示場所は、'normal'では編集画面の下部に表示されますが、'side'とすると右側のパネルに項目が表示されます。
優先度は'high'にしないと、他のもの(例えばプラグイン「All in One SEO」の項目)の下の方に表示される場合があります。
insert_shop_fieldsと書いてある部分は、その後の関数名と揃える必要があります。

wp_nonce_field

wp_nonce_fieldの関数を使ってフォームを設置します。
フォームのHTMLを書いて、そのフォームに入力がされていれば保存、入力がなければ保存されていた値を削除する、というコードになっています。
uppdate_post_metaはカスタムフィールドの値を上書きする関数で、引数は投稿(ページ)のID、フォームのname属性の値、更新する値の順です。delete_post_metaはカスタムフィールドの値を削除する関数です。

まとめ

カスタムフィールドをプラグインなしで設置する方法をご紹介しました。
設置した項目の値を活用する方法はこちらをご参照ください。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。