wordpressでカスタムフィールドを設定する方法

自己紹介

ホームページ制作＆webに関するスキルシェアをしています。

今回は、wordpress管理画面から決まった情報を誰でも簡単に入力できる仕組み作り。カスタムフィールド作成方法について備忘録しておきます。
不動産情報、イベント情報など、決まった情報をどんどん発信していく時に使えます。

プラグインはAdvance Custom fields(ACF)

Advance Custom fields(ACF)プラグインを利用しました。老舗プラグインです。
設定方法は以下を参考にしました。
Advanced Custom Fieldsの全フィールドタイプを徹底解説

設定は簡単だったのですが、あれ？出力されない。
という事で、出力が少し大変でした。

！必ず子テーマを作ってから作業をしてください。

まずはfunction.phpへ追記

phpファイルでAdvance Custom fields(ACF)で設定された値を出力するように設定するので、Advance Custom fields(ACF)を無効にしたり削除すると出力するものがなくなりエラーになってしまうので、以下をfunctino.phpへ追記。

function is_active_acf()
{
    include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
 
    if( is_plugin_active( 'advanced-custom-fields/acf.php' ) ) {
        return true;
    } else {
        return false;
    }
}

出力したい箇所へ一括出力

カスタムフィールドの値が増減しても全てが出力されるコードになります。

<?php
$fields = get_fields();

foreach($fields as $value){
	if(is_array($value)){
	//選択肢などの場合
	$value_count = count($value); //複数選択されているか配列数チェック
		if($value_count > 1){
		 //値が1以上（複数）だったら
			foreach($value as $child){
				if(is_array($child)){
					echo $child['label'];
				}else{
					echo $child;
				}
				if($child === reset($value)){
					//ループの最後以外に改行させる
					echo '<br />';
				}
			}
		}else{
		//値が1つで返り値bothだったら
			echo $value['label'];
		}
	}else{
	//その他の値出力
		echo $value;
	}
}
?>

個々に出力をしてレイアウトをする方法

一括出力だとhtml構文を細かく設定できないので、個々に出力する方法を紹介します。
【フィールド名】にAdvance Custom fields(ACF)で設定をしたフィールド名を入力します。

テキスト出力

<?php
$field = get_field('フイールド名');
if($field){echo '<p>'.$field.'</p>';}
?>

選択肢

<?php
$select = get_field('フイールド名');

if($select){
	echo '<ul>';
	foreach($select as $child){
		echo '<li>';
		if(is_array($child)){
			//bothの場合、ラベルを出力
			echo $child['label'];
		}else{
			//単独の返り値の場合の出力
			echo $child;
		}
		echo '</li>';
	}
	echo '</ul>';
}
?>

画像URL

<?php
$images = get_field('フィールド名');
if($images){echo '<img src="'.$images.'">';}
<?php endif; ?>

日付出力

<?php
$datefiled = get_field('フィールド名');
if($datefiled) { 
  echo "私の誕生日は " . $datefiled . " です。";
}
?>

曜日も出したい場合

<?php
$week = array("日", "月", "火", "水", "木", "金", "土");
 
$datefiled = get_field('フィールド名');
if($datefiled) {
  $dateObj = new DateTime($datefiled);
  $windex = (int) $dateObj->format('w');
  $w = $week[$windex];
  echo $datefiled . "は" . $w . "曜日です。";
}
?>

サンプルコード

Advance Custom fields(ACF)でイベント情報を設定したので、その時のコードを紹介します。

Advance Custom fields(ACF)での設定は以下となります。

投稿ページに出力をしたかったので、page.phpファイルを編集しました。

<div class="event_info">
<?php
$field = get_field('event_title');
if($field){echo '<h2 class="event_title">'.$field.'</h2>';}

$datefiled = get_field('evet_data');
if($datefiled) {
  echo '<p class="event_data">' . $datefiled . '</p>';
}

$field = get_field('event_content');
if($field){echo '<p class="event_content">'.$field.'</p>';}

$field = get_field('evet_price');
if($field){echo '<p class="event_price">'.$field.'円</p>';}
?>
</div><!--enent_info-->

日付の出力がしっくりこなかったので、Advance Custom fields(ACF)の日付を設定した箇所の編集で以下のように設定を変更しました。

見やすくなって大成功です！

まとめ

カスタムフィールドは、プラグインが配布されてはいるけれど出力はphpファイル修正なので少しハードル高いですね。もっと誰でも使いやすいプラグインがないか調べてみます！