【WordPress】Advanced Custom Fieldsの使い方と出力方法
カスタムフィールドとは、 WordPressの投稿画面にはタイトルと本文の入力項目しかありません。 カスタムフィールドは、タイトルと本文以外にテキストやチェックボックス、画像などを追加で入力できるエリアを設置することは可能です。 例えば製品情報を掲載する際には、タイトルや本文以外に金額や発売日等を入力したいとなった場合に本文以外に入力フォームを設けることができます。
Advanced Custom Fieldsとは 高度なカスタムフィールドプラグインを使用して、WordPressの編集画面とカスタムフィールドデータのコントロールを完全に制御します。 必要に応じてフィールドを追加します。 フィールドビルダを使用すると、いくつかのボタンをクリックするだけで、WP編集画面にフィールドをすばやく簡単に追加することができます ! どこにでも追加できます。 投稿は、投稿、ユーザー、タクソノミーの用語、メディア、コメント、カスタムオプションのページまで含めてWP全体に追加できます ! どこにでも表示できます。デベロッパーフレンドリーな機能で、テーマテンプレートファイルにカスタムフィールド値を読み込んで表示できます。
目次
Advanced Custom Fields
wordpressでカスタムフィールドを作成する場合、大まかに2通りの方法があり、プラグインを利用して管理画面から追加する方法と、functions.phpに書く方法があります。
今回のAdvanced Custom Fieldsを利用してカスタムフィールドを追加する方法をお伝えします。
インストール
WordPressの管理画面から、「プラグイン → 新規追加」をクリックし「Advanced Custom Field」で検索。 画像のようにインストールして、有効化してください。
カスタムフィールドの設定
管理画面より、カスタムフィールドを開き「新規追加 > フィールドを追加」を押します。
フィールドを追加をクリック後に下記の画像のような画面が表示されます。
最低限下記3つの項目を登録すればカスタムフィールドは作成できます。
- フィールドラベル（わかりやい名前）：管理画面に表示される名前
- フィールド名（半角英数字）：出力時に必要とされる項目
- フィールドタイプ：テキストやテキストエリア、チェックボックス等を選択する項目
「位置」と書かれた部分、ここでルールを設定することで投稿タイプや固定ページ、カテゴリ等にカスタムフィールドを表示できます。 こちらを設定しなくては、カスタムフィールドは表示されないので注意してください。
カスタムフィールドの出力方法
画像のようにカスタムフィールドを設定した場合の出力方法になります。
テキストフィールドの表示
<?php the_field('product'); ?>
未入力の場合に非表示にする場合は下記のように記述します。
<?php if( get_field('product') ) { ?>
<?php the_field('product'); ?>
<?php } ?>
その他の項目は下記のように記述いたします。
チェックボックス・ラジオボタンフィールドの表示
値が1つの場合
<?php the_field('field-name'); ?>
値が複数の場合
<?php
$colors = get_field('field-name');
if( $field-name ){
echo implode(', ', $field-name);
}
?>
セレクタフィールドの表示
値が1つの場合
<?php the_field('field-name'); ?>
値が複数の場合
<?php
$colors = get_field('field-name');
if( $field-name ){
echo implode(', ', $field-name);
}
?>
画像の表示
画像配列の場合
<?php
$images = get_field('フィールド名');
if($images){echo '<img src="'.$images[url].'">';}
?>
画像URLの場合
<?php
$images = get_field('フィールド名');
if($images){echo '<img src="'.$images.'">';}
<?php endif; ?>
画像IDの場合の出力
<?php
$images = get_field('フィールド名');
if($images):
//wp_get_attachment_image_src(画像ID, '画像サイズ')で画像情報を取得
$src = wp_get_attachment_image_src($images, 'full');
//画像URLは配列の[0]にあるので、それを利用して画像出力
echo '<img src="'.$src[0].'">';
endif;
?>
日付（デイトピッカー）の表示
<?php the_field('field-name'); ?>
ユーザー
返り値のフォーマット[User Array],[User Object],[User ID]と3つ選択できます。
今回当社のホームページで利用した[User Array]の記述方法になります。
array() {
["ID"] => int()
["user_firstname"] => string() "名"
["user_lastname"] => string() "姓"
["nickname"] => string() "ニックネーム"
["user_nicename"] => string() "著者アーカイブのURL名"
["display_name"] => string() "ブログ上の表示名"
["user_email"] => string() "メールアドレス"
["user_url"] => string() "プロフィールのサイト項目で入力されたURL"
["user_registered"] => string() "2022-01-01 00:00:00" // ユーザー作成日時
["user_description"] => string() "プロフィール情報"
["user_avatar"] => string() "プロフィール写真のimgタグ" // Gravatar
}
下記のような記述で出力することが確認できました。
<div class="class-name">
<?php
$articleUser = get_field("user-name");
if( $articleUser ): ?>
<div class="class-name">
<?php echo $articleUser['user_avatar']; ?>
</div>
<div class="class-name">
<h6><?php echo $articleUser['display_name']; ?></h6>
<p><?php echo $articleUser['user_description']; ?></p>
</div>
<?php endif; ?>
</div>
まとめ
Advanced Custom Fieldsは簡単にカスタムフィールが作成できる便利なプラグインです。今回はテキストの項目追加をお伝えしましたが、その他にもいろいろな項目があるので試してみてください！
この記事を書いた人
connecti
CONNECTIは人と人を繋ぐ架け橋になるという思いで創業しました。
