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

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

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

#プラグインはAdvance Custom fields(ACF)
Advance Custom fields(ACF)プラグインを利用しました。老舗プラグインです。
設定方法は以下を参考にしました。
[Advanced Custom Fieldsの全フィールドタイプを徹底解説](https://bazubu.com/advanced-custom-fields-36452.html)

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

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

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

```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

<?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

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

##選択肢

```php

<?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

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

##日付出力

```php

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

曜日も出したい場合

```php

<?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)での設定は以下となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/bc06173a-ea0f-9d6b-7d83-d3be6fa01561.png)

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

```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-->

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/7ababd50-9a22-9253-3958-38af01078b06.png)

日付の出力がしっくりこなかったので、Advance Custom fields(ACF)の日付を設定した箇所の編集で以下のように設定を変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/802d5e42-38a3-9318-3710-4c60664625e7.png)

見やすくなって大成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/50797984-8e59-d755-f112-d7c452bfcd42.png)

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