【WordPress】管理画面内に項目を追加する方法|値を入力・保存できる項目を作成

WordPressのテーマやプラグインを作成していると、管理画面内のページに値を入力・保存できる項目を追加したい場合があると思います。

今回は、そのような場合に利用できるソースコード例となります。

【WordPress】管理画面内に値を入力・保存できる項目を追加する方法

例では、管理画面の固定ページ編集画面に、テキストを入力・保存できる項目を追加します。ソースコードは以下となりfunctions.phpに記述します。

// 固定ページ編集画面に追加する項目を定義
function my_meta_boxes() {
	add_meta_box(
		'my_section_id', // 項目を識別するID
		__( 'Section Title', 'my_theme' ), // 項目のタイトル
		'my_meta_boxes_callback', // 項目の内容を出力する関数を指定
		'page' // 項目を追加するページを指定
	);
}
add_action( 'add_meta_boxes_page', 'my_meta_boxes' );

// 項目の内容を出力する関数を作成
function my_meta_boxes_callback( $post ) {

	// nonceフィールドを追加
	wp_nonce_field( 'my_nonce', 'my_nonce_name' );

	// 項目内の値を保存するカスタムフィールドを取得
	$value = get_post_meta( $post->ID, '_my_meta_key', true );

	// 値を入力できる項目欄を出力
	echo '<label for="my_field">' . __( 'Description', 'my_theme' ) . '</label> ';
	echo '<input type="text" name="my_field" value="' . esc_attr( $value ) . '" />';
}

// ページ保存時の処理
function my_save_post_meta( $post_id ) {

	// 自動保存の場合はreturn
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	// 固定ページ以外の場合はreturn
	if ( $_POST['post_type'] != 'page' ) {
		return;
	}

	// nonceがセットされていない場合はreturn
	if ( ! isset( $_POST['my_nonce_name'] ) ) {
		return;
	} 
	
	// nonceが無効ならreturn
	if ( ! wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce' ) ) {
		return;
	}

	// 現在のユーザーが固定ページ編集の権限を持ってない場合はreturn
	if ( ! current_user_can( 'edit_page', $post_id ) ) {
		return;
	}

	// 項目欄の値がNULL、または項目欄の値が現在のカスタムフィールドと同じ値の場合はreturn
	$value = get_post_meta( $post_id, '_my_meta_key', true );
	if ( ! isset( $_POST['my_field'] ) || $_POST['my_field'] == $value ) {
		return;
	} 

	// 項目欄に入力した値を無害化
	$my_data = sanitize_text_field( $_POST['my_field'] );

	//  項目欄に入力した値で、カスタムフィールドの値を更新
	update_post_meta( $post_id, '_my_meta_key', $my_data );
	
}
add_action( 'save_post', 'my_save_post_meta' );

ソースコードの説明

以下、ソースコードのポイントとなる箇所の説明となります。

管理画面に追加する項目を定義|add_meta_boxesフック

ソースコード1行目からの以下の箇所は、管理画面に追加する項目を定義しています。

// 固定ページ編集画面に追加する項目を定義
function my_meta_boxes() {
	add_meta_box(
		'my_section_id', // 項目を識別するID
		__( 'Section Title', 'my_theme' ), // 項目のタイトル
		'my_meta_boxes_callback', // 項目の内容を出力する関数を指定
		'page' // 項目を追加するページを指定
	);
}
add_action( 'add_meta_boxes_page', 'my_meta_boxes' );

管理画面に追加する項目の定義はadd_meta_box関数で行い、アクションフックのadd_meta_boxes、またはadd_meta_boxes_{post_type}のコールバック関数内で利用します。

上記例では固定ページのみに項目を追加するため、add_meta_boxes_pageフックを利用しています。

また、add_meta_box関数に指定できる引数は他にもあります。詳しくは文末の参考サイト内を確認してみてください。

項目の内容を出力する関数を作成

ソースコード12行目からの以下の箇所は、項目の内容を出力する関数を作成しています。

また、作成した関数は、上記add_meta_box関数の第3引数に指定します。

// 項目の内容を出力する関数を作成
function my_meta_boxes_callback( $post ) {

	// nonceフィールドを追加
	wp_nonce_field( 'my_nonce', 'my_nonce_name' );

	// 項目内の値を保存するカスタムフィールドを取得
	$value = get_post_meta( $post->ID, '_my_meta_key', true );

	// 値を入力できる項目欄を出力
	echo '<label for="my_field">' . __( 'Description', 'my_theme' ) . '</label> ';
	echo '<input type="text" name="my_field" value="' . esc_attr( $value ) . '" />';
}

上記関数内では、項目に出力するHTMLの他、セキュリティ対策として、項目の値が現在のページから入力された値かを確認するため、wp_nonce_field関数で非表示のnonce(一度きりしか使われない任意の値)フィールドを追加しています。

また、追加したnonceの値は、ページ保存時にwp_verify_nonce関数で、値が正しいもので有効期限が切れていないかを確認しています。

項目に入力された値をカスタムフィールドへ保存

ソースコード26行目からの以下の箇所は、ページを保存すると、項目に入力された値をカスタムフィールドへ保存するコードとなります。

// ページ保存時の処理
function my_save_post_meta( $post_id ) {

	// 自動保存の場合はreturn
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	// 固定ページ以外の場合はreturn
	if ( $_POST['post_type'] != 'page' ) {
		return;
	}

	// nonceがセットされていない場合はreturn
	if ( ! isset( $_POST['my_nonce_name'] ) ) {
		return;
	} 
	
	// nonceが無効ならreturn
	if ( ! wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce' ) ) {
		return;
	}

	// 現在のユーザーが固定ページ編集の権限を持ってない場合はreturn
	if ( ! current_user_can( 'edit_page', $post_id ) ) {
		return;
	}

	// 項目欄の値がNULL、または項目欄の値が現在のカスタムフィールドと同じ値の場合はreturn
	$value = get_post_meta( $post_id, '_my_meta_key', true );
	if ( ! isset( $_POST['my_field'] ) || $_POST['my_field'] == $value ) {
		return;
	} 

	// 項目欄に入力した値を無害化
	$my_data = sanitize_text_field( $_POST['my_field'] );

	//  項目欄に入力した値で、カスタムフィールドの値を更新
	update_post_meta( $post_id, '_my_meta_key', $my_data );
	
}
add_action( 'save_post', 'my_save_post_meta' );

上記例では、アクションフックsave_postを利用し、ページ保存時の条件によって、項目に入力された値をカスタムフィールドへ保存しています。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。