[wp]カスタムフィールドの繰り返しの活用

管理画面ベースでの更新が視野に入るようになる。

はじめに

AdvancedCustomFieldsの有料オプションとかSmartCustomFieldsとかで、カスタムフィールドを「繰り返し」で扱うことができる。要するにフォーマットの決まった、項目数が動的なカスタムフィールドを作成できる。

なので、パターンの決まった内容を作るときに活用できる。

活用例

リストとかテーブルで組むことの多いコンテンツは該当しやすい。

会社概要の内容だとか、商品紹介の詳細情報とか、スライド画像の管理だとか。

ゼロからWEBサイトをデザインして組んでいく場合は基本的にきっちりかっちり作ったものをWEB上に乗っけるんでそのままやってればらくなんだけど、後々差し替えることを考えると視覚的にも操作的にも分かりやすいほうがいい。まー、HTMLとかに慣れてる人は、完成済みのサイトに手を入れる場合ソースコードを直接弄るのが楽だけど。素人でもわかる的な、下手に手を入れてデザインを壊すことを回避できるとか、出先でエディタがなくてもなんとかなるとか、そういう意味のやつ。

トップページにカスタムフィールドを組み込む方法

index.phpとかhome.phpとか、wpにはトップページ用のファイルがある。それらは単独で動くので管理画面上でどうこうすることはない。

wpの機能として、「設定>表示設定」でWP内の特定ページをトップページ扱いすることができる。
なので、固定ページをトップページにすればトップページ内のコンテンツにカスタムフィールドを適用させることができる。これが正攻法。

カスタムフィールドは他ページに登録した内容を引っ張ってくることもできるんで、兼用したり登録用でページを作るということもできる。専用のページを設けることは個人的にはNG。ページ数が多いと埋もれてしまうし、仕様書がなければどうなってんのこれってなって手間がヤバいことになる。

なので、基本的に、カスタムフィールドは設置したページで使うようにする。

画像スライダー

今どきの感じを意識して組んでみる。

カスタムフィールドはACF、ついでにスライドはslick.js。ACFで繰り返しフィールド「topimg」に画像「pc」「sp」を作る。

<div class="slider">
<?php
while(the_repeater_field('topimg')):
    $imgPC = get_sub_field('pc');
    $imgSP = get_sub_field('sp');
?>
    <div class="slide"><picture><source srcset="<?php echo $imgSP; ?>" media="(max-width:767.98px)"><img src="<?php echo $imgPC; ?>" alt=""></picture></div>
<?php endwhile; ?>
</div>

slick.jsのいいところは、スライドが1枚だけだと遷移しない。だから1枚しか登録しない場合でもスライドなしの条件分岐を作る必要がない。まあ、分けたほうが無難だとは思うけど。

ついでに言えば、PCとSPでニコイチにする場合は登録を必須にしておけば片方しかない状態を回避できる。片方だけだった場合でどうのこうのを仕込むのはめんどいし。

会社概要とか

ACFで繰り返しフィールド「company」にテキスト「title」「detail」を作った場合。

<table>
    <tbody>
<?php
while(the_repeater_field('company')):
    $title = get_sub_field('title');
    $detail = get_sub_field('detail');
?>
        <tr><th><?php echo $title; ?></th><td><?php echo $detail; ?></td></tr>
<?php endwhile; ?>
    </tbody>
</table>

「title」はこれでいいとして、「detail」はテキストエリアにすれば安全に改行タグ込みで書き出せる。

ACFで繰り返し機能をつけられない場合は各項目を個別に用意する必要があるけど、繰り返しを導入できるなら項目名とセットで登録できるし、順番もいじれるので楽。

ついでに言えば、片方しか記入がない場合は書き出さない的な条件を付けておくとなお便利。「枠だけ作ったんで埋めといてください」が素人目にも分かりやすくできる。

まとめ

活用するととても素敵な感じにできるんだけど、最初からこんな感じのを組み込むとなると手間だしめんどくさいし時間がかかる。なので、これをやるならスケジュールを予め取っておくか、後付でやっていくのがいいと思う。

コメント

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