投稿ページにカスタムフィールドを追加して専用更新画面を作る方法

本日は投稿画面にカスタムフィールドを追加して画面を作る工程を解説いたします。

投稿ページにカスタムフィールドを追加して専用更新画面を作る方法

具体的な使い方を解説すると長くなってしまうので実際の投稿ページをまとめておきます。本記事の想定としては「全国の飲食店を食べ歩きログで残していくウェブサイトを運営」しているパターンとなります。

専用メディアを運営する上では以下の２パターンがありますよね。

▼Aパターン
・通常のブログ（投稿ページ）
・食べ歩き日記（カスタム投稿タイプ）

▼Bパターン
・ブログと食べ歩き日記（投稿ページ）
※１画面で両方を使い分ける運用

Aパターンは「ブログと食べ歩き日記を別々で管理できるメリット」がある反面で運営者の負担も増えます。運営がシンプルなのは「Bパターン」ですよね。とはいえ投稿ページの標準機能だけでは管理できる項目数が少ないのでカスタムフィールドを使って両方が更新できる専用の投稿画面を作り込んでいく必要があるわけです。

カンタンに言えば「投稿ページ＋カスタムフィールドで柔軟な専用画面を作る」ことができます。独自のプラグインを使うと今後のアップデートでバグが出たり、場合によってはライセンス問題もあるのでfunctions.phpのみでカスタマイズすることによって可能な限り『柔軟に画面を作成するというのが本記事の主旨』となります。

デフォルトの投稿画面

カスタマイズを行う前の画面です。ブログの投稿には最適ですが「食べ歩き日記」には少し使いにくいですね。

カスタマイズ後の投稿画面

下記が「食べ歩き日記」も更新できる専用の入力画面を追加した例です。

画面の都合で「ディスカッション」と「抜粋」を非表示にしています。あと「アイキャッチ画像」の位置も調整済みです。念のために投稿画面へ追加した「6項目」をそれぞれ書き出しておきます。

・お店の正式な名称
・お店の場所
・お店のジャンル
・お店の評判
・お店の特徴
・感想をひと言

店舗レビューに使う項目なので小分けにしておくと更新性が高まりますよね。実際に書き込んだ例が以下です。

記事側には「特定の値に入力があれば」という条件分岐を書いて出力可否を決定するのが柔軟かもしれません。

カスタムフィールドの追加方法

独自の各入力フォームを追加するには「add_meta_box」を使用すればOKです。

// カスタムフィールドを追加する
add_action( 'admin_menu', 'add_store_reviews_custom_field' );
function add_store_reviews_custom_field() {
	add_meta_box( 'custom-store_reviews_item_name', 'お店の正式な名称 ', 'create_store_reviews_item_name', 'post', 'normal' );
}

そして管理画面内に追加する処理。

// カスタムフィールド用のHTMLを追加する
function create_store_reviews_item_name() {
	$keyname = 'store_reviews_item_name';
	global $post;
	// カスタムフィールドの保存値を取得する
	$get_value = get_post_meta( $post->ID, $keyname, true );
	// nonceを追加する
	wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
	// HTMLを出力する
	echo '<input type="text" name="' . $keyname . '" value="' . $get_value . '">';
}

最後に保存の処理を足せば完了ですね。

// カスタムフィールドを保存する
add_action( 'save_post', 'save_store_reviews_custom_field' );
function save_store_reviews_custom_field( $post_id ) {
	$custom_fields = ['store_reviews_item_name'];
	foreach( $custom_fields as $d ) {
		if ( isset( $_POST['nonce-' . $d] ) && $_POST['nonce-' . $d] ) {
			if( check_admin_referer( 'action-' . $d, 'nonce-' . $d ) ) {
				if( isset( $_POST[$d] ) && $_POST[$d] ) {
					update_post_meta( $post_id, $d, $_POST[$d] );
				} else {
					delete_post_meta( $post_id, $d, get_post_meta( $post_id, $d, true ) );
				}
			}
		}
	}
}

投稿ページに保存値を出力する

カスタムフィールドを取得して出力する流れが以下となります。

<?php
// カスタムフィールドの値を取得する
$store_reviews_item_name = get_post_meta($post->ID, 'store_reviews_item_name', true);
?>

<?php echo esc_html( $store_reviews_item_name ); ?>

出力時はお好みのhtmlに合わせて記述すればOK。カンタンですね。

まとめ

本日は「投稿画面に専用項目を追加する手順」をご紹介いたしました。

ワードプレスは投稿画面もカスタマイズできるのでお好みの状態へ仕上げられます。もちろん、投稿ページはブログ専用で使っても構いません。また状況に応じて入力ボックスを表示させる方法もありますよね。

運営するウェブサイトのコンテンツに最適化した画面を用意するのがおすすめです。