[wp]Advanced Custom Fieldsの活用メモ

普段よく使うやつのメモ。

よく使うのにWPの頻度が低いから忘れる。

入力の有無

例えば「text」ってのを作った場合、こうする。

<?php if(get_field('text')): ?>
<?php the_field('text'); ?>
<?php endif; ?>

get_field()をifに突っ込むと中身があるかどうかが分かる。
the_field()で表示。

get_field()はechoに続けるとthe_field()と同じになるんで、だから変数にしたほうが楽なときもある。

<?php $text = get_field('text'); ?>
<?php if($text): ?>
<?php echo $text; ?>
<?php endif; ?>

whileで回すとか、配列から書き出したいとか、そういう時に楽になるかも。

項目単体の表示・非表示は上記の感じでいいんだけど、グループでまとめたいってなったらちょっとめんどくさい。

「text01~text03のどれかが入力されてたら表示したい」ってなると、こうする。

<?php if(get_field('text01') || get_field('text02') || get_field('text03') ): ?>
<?php if(get_field('text01')): the_field('text01'); endif; ?>
<?php if(get_field('text02')): the_field('text02'); endif; ?>
<?php if(get_field('text03')): the_field('text03'); endif; ?>
<?php endif; ?>

これだけだとそこまでifで区切らなくてもいいよってなるけど、実用的にはhtmlタグで囲うとmarginとかpaddingが関わってくるので、中身空っぽのhtmlタグの余白だけ生きてるっていうめんどくさいことになる。

同様に、それぞれ「if(get_field(‘text01’)):」って感じに入力の有無を判定してるけど、なかったらないで無が生成されるだけなんで無くてもいいっちゃいいけど、まあhtmlタグで囲ってることもあるしね。

真/偽の活用

時と場合によるから最善とは言わないけど、フィールドタイプ「真 / 偽」を使うともうちょっといい感じにできる。

<?php if(get_field('text_active') == 1 ): ?>
<?php if(get_field('text01')): the_field('text01'); endif; ?>
<?php if(get_field('text02')): the_field('text02'); endif; ?>
<?php if(get_field('text03')): the_field('text03'); endif; ?>
<?php endif; ?>

「text_active」にチェックが入ってたら囲ってる中身を表示する、って処理。
これを仕込んでおけば、項目に入力してある状態で表示・非表示の切り替えができる。

「真 / 偽」の判別は以下の通り。

  • 0:チェック無し
  • 1:チェック有り

最初の設定がめんどくさいけど、更新のことを考えたら後が楽になる。

ACFの設定で各項目内に「条件判定」ってのがあって、例えば「真/偽がチェックされてたら表示する」ってのを仕込める。これもやっておくと管理画面がスッキリしていい感じ。

「条件判定」は入力必須と共存できる。表示してるときは入力必須、ってことができて便利。

タブの活用

ACFは「レイアウト」を設定できる。
カスタムフィールドをグループ分けできるので、カスタムフィールドが多すぎてクソ長いし見づらいんじゃボケェってなった時にすごく助かる。

オススメは「タブ」で、それこそタブの切替でグループを分けられるからホント便利。
しかもタブ自体に「条件判定」が付けられるんで、「真 / 偽」でまとめたタブを作ってそこでチェックを入れたら対応するタブを表示する、ってことができる。

でも調子こいていっぱいカスタムフィールドを作るとACFの編集ページがめちゃくちゃ長くなって見づらくなる、編集しづらくなるのがつらい。

ショートコード枠の実装

用途別に問い合わせフォームを作ってページごとにショートコードを埋め込んでいくってのはよくある話。ショートコードは本文中に埋め込むしかないんで、それでいいならいいんだけど、デザインの関係上本文に埋め込むと都合が悪いってことも多々ある。

最近はビジュアルエディターを活用してるから特にね。

カスタムフィールドでショートコード入力欄を作りたい場合、the_field();で出力すると文字列扱いになってショートコードが機能しない。ショートコードが機能する書き方は以下の通り。

使うときは「カスタムフィールド名」部分をいじる。

echo apply_filters('the_content', get_post_meta($post->ID, 'カスタムフィールド名', true));

記事は色々あるけど今回の参照元はこちら。

Advanced custom fieldでショートコードを入力したい
カスタムフィールドを使って、TablePressのテーブルを表示した案件がありました。TablePressは表示にショートコードを使いますので、Advanced custom fieldでカスタムフィールドを作り、そこにショートコードを入力

画像の扱いについて

画像を設定する場合、返り値はいつも「画像URL」にしてる。
個人的におすすめ。

the_field();で書き出すと当然画像のURLが表示されるんで、background-imageに仕込めるし、title=””やalt=””への指定も任意にできて楽。まあ、人によるんだけど。

「プレビューサイズ」っていうのは管理画面上の、画像を指定した際の表示方法についての項目。
これは「サムネイル(150 x 150)」でいい。でかいと専有面積がえらいことになるし、大体がわかればいいんで最小のやつを選ぶ。

「説明」について

フィールドを追加する際に用意されている項目。
書いてあるとおり、管理者向けのメモ欄。

難儀なことに、ここに入力したものはそのまま表示される。
そのままっていうのは、改行しても改行タグがついてないから改行されない。
しかも、htmlタグを記入するとそれが機能しちゃう。
コードを表記することができない。

つまり、ここに入力する際は、ベタ打ちで済む場合を除いて、htmlを記載するときと同じ手順が求められる。地味に厄介。

コメント

タイトルとURLをコピーしました