Advanced Custom Fieldsの基本的な使い方

Advanced Custom Fieldsの基本的な使い方のアイキャッチ画像

WordPressでカスタムフィールドを利用すると、投稿画面に新たな入力項目を追加することができ、通常の投稿ではできない複雑なカスタムを行うことが可能になります。プラグインを使うとカスタムフィールドは簡単にできますが、プラグインもたくさんあるので「どれを選んでいいかわからない」なんて方にはAdvanced Custom Fieldsがおすすめです。僕はCustom Field Suiteを使っていたのですが、Advanced Custom Fieldsに乗り換えました!

Advanced Custom Fieldsの使い方

簡単に、ざっとAdvanced Custom Fieldsの使い方を説明します。

インストール

まず、プラグインのインストールを行います。
プラグイン>新規追加>プラグインの検索で「Advanced Custom Fields」を検索>今すぐインストール>プラグインを有効化でOKです。

フィールドの作成

インストールするとメニュー下部に表示される「カスタムフィールド」から新規追加で新しい登録画面を追加します。

ここにタイトルを入力

カスタムフィールドのタイトルです。わかりやすい名前をつけてください。

フィールドを追加

フィールドを追加で各項目を設定します。順序は入力順序で、出力とは関係ありません。必須の基本設定だけ解説します。

フィールドラベル
管理画面での項目です。日本語の入力でOKです。
フィールド名
出力に利用します。半角英数、アンダースコア、ダッシュが利用できます。取り回し的に半角英数、アンダースコアで入力しましょう。
フィールドタイプ
入力のタイプを設定します。基本はフォームタグに準じますが、関連記事やデイトピッカー、カラーピッカー、グーグルマップなども設定できます。
位置
基本は投稿タイプでOKで、カスタムフィールドを追加する投稿タイプを選択します。
オプション
  • 位置:基本ノーマルでOK
  • Style:スタンダードWP metaboxを選択
  • 画面に表示しない:ノーマルの入力項目で投稿画面に表示させないものにチェックを入れます。

基本的な設定は上記でOKです。Advanced Custom Fieldsは様々な入力をサポートしておりますので、上記以外にも複雑な設定を行うことができますが、今回は割愛します。

Advanced Custom Fieldsの出力方法

カスタムフィールドの出力は入力がなければ項目ごと表示しないケースが多いので、一旦変数に格納すると取り回しが便利なので、その方法で紹介します。

値が一つの場合

<?php
  $変数名 = get_field('フィールド名');
?>
<?php if ($変数名): ?>
<? echo $変数名; ?>
<?php endif; ?>

複数の値がある場合

複数の値(配列)がある場合は、ループで取り出します。チェックボックスなどが、それにあたります。

<?php
$変数名 = get_field('フィールド名');
?>
<?php if ($変数名): ?>
<?php foreach((array)$変数名 as $value) { echo $value;} ?>
<?php endif; ?>

//値を|などで区切る場合はドットでつないでシングル(ダブル)クオートで囲みます。
<?php foreach((array)$変数名 as $value) { echo $value.'|';} ?>

画像やファイルなど文字列以外の出力

画像やファイルの出力方法です。

画像の場合

項目の設定時に返り値を画像IDに設定します。

<?php
$変数名 = get_field('フィールド名');
$変数名 = wp_get_attachment_image_src($変数名, 'サイズ指定');
?>
<?php if ($変数名): ?>
<img src="<?php echo $変数名[0]; ?>" alt="">
<?php endif; ?>

ファイルの場合

項目の設定時に返り値をファイルURLに設定します。

<?php
  $変数名 = get_field('フィールド名');
?>
<?php if ($変数名): ?>
<a href="<? echo $変数名; ?>">ファイル名</a>
<?php endif; ?>

基本的な使い方は以上になります。その他にも色々できることがありますので、なにか厄介な入力条件が発生した場合はAdvanced Custom Fieldsを試してみることをおすすめします。