今回は、投稿画面にメタボックス（独自のカスタムフィールド）を追加する方法を解説します。
メタボックスを追加することで、投稿に独自のオプション値を保存することができます。
メタボックスを追加するPHPのコード
メタボックスを追加するには、以下のようなコードを追加します。
<?php
if ( ! function_exists( 'my_add_meta_box' ) ) {
function my_add_meta_box() {
add_meta_box(
'my-option', // 識別子
'オリジナル設定', // 表示される見出し
'my_custom_meta_box', // 以下で定義する関数
'post', // 投稿タイプ、複数の場合は配列 array の形にする
'normal', // 表示する位置
'default', // 優先度
);
}
add_action( 'add_meta_boxes', 'my_add_meta_box' );
}
if ( ! function_exists( 'my_custom_meta_box' ) ) {
function my_custom_meta_box() {
$post_id = get_the_ID();
$value = get_post_meta( $post_id, 'my_option_key', true ); // 現在の値を取得
$value = esc_attr( $value ); // 無害化する
// セキュリティのために追加
wp_nonce_field( 'wp-nonce-key', '_wp_nonce_my_option' );
?>
<div class="my-metabox">
<label for="my_option_id">ラベル</label><br>
<input type="text" value="<?php echo $value ?>" id="my_option_id" name="my_option_name">
</div>
<?php
}
}
if ( ! function_exists( 'my_save_meta_box' ) ) {
function my_save_meta_box($post_id) {
// セキュリティのため追加
if ( ! isset( $_POST['_wp_nonce_my_option'] ) || ! $_POST['_wp_nonce_my_option'] ) return;
if ( ! check_admin_referer( 'wp-nonce-key', '_wp_nonce_my_option' ) ) return;
if ( isset( $_POST['my_option_name'] ) ) {
update_post_meta( $post_id, 'my_option_key', $_POST['my_option_name'] );
}
}
add_action('save_post', 'my_save_meta_box');
}上記のコードで以下のようなメタボックスが追加されます。
コードの解説
コードを上から順に解説していきます。
add_meta_box関数
まずは、add_meta_box関数について。
add_meta_boxは以下のような引数を指定します。
add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args );$id には、他のメタボックスと被らないユニークな値を指定します。メタボックスにid属性として出力されます。（必須）
$titleはメタボックスに表示されるタイトルです。（必須）
$callbackはメタボックスを表示する関数の関数名を指定します。上記のコードではadd_meta_boxの後にコールバック関数を定義しています。（必須）
$screenはメタボックスを表示させる投稿タイプです。複数指定する場合は、array('post', 'page')のように配列で指定します。（オプション）
$contextはメタボックスを表示する位置です。'normal', 'side', 'advanced'が設定でき、'side'にすると編集画面の右サイドバーに表示されます。初期値は'advanced'です。（オプション）
$priorityは、メタボックスの優先度です。’high', 'core', 'default', 'low', 'default'が設定できます。初期値は'default'です。（オプション）
add_action( 'add_meta_boxes', 'my_add_meta_box' );add_action関数を使って、add_meta_boxesが実行された時にmy_add_meta_box関数が読み込まれるようにします。
コールバック関数
add_meta_box関数の第三引数に指定する関数を記述します。
コールバック関数は上記コードの以下の部分です。
function my_custom_meta_box() {
$post_id = get_the_ID();
$value = get_post_meta( $post_id, 'my_option_key', true ); // 現在の値を取得
$value = esc_attr( $value ); // 無害化する
// セキュリティのために追加
wp_nonce_field( 'wp-nonce-key', '_wp_nonce_my_option' );
?>
<div class="my-metabox">
<label for="my_option_id">ラベル</label>
<input type="text" value="<?php echo $value ?>" id="my_option_id" name="my_option_name">
</div>
<?php
}このコードは、メタボックスのフォームを表示する関数です。
$post_id = get_the_ID();
$value = get_post_meta( $post_id, 'my_option_key', true ); // 現在の値を取得
$value = esc_attr( $value ); // 無害化するget_post_meta関数は、保存されている投稿のメタ情報を取得する関数です。
get_post_meta( $post_id, $key, $single );$post_idにはメタ情報を取得したい投稿のIDが入ります（必須）。
$keyには、メタ情報のキーが入ります（オプション）。上記では、現在編集中の投稿の'my_option_key'を取得しています。
$singleには、trueかfalseが入ります（オプション）。trueにすると1件だけ取得、falseにすると配列の形で複数取得できます。デフォルトはfalseですが、trueで取得することが多いです。
上記では、$valueに現在保存されている値を取得して、input要素のvalue属性に出力しています。
wp_nonce_field( 'wp-nonce-key', '_wp_nonce_my_option' );wp_nonce_fieldはnonce用のHTMLコードを出力する関数です。
nonceについてこちらの記事をご覧ください。
要は外部から送信されたデータを保存してしまわないようにするためのセキュリティです。
?>
<div class="my-metabox">
<label for="my_option_id">ラベル</label>
<input type="text" value="<?php echo $value ?>" id="my_option_id" name="my_option_name">
</div>
<?phpフォームはこのように記述します。
投稿のメタ情報を保存する
次は投稿のメタ情報を保存する処理です。
if ( ! function_exists( 'my_save_meta_box' ) ) {
function my_save_meta_box($post_id) {
// セキュリティのため追加
if ( ! isset( $_POST['_wp_nonce_my_option'] ) || ! $_POST['_wp_nonce_my_option'] ) return;
if ( ! check_admin_referer( 'wp-nonce-key', '_wp_nonce_my_option' ) ) return;
if ( isset( $_POST['my_option_name'] ) ) {
$value = $_POST['my_option_name'];
if( ! empty($value) ) {
add_post_meta( $post_id, 'my_option_key', $value, true);
update_post_meta( $post_id, 'my_option_key', $value );
} elseif ( $value === '' ) {
delete_post_meta( $post_id, 'my_option_key' );
}
}
}
add_action('save_post', 'my_save_meta_box');
}処理の流れとしては、nonceのチェック後、値が送信されていれば、保存をします。
送信された値が空の場合は、削除を行います。
if ( ! isset( $_POST['_wp_nonce_my_option'] ) || ! $_POST['_wp_nonce_my_option'] ) return;
if ( ! check_admin_referer( 'wp-nonce-key', '_wp_nonce_my_option' ) ) return;この部分はnonceの検証をしています。投稿画面から送信されたデータなのかを検証しています。
update_post_meta( $post_id, 'my_option_key', $value );このコードで保存をします。
チェックボックスの場合
フォームがチェックボックスの場合は、以下のようにして保存をします。
if ( ! function_exists( 'my_save_meta_box' ) ) {
function my_save_meta_box($post_id) {
// セキュリティのため追加
if ( ! isset( $_POST['_wp_nonce_my_option'] ) || ! $_POST['_wp_nonce_my_option'] ) return;
if ( ! check_admin_referer( 'wp-nonce-key', '_wp_nonce_my_option' ) ) return;
if ( isset( $_POST['my_option_name'] ) && $_POST['my_option_name'] ) {
update_post_meta( $post_id, 'my_option_key', $_POST['my_option_name'] );
} else {
delete_post_meta( $post_id, 'my_option_key' );
}
}
add_action( 'save_post', 'my_save_meta_box' );
}送信されたデータが未定義、または空の場合は削除をします。
まとめ
メタボックスを追加するコードは割と長いですが、それぞれの関数が何をやっているか理解できればそこまで難しい処理ではありません。
上記のコードを参考に、メタボックスの追加を試してみてください。
他にもこんな記事があります。
【WordPress】カスタムフィールドのテキストエリアの改行を反…
今回は、テキストエリアで入力したテキストの改行を、実際の表示にも反映する方法を紹介します。カスタムフ…
【WordPress】CSSとJavaScriptをfunctions.phpで読み込もう
今回はWordPressで自作テーマを作成する際のfinctions.phpでCSSをJavaScr…
