[wp]カスタムフィールドでスライドショーを管理する方法

ひらめいた。今更。

wordpressの構築はphpの知識に左右されがちなので、html言語上がりだと大したことができない。だからってphpを勉強しましょうっていっても、闇雲に手を出すには相手が巨大なのでやっぱり難しい。いろんなケースを想定して、実現するにはどうすればいいのか、そもそも組み込めるのかとか、勉強が必要ですね。

構築イメージ
カスタムフィールド
スライド・単体の切り替え
スライドの表示・非表示
PC/SP切り替え
リンクの設置・非設置
まとめ的なもの

構築イメージ

スライドショーを設置するとして、その設置内容をどうやって管理すればいいんだよって話がある。作っておしまい、であればテーマファイルに直接書いちゃえばいいんだけど後々のことを考えると楽に編集できたほうがいい。楽にするのであればどれだけ便利にすればいいかって話もある。ということで、カスタムフィールドを活用すればテーマファイルをいじらなくていいし、画像もftpで上げたりしなくていいし、楽。近ごろのwpのメディアは記事に紐づいたりするんで一旦アップした画像の再利用がかなり楽になった。

普段用意するのは以下のような項目。

表示・非表示
画像（PC）
画像（SP）
リンクの設置・非設置
リンクURL

これを繰り返しフィールドで作成すれば、今のところ不便はない。地味に便利なのは「表示・非表示」。作りかけとか一旦下げとくとかができると結構楽。

で、制作するにあたってはスライドショーありきで話が進んだならその通りに作れば済むんだけど、スライドいらないな、1枚だけでいいなって場合もある。アクティブな物の数を拾って1枚なら非スライドで設置できたらいいよね、という感じ。

スライドショーに1枚だけ設置した場合の動作は使用するライブラリやら設定によって変わる。なにもないならいいんだけど、スワイプできそうな感じだったり1枚でページ送りしちゃったり妙なことになったりするんで、だったら条件分岐したほうがいいよねって。

そんな感じで。環境はSmartCustomFieldsでやっていくとする。

カスタムフィールド

ほぼ上記の通り。

項目	分類
表示・非表示	真偽
画像（PC）	画像
画像（SP）	画像
リンクの設置・非設置	真偽
リンクURL	テキストorURL

これはPC/SPで画像を切り替える前提なので、画像の切り替えが不要なら画像枠は1つでいい。

画像はファイルパスを書き出せた方が便利。というのは、レスポンシブでの画像切替は<picture>が楽だと最近自分の中で話題なので。<picture>での切り替えは<source>の記述になるので<img>でしか書き出せない状態は都合が悪い。まあ、php側で整形できるけど。

URLに関しては、ページ内リンクを入れたい場合もあるのでフォーマットはテキストの方が良かったりする。

スライド・単体の切り替え

ここがちょっとめんどくさい。

簡単な組み方としては、基本的に繰り返しフィールドは配列で格納されてるんで、count()で登録数を把握できる。だからそれで条件分岐すればいい。

<?php
  $sliderCount = count(SCF::get('slider'));
  if($sliderCount == 1):
?>
1枚だけ
<?php else: ?>
2枚以上
<?php endif; ?>

項目すべてが空欄であっても枠が存在するとカウントしちゃうんで、「画像なし」はこれでは組めない。ついでに、登録したものが非表示設定であっても関係ない。「最低でも1枚は表示状態で登録する」のルールがないと破綻する。

次の案は、最初から書き出してしまって具体的なところをカウントする方法。

<?php
  $slider = count(SCF::get('slider'));
  $cnt = 0;
  foreach($slider as $fields):
    if($fields['slider_show']):
      $cnt++;
    endif;
  endforeach;
?>

<?php if($cnt = 0): ?>
表示する画像がない場合
<?php elseif($cnt = 1): ?>
1枚だけ
<?php else: ?>
2枚以上
<?php endif; ?>

中身を掘っちゃうなら何でもありになるんで、細かい条件分岐が組める。
だけどカウント用と出力用でforeach()を2回やらなきゃいけないのでスマートじゃないなーって。

ACFだとこんな感じ。代わり映えしない。

<?php
  $cnt = 0;
  while(the_repeater_field('slider')):
    if(get_sub_field('slider_show')):
      $cnt++;
    endif;
  endwhile;
?>

やっぱり中身を出してきて整理するしかないのかも。

複数回データを取りに行くのが嫌だったら最初のforeachなりwhileなりで取得したタイミングで配列に格納してそこから出力する感じになる。2回取りに行く手間が無くなる代わり、それはそれでどうなのって感じがするけど。

スライドの表示・非表示

真偽を使って条件分岐させる。

<?php
  $slider = count(SCF::get('slider'));
  foreach($slider as $fields):
    $slider_show = $fields['slider_show'];
    if($slider_show):
        $slider_pc = $fields['slider_pc'];
 ?>
<picture>
  <img src="<?php echo wp_get_attachment_url($slider_pc); ?>" alt="">
</picture>
<?php endif; endforeach; ?>

表示・非表示の判定後に他のフィールドを取得したほうがある程度処理が軽くなるかなって感じで。

PC/SP切り替え

<picture>slick.jsだと動的に画像が切り替わっても問題なく動作することを確認してるので、何も気にすることなく<picture>が使える。応用すればタブレット用の枠も作れるのでかなり自由度は高い。画像の用意が面倒だけど。

<?php
  $slider = count(SCF::get('slider'));
  foreach($slider as $fields):
    $slider_show = $fields['slider_show'];
    if($slider_show):
      $slider_pc = $fields['slider_pc'];
      $slider_sp = $fields['slider_sp'];
 ?>
<picture>
  <source srcset="<?php echo wp_get_attachment_url($slider_sp); ?>" media="(max-width:767.98px)">
  <img src="<?php echo wp_get_attachment_url($slider_pc); ?>" alt="">
</picture>
<?php endif; endforeach; ?>

デバイスで切り替えるなら<img>だけでよくて、src内に条件分岐を作れば済む。

リンクの設置・非設置

難しいことはないけど面倒くさい。

<?php
  $slider = count(SCF::get('slider'));
  foreach($slider as $fields):
    $slider_show = $fields['slider_show'];
    if($slider_show):
      $slider_pc = $fields['slider_pc'];
      $slider_sp = $fields['slider_sp'];
      $slider_url_show = $fields['slider_url_show'];
      $slider_url = $fields['slider_url'];
 ?>
<?php if($slider_url_show): ?><a href="<?php echo $slider_url; ?>"><?php endif; ?>
<picture>
  <source srcset="<?php echo wp_get_attachment_url($slide_sp); ?>" media="(max-width:767.98px)">
  <img src="<?php echo wp_get_attachment_url($slide_pc); ?>" alt="">
</picture>
<?php if($slider_url_show): ?></a><?php endif; ?>
<?php endif; endforeach; ?>

判定と合わせてURLも取得した。ここまで来ると偽であっても1つくらいならいいんじゃないのって思う。

閉じタグのお陰で2箇所条件分岐が発生する。<a>は常設でhref=””だけ挿入って手もあるけど、リンクがないのに<a>はあるって形は気持ち悪い。

まとめ的なもの

大体こんな感じ。

htmlは最近だとphp枠外で記述するのが常で、echoで入れることが少なくなった。その方が単純に管理しやすい。膨大になれば文字数がめちゃくちゃ増えて逆に見づらいところも出てくるとは思うけど。

真偽で表示・非表示を管理するのはスライドに限らず使い勝手がいいギミックだと思うので、どんどんやればいいと思う。ただまあ、カスタムフィールドの限界というか、繰り返しの数が多くなると、フォーマットに収まっている割に見づらくなってよくわからなくなりがち。できるだけ項目は厳選したいし、画像もプレビューサイズは絶対にサムネの方がいい。見返すのが辛くなる。

繰り返しフィールドを多用するのであればSCFがオススメ、というのが現状の解。無料でやれることを踏まえたらこれに慣れるのが一番楽だと思う。並びもドラッグで入れ替えられるし（ACFの拡張アドオンによる繰り返しは並び替えができない）。触り始めた当初は何だこれって思ったけど。しかし視覚的にわかりやすいグループ分けができない。メッセージを噛ませて区切りにしてもデザイン的にわかりにくい。なんだったらSCF自体をコンテンツに分けてしまったほうがいいんじゃないかってレベル。そうすると見やすくなるけどSCFの一覧が大変なことになる。何が許容できて許容できないか、落とし所を見つけましょう。

そんな感じで。