【WordPress】カスタムフィールド入力窓（メタボックス）の作り方、データ保存の仕方、呼び出し方|Personal WP Customization Notes (PWCN)

公開日：2024(令和6)年4月20日／最終更新日： 2024(令和6)年4月12日

WordPressで投稿や固定ページに本文の内容とは別のデータを任意に保存できる機能であるカスタムフィールド。

ブロックエディターの場合にはデフォルトで表示されていないので気づかない方もいるかも知れませんが、「ブロックオプション」の設定で表示させるようにすると、実にいろいろなデータが保存されているのが分かります。

例えば、プラグインが利用するデータとして、アクセス数やSEO向けのメタタグに入れる情報、エディター上で指定する有効／無効の設定などを保存していたり、更新日を一時格納していたりするのに利用されることが多いです。

ただ、これで表示されているのも氷山の一角で、以下の方法で隠しフィールドも含めて表示させると、いったいどれだけのデータが本文と別に格納されているの？と思えるほど様々なデータが付帯されていることにびっくりします。

隠されてるカスタムフィールドを一覧に再表示する方法

カスタムフィールドは、メタキーと値がセットになっていて、投稿などの編集画面から操作する場合には、前述したカスタムフィールド欄を表示させて、都度メタキーと値を追加していくという管理の仕方が基本となっていて、保存したデータはショートコードなどを使って本文内に表示させるというのが一般的な使用方法ではあるものの、それではメタキーをいちいち覚えていないといけないので面倒。

そこで重宝するのが、カスタムフィールドの値の表示・入力・更新を行うための入力窓を用意してメタキーを覚えることなく、カスタムフィールドの一覧を常に表示することなくカスタムフィールドのキーと値を管理する方法。この入力窓のことをWordPressの用語でメタボックスと言います。

本ページではこのメタボックスの作成、既存のデータの表示、保存、ショートコードを使った本文内への表示方法など、カスタムフィールドを便利に使うための基本的な作法を紹介していきます。

なお、私自身がカスタマイズする際のメモも兼ねていますので、諸所不備や端折っている部分もあるかもしれませんのであしからず。

カスタムフィールドを扱うための基本的な手順

以下がカスタムフィールドを操作する一連の流れです。

目的の場所（投稿や固定ページ）へカスタムフィールドの値を表示、入力、修正するための入力窓（メタボックス）を作る
メタボックスの中に表示させる内容（フォーム）を作る
投稿や固定ページの公開・更新ボタンクリック時にメタボックスの値も更新する
保存されている値を本文内へ呼び出す

カスタムフィールドの入力窓の作成と保存

上記の1～3の内容は、基本的には以下のコードで実装できます。コードの後で、いろいろと解説します。

/***** メタボックスの表示とカスタムフィールドの更新 *****/
/* メタボックスを作る */
function pwcn_add_meta_panel() {
	add_meta_box(
		'pwcn-meta-panel', // 編集画面セクションのHTML要素のID
		'メタボックスのタイトル', // 編集画面セクションのタイトル
		'pwcn_add_meta_panel_callback', // 編集画面セクションにHTML出力する関数
		'post', // 投稿タイプ
		'normal',// 編集画面セクションが表示される部分
		'high'//位置
	);
}
add_action('admin_menu', 'pwcn_add_meta_panel');

/* メタボックスの内容を作る */
function pwcn_add_meta_panel_callback(){
//カスタムフィールドの設定
    $field = get_post_meta(get_the_ID(), 'メタキー', true));
//表示する内容
?>
<textarea name="メタキー" id="メタキー" cols="100" rows="1"><?php echo ($field); ?></textarea>
<?php
}

/* カスタムフィールドの値を保存する処理 */
function pwcn__meta_panel_save($post_id){
//自動保存では更新しない
if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
	return $post_id;

//一括更新では更新しない
if(isset($_POST['action']) && $_POST['action'] == 'inline-save') 
	return $post_id;

//情報の更新
if(isset($_POST['メタキー'])){
	update_post_meta($post_id, 'メタキー', $_POST['メタキー']);
} else {
		delete_post_meta($post_id, 'メタキー');
}
}
add_action('save_post', 'pwcn__meta_panel_save');

コードは3つに分かれています。コード内の「メタキー」という部分は、投稿編集画面でいう「名前」の部分になりますので、同じものを設定するようにします。

メタボックスの表示と表示させる内容の設定

まず「 pwcn_add_meta_panel()」というユーザー定義関数で以下のことを行っています。

どの投稿タイプの編集画面に入力窓（メタボックス）を表示させるのか？
メタボックスの内容を表示させるのは何なのか？
メタボックスを表示させる位置はどこなのか？

上記コードでは投稿タイプを「post」とし、「投稿」の画面に表示させるようにしています。

メタボックスの位置は「normal(本文の下)」なのか「side(サイドバー)」なのかを指定し、「high(なるべく上へ)」または「low(なるべく下へ)」のいずれかを指定します。

なるべく．．と書いたのは、メタボックスを表示させるプログラムの順によって前後することがあるからです

そして、メタボックスに表示させる内容として「pwcn_add_meta_panel_callback()」を指定しています。

このユーザー定義関数の内容自体は、一旦PHPを切ることでHTMLが使えるようになるので、上記コード例ではtextareaタグを使って必要項目を設定したり、表示させたりしています（基本的にnameとid要素はメタキーで構いませんし、変えるとかえって混乱するかもしれません）。

そして大事なのが、既に値がある場合には表示させることで、$fieldでカスタムフィールドの値を引き出して、textareaの初期値として出力させるようにしています（これを省くと編集画面を開いた際に項目が空になり、そのまま更新すると値が消えてしまいますので必ず設定するようにします）。

今回は複数行テキスト（textarea）タグを使っていますが、他にもいろいろと種類があるので、以下に基本的なタグや使い方の注意点などを掲載しておきます。

単一行テキスト(input)

<input type="text" name="メタキー" value="<?php echo $field ?>" size="60" />

複数行テキスト(textarea)

<textarea name="メタキー" id="メタキー" cols="60" rows="4" /><?php echo $field ?></textarea>

チェックボックス(input)

コードの?>の手前で以下を定義
if( $field == 1 ) {
	$field_check = "checked";
} else {
	$field_check = "/";
}

<input type="checkbox" name="メタキー" value="1" <?php echo $field_check ?>>

ドロップダウンリスト(select)

<select name= 'メタキー' >
<option value='1' <?php selected('1', $field ); ?> selected >選択肢1のテキスト</option>
<option value='2' <?php selected('2', $field ); ?>>選択肢2のテキスト</option>
</select>

ラジオボタン(input)

<ul>
<li><input name="メタキー" type="radio" id="メタキー" value="1" <?php checked( '1', $field ); ?> checked />選択肢1のテキスト</li>
<li><input name="メタキー" type="radio" id="メタキー" value="2" <?php checked( '2', $field ); ?> />選択肢2のテキスト</li>
</ul>

また、メタボックスへは複数の項目を表示・管理できるので、$field変数とメタキーを変えてコードを追加していけばいいでしょう。

コードを完成させて保存した段階で、特に問題がなければ、投稿編集画面にメタボックスが表示されるはずです。表示されない場合は上記コードのどこかの部分で記述の誤りがありますので修正してください。

簡潔に紹介するため、コードには入力の制限やセキュリティに関するものを含んでいません。できるだけ安全に値の取り扱いができるよう、文末の「補足（セキュリティや入力制限など）」を必ず一読ください。

入力した値の更新・保存

「pwcn__meta_panel_save()」というユーザー定義関数でメタボックスの内容（項目）に入力した値を保存する処理をしています。

「下書き保存」「公開」「更新」など保存する処理をする際にメタボックス内の内容が上書きされます（空にすれば今まで保存されていた内容は破棄されます）。

これも「メタキー」の部分へメタボックスの内容のところと同じ文字列を入れればOKで、複数ある場合は以下の行を追加して処理させます。

//情報の更新
if(isset($_POST['メタキー'])){
	update_post_meta($post_id, 'メタキー', $_POST['メタキー']);
} else {
		delete_post_meta($post_id, 'メタキー');
}

カスタムフィールドに保存した値を投稿の中へ呼び出す

これについては、以下のページで詳しく解説していますのでご覧ください（ショートコードを使う方法です）。

カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード（メモ）

補足（セキュリティや入力制限など）

今回紹介したコードでは、できるだけ簡単に投稿編集画面へメタボックスを表示させ、値を更新するということが実装できるよう、値のチェック（制限）やセキュリティに関する記述はあえて加えていません。

WordPressに限らず、また、今回のようなメタボックスでのデータ入力などに限らず、誰かが何かを入力して、データとして保存するという処理をする際には、必ず意図した値以外のものを入力して保存できる状態になっていないか、その場所から入力されたものに間違いがないかという入力時のチェックを行うようにしましょう。

もちろん出力時に不正なものを出力（表示）させないということも大事ですが、まずはできるだけ確実に意図しないものを保存させない工夫をすることが個人的には大事だと思います。

以下のページでは、データのサニタイズ（無害化）と、入力セキュリティの1つであるnonceについて書いていますので、是非ご覧ください。