【AdvancedCustomFields・RepeaterField】出力方法まとめ
WordPressプラグインの中でもかなり重宝できるプラグイン【Advanced Custom Fields】。
有料ですが、Advanced Custom Fieldsを拡張できるプラグイン【Repeater Field】。
使い方は多岐に渡りますが、web制作の現場でよく使うフィールドの出力方法をまとめています。
変数などは使わずにできるだけシンプルで拡張性が高いようにしていますので参考にしてください。
コピペでお使いください。
INDEX
Advanced Custom Fields 出力方法
出力があるか判定してから出力
<?php if(get_field('フィールド名')): ?>
<?php the_field('フィールド名'); ?>
<?php endif; ?>
if文でカスタムフィールドに入力があるかを判定してから出力しています。
入力がない場合はif文内に記述した内容は出力されません。
elseを使って、入力がない場合には違う内容を出力することもできます。
特定ページのカスタムフィールドの内容を他ページで出力
<?php if(get_field('フィールド名',ページID)): ?>
<?php the_field('フィールド名',ページID); ?>
<?php endif; ?>
フィールド名の後にカンマで区切り、ページIDを入れるだけです。
トップページに入力したカスタムフィールドの値を他ページでも出力したい場合に使えます。
Repeater Field 出力方法
Repeater Fieldは、任意の回数カスタムフィールドを作成できるので、while文でループさせてすべて出力されるとループを抜けます。
<?php if(have_rows('フィールド名')): while(have_rows('フィールド名')): the_row(); ?>
<?php the_sub_field('フィールド名'); ?>
<?php endwhile; endif; ?>
こちらもif文で判定をしているので、入力があった場合にその回数分だけwhile文で出力を繰り返します。
その他 出力方法まとめ
フィールドタイプ 画像 返り値 画像URL
<img src="<?php the_field('フィールド名'); ?>">
画像URLで出力しているので、imgのsrc属性にカスタムフィールドの値が出力されるように。
セレクトボックス 使い方
簡単にフォントやカラーを変更したい際のセレクトボックスを用いた方法を紹介します。
まずはフィールドタイプでセレクトボックスを選択します。
『選択し』のテキストエリアにセレクトボックスで選択できるようにしたいことを記入します。
【出力したい内容】：【セレクトボックスに表示するテキスト】
というように記入してください。
上記ならば、管理画面のセレクトボックスに【ゴシック体】【明朝体】と表示され、選んだセレクトボックスに対応した値が出力されます。
今回はセレクトボックスの内容がCSSに関することなので、headタグ内に直接出力されるようにします。
index.htmlやhrader.phpのheadタグ内に記述。読み込んでいるstyle.cssの後で読み込むように。
<head>
<?php if(get_field('フィールド名',ページID)):?> // 全ページで出力したい場合にはページIDが必要
<style>
html{
font-family:<?php the_field('フィールド名',ページID); ?>;
}
</style>
<?php endif;?>
</head>
これでセレクトボックスを選択すると出力され、CSSが適用されます。
まとめ
【Advanced Custom Fields・Repeater Field】の使い方としては、ほんの一例ですが、一番よく使うフィールドをコピペで使えるようにまとめておきました。
他にも便利な使い方がありますので、今後もどんどん追記していきます。
コンテンツに関する質問やご要望は
より受け付けております。
お気軽にご質問ください。(内容によってはお答えできない場合もございます)
