さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 3 Apr. 2015

    悶絶するほど使い勝手のいい「The Repeater Field」

    CATEGORYBlog WordPress TAG

    acf_1

    The Repeater Field」はAdvanced Custom Fields の有料アドオンです。

    WordPressを使う案件では、たいていカスタム投稿タイプとカスタムフィールドを作成します。そのため私はここ2年ほど「Types」というプラグインを愛用してきました。カスタムフィールドを生成するプラグインの中では主流じゃない空気感があるのですが、カスタム投稿タイプもまとめて管理できる便利さから私にとっては手放せない仕事道具、といった感じです。

    弊社スドーがすこし前に紹介してますが、「Advanced Custom Fields」を使っている人はきっと多いでしょう。先日、ある案件で「カスタムフィールドをセットでまとめて繰り返す」という必要があったので、そういうことのできるプラグインを探してました。そしてたどり着いたのが、というか、弊社スドーに訊ねたら「Advanced Custom Fieldsの有料アドオンでできますよ」という返事がソッコー返ってきたのでした。うーん、できる子。

    実は前述の「Types」もカスタムフィールドを繰り返し作成する機能があります。だけど無料ツールの限界か、セットのひな形を作ってそれを繰り返し入力できるようにすることができません。たとえば一つの投稿記事のなかで写真とキャプションをセットにしてカスタムフィールドの生成を繰り返したいとき、写真は写真、キャプションはキャプションと、それぞれのまとまりのなかで増殖させることになります。そうすると、写真とキャプションの入力フィールドが離れ離れになってしまい、クライアントにやさしくない管理画面ができあがります。

    ここが「Types」のネックでした。それが弊社スドーの勧める「The Repeater Field」ですんなり解決したのです。実際使ってみると、とにかく使い勝手がよく、仕事がさくさく捗りました。これはもう手放せません。

    インストール後、設定でとくに難しいところはないのですが、一箇所だけまごついたのがフィールドタイプ「Repeater」の指定場所です。

    acf_2

    こんな下のほうにちょこなんと、機能の割にとても謙虚な感じです。 フィールドタイプ「Repeater」を選択すると、下のほうに「Repeater Fields」が出てくるので、Addボタンからセットにしたいカスタムフィールドをガシガシ作っていけます。

    acf_3

    acf_4

    たとえばこんな感じで写真とキャプションの繰り返しセットを作ります。表示対象にした投稿画面は下図のような具合になります。

    acf_5

    Addボタンで、セットを無限に増やせます。なんて素敵! テンプレートの書き方もシンプルで分かりやすいです。

    <?php
    $args = array(
    'post_type' => 'photo',
    'posts_per_page' => -1,
    'paged' => $paged
    );
    $the_query = new WP_Query( $args );
    if($the_query -> have_posts()):
    while($the_query -> have_posts()):
    $the_query -> the_post();
    ?>
    
    <h1><?php the_title(); ?></h1>
    
    <?php if(get_field('photo_set')): ?>
    <ul>
    <?php while(the_repeater_field('photo_set')): ?>
    <li>
    <p>
    <a href="<?php the_sub_field('acf_photo'); ?>">
    <img src="<?php the_sub_field('acf_photo'); ?>" alt="<?php the_sub_field('acf_caption'); ?>">
    </a>
    </p>
    <p><?php the_sub_field('acf_caption'); ?></p>
    </li>
    <?php endwhile; ?>
    </ul>
    <?php endif; ?>
    
    <?php endwhile; ?>
    <?php else: ?>
    <p>写真がありません</p>
    <?php endif; ?>
    <?php wp_reset_query(); ?>
    

    セット単位でのページングもできます。
    このあたりもいい感じです。 私、もう、虜です。
    おわり。

    藤が岡のハイランダー、修羅場くぐりのコーディングマシン。案件に食らいついたら離さない、まさにハングリーメタボ。初音ミクに人工知能を実装したら惚れられた、という妄想に生きている。