WP ワードプレスでカスタムフィールドを追加する

WordPress

ワードプレス中級者になるための必須スキルは、カスタムフィールドを追加することです。
カスタムフィールドを追加する手順

1、アクションフックでadmin_menuにメソッドを指定する
2、add_meta_boxを使用する
3、フォーム要素を定義する
4、アクションフックでsave_postにメソッドを指定する

今回は前回追加したお知らせの投稿タイプの投稿ページにだけ、カスタムフィールドを表示させます。カスタムフィールドは場所ということにします。placeです

カスタムフィールドを設定する


add_action('admin_menu','add_place_field');
function add_place_filed(){
	
}

まずはアクションフックを使います。メソッドの中でadd_meta_boxを使用しますが、公式のページを見てみます。

<?php add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args ); ?>

さて真似てメソッドを完成させます。

add_action('admin_menu','add_place_field');
function add_place_filed(){
	// id 名称 viewのファンクション名 投稿タイプ名 
	add_meta_box('place_sectionid','場所','place_filed','info','normal');
}

place_filedメソッドを書いていきましょうか。わかりやすく書いてみます。

function place_filed(){
	echo '<h2>場所について</h2>';
}

とりあえずinput要素も何もない、ただ場所についてというh2要素を表示させています。
ここまでを振り返るとカスタムフィールドを表示させるだけなら、なんと簡単なことでしょうか。これだけのコードです

add_action('admin_menu','add_place_field');
function add_place_field(){
	add_meta_box('place_sectionid','場所','place_filed','info','normal');
}
function place_filed(){
	echo '<h2>場所について</h2>';
}

info投稿タイプの新規投稿ページの下部に、場所という名称のボックスと、場所についてという文字列だけのカスタムフィールドが表示されています。

もちろん、これだけではカスタムフィールドではないので、値を保存できるように修正していきます。

function place_filed(){
	$post = get_post($post);
	?>
	<label for="place">場所:</label><input type="text" name="place" value="<?php echo(get_post_meta($post->ID,'place',true)); ?>" />
	<?php
}

get_postでpostの情報を取得しています。
get_post_metaは投稿からカスタムフィールドの値を取得するメソッドで
第一引数にid、第二引数は値のkeyです。nameの値がkeyになるので、ここではplaceとしています。第三引数はとりあえずtrueにしておけばおけ

valueの値にカスタムフィールドの値を表示しているわけですが、これはカスタムフィールドに値がある場合はその値を初期値として表示しておくためです。

あとは保存処理です。

add_action('save_post','save_place_field');

function save_place_field($post_id){
    if(!empty($_POST['place'])){
        update_post_meta($post_id,'place',$_POST['place']);
    }else{
        delete_post_meta($post_id,'place');
    }
}

まずはアクションフックにメソッドを登録しています。これは記事が保存された時に、発火されます。

やっていることは単純でplaceに値があればplaceを保存して、なければ削除するというものです。

updateもdeleteもidとkeyを指定するだけです。

セキュリティ問題

ワードプレス公式のadd_meta_boxをみていると、nonceというものが出てきます。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_meta_box

なにやら認証に使っているようです。
これをhidden要素として隠し項目として持っておくことで、ワードプレスの投稿画面から入力したものであることを保証しているようです。

function place_filed(){
	$post = get_post($post);
	wp_nonce_field('my-place-custom-filed','place-nonce');
	?>
	<label for="place">場所:</label><input type="text" name="place" value="<?php echo(get_post_meta($post->ID,'place',true)); ?>" />
	<?php
}

wp_nonce_fieldは第一引数がアクション名となっています。まぁとりあえず他と被らない値をセッティング。第二引数がname属性の値です。他にもオプションがあります
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_nonce_field

これで隠しフィールドが追加されています

<input type="hidden" id="place-nonce" name="place-nonce" value="cce3227f49">
<input type="hidden" name="_wp_http_referer" value="/wp-admin/post-new.php?post_type=info">

あとは保存処理の時にこの隠し項目の値を検証してあげればOKです


function save_place_field($post_id){

	if(isset($_POST['place-nonce']) && $_POST['place-nonce']){
		//nonceのチェックを行う関数(引数はwp_nonce_fieldと同じ)
		if(check_admin_referer('my-place-custom-filed','place-nonce')){
			//保存処理を行う
			if(!empty($_POST['place'])){
				update_post_meta($post_id,'place',$_POST['place']);
			}else{
				delete_post_meta($post_id,'place');
			}

		}
	}

}

ifがネストしているコードになってしまいましたが、動作の確認のためこうしましょう。
全てのコードは以下です

add_action('admin_menu','add_place_field');
function add_place_field(){
	add_meta_box('place_sectionid','場所','place_filed','info','normal');
}
function place_filed(){
	$post = get_post($post);
	wp_nonce_field('my-place-custom-filed','place-nonce');
	?>
	<label for="place">場所:</label><input type="text" name="place" value="<?php echo(get_post_meta($post->ID,'place',true)); ?>" />
	<?php
}

add_action('save_post','save_place_field');

function save_place_field($post_id){

	if(isset($_POST['place-nonce']) && $_POST['place-nonce']){
		//nonceのチェックを行う関数(引数はwp_nonce_fieldと同じ)
		if(check_admin_referer('my-place-custom-filed','place-nonce')){
			//保存処理を行う
			if(!empty($_POST['place'])){
				update_post_meta($post_id,'place',$_POST['place']);
			}else{
				delete_post_meta($post_id,'place');
			}

		}
	}
}

これでカスタムフィールドを追加し、安全に保存することができるようになりました。

コメント

タイトルとURLをコピーしました