WordPressのカスタムフィールドを設定してページに表示する

Advanced Custom Fields (ACF)を利用して編集画面にカスタムフィールドを追加し、その値を特定カテゴリのページに表示します。

インストール

まずはインストール

WordPressのプラグインメニュー▶新規追加をクリックして、右側にあるキーワード入力ボックスに「Advanced Custom Fields」を入力します。下記が表示されるので、「今すぐインストール」を押してインストール後、「有効化」を押して有効にします。

メニューに

が追加されます。

フィールドグループ追加

「フィールドグループ」をクリックして一覧表示です。

カスタムフィールドはいくつか集まって「フィールドグループ」として定義できます。

Add field Groupを押して「新規フィールドグループを追加」にグループの名称を入れます。

今回はは山頂の情報のページのカスタムフィールドを作成するので「山頂情報」と入れます。

カスタムフィールド追加

続けて最初のフィールドを追加します。

全般タブでフィールドタイプ、フィールドラベル、フィールド名を入れます。

テキスト、地図座標、地図座標といれました。

づつけて「検証」のタブです。

地図座標はこのページに必須なので「Required」を有効にしました。

次に「Presentation」タブです。

「プレースホルダーテキスト」と「先頭に追加」にテキスト入れました。

これでひとまず「フィールドを閉じる」を押して次に進みます。

次に設定です。

表示条件設定

「Location Rule」で編集画面にこのフィールドが表示される条件を指定できます。

今回は「投稿カテゴリー」が「山頂情報」と「等しい」場合に表示されるように設定しました。

ひとまずこれで右上の「Save Change」で保存です。

メニューから「フィールドグループ」をクリックしてグループの一覧表示にします。

編集画面での表示

次にこのフィールドグループが編集画面で表示されているか確認します。

新規投稿画面でカテゴリ欄の「山頂情報」をクリックするとカスタムフィールドが表示さました。

問題なさそうです。

ページへの表示

ページへの表示はテンプレートファイルを直接編集する必要があります。

ダッシュボードの左側メニュー「外観」▶「テーマエディタ」でテンプレートファイルの一覧を開き、対象のファイル（どの種類のページに挿入するかで変わる）の編集画面を開きます。

対象のファイルに

    <?php the_field('地図座標'); ?>

といった感じでカスタムフィールドのフィールド名を入れて表示させます。

正常に表示されました。

項目名も表示すると

		
			<dl>
				<dt>座標</dt>
				<dd> <?php the_field('地図座標'); ?>
				</dd>
			</dl>
		</div>

といった感じです。

カスタムフィールドに値が入っていたら表示

ただ、値がないと項目名のみ表示されてしまいます。
そこで関数をつくって値が入ってたときだけ表示するように変更します。

テーマが入っているフォルダの　functions.php　を編集し下記を追加します。
市販のテーマを使っている場合は子テーマにするか独自プラグインを作ってください。
テンプレートだけでなくエントリーからも使えるようにショートコードとして登録しておきます。

/*カスタムフィールドで表示制御 style="display:none  or display:blockを返す "*/
function custom_field_shortcode($atts)
{
	// ショートコードの属性をデフォルト値とマージする
	$atts = shortcode_atts(array(
		'field_name' => '',
	), $atts, 'custom_field');

	// カスタムフィールドの値を取得
	$field_value = get_post_meta(get_the_ID(), $atts['field_name'], true);

	// カスタムフィールドの値とショートコードの属性の値を比較
	if ($field_value) {
		return ('style="display:block"');
	} else {
		return ('style="display:none"');
	}
}
add_shortcode('custom_field_disp_sw', 'custom_field_shortcode');

テンプレート側はカスタムフィールドの項目名を入れてデータが入っているかをチェックして表示を切り替えます。

		<div <?php echo custom_field_shortcode(array('field_name' => '地図座標')); ?>>
			<dl>
				<dt>座標</dt>
				<dd> <?php the_field('地図座標'); ?>
				</dd>
			</dl>
		</div>

カスタムフィールドに値が入ってれば divのブロックに　style=”display:block”　が出力され、なければ　style=”display:none”　が出力され非表示になります。