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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

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

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。カンタンですね。

まとめ

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

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

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

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください