Advanced Custom Fieldsを使ってみる

カスタムフィールドを柔軟に設定できるWordPressのプラグイン「Advanced Custom Fields」を使ってみます。

インストール

左ナビからプラグイン > 新規追加 を選択後、Advanced Custom Fieldsと検索します。
検索結果にAdvanced Custom Fieldsが表示されるので、今すぐインストールをクリックします。

インストール後、有効化をクリックします。

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

Advanced Custom Fieldsを有効化すると、左ナビにカスタムフィールドの項目が追加されています。
カスタムフィールドを選択後、フィールドグループの新規追加をクリックします。

フィールドグループの新規追加画面が表示されますので、タイトルを入力して、フィールドを追加をクリックします。

フィールドラベル、フィールド名、フィールドタイプが必須項目になります。
フィールドタイプは色々な種類がありますが、今回はよく使いそうなものをいくつか試してみます。

テキスト

テキストフィールドを追加します。

テキストエリア

テキストエリアを追加します。

Wysiwyg エディタ

スタイルを設定できる入力エリアを追加します。

画像

画像の参照を追加します。
返り値は画像URLにしています。

セレクトボックス

セレクトボックスを追加します。
選択肢の項目も合わせて設定しておきます。

チェックボックス

チェックボックスを追加します。
選択肢の項目も合わせて設定しておきます。

真/偽

1つのみのチェックボックスを追加します。

入力が完了したら公開をクリックします。

投稿 > 新規追加 から投稿画面を表示します。
本文入力エリアの下に先ほど追加した項目が追加できているのが確認できました。

カスタムフィールドの出力

設定したカスタムフィールドの値を出力してみます。

PHP

<div>テキスト: <?php the_field('post_text'); ?></div>
<div>テキストエリア: <?php the_field('post_textarea'); ?></div>
<div>Wysiwyg エディタ: <?php the_field('post_editor'); ?></div>
<div>画像(画像URL): <img src="<?php the_field('post_image'); ?>" /></div>
<div>セレクトボックス: <?php the_field('post_select'); ?></div>
<div>チェックボックス: 
<?php $checks = get_field('post_check');
if(is_array($checks)) {
	foreach($checks as $check) {
		echo $check . ', ';
	}
} ?>
</div>
<div>真/偽: 
<?php if(get_field('post_boolean')) {
	echo 'true';
} else {
	echo 'false';
} ?>
</div>

【参考サイト】

• Advanced Custom Fieldsの使い方
• 【WordPress】プラグイン Advanced Custom Fields の全フィールドの出力方法 – ONZE