Advanced Custom Fieldsの拡張機能「繰り返しフィールド(Repeater Field)」の紹介

WordPressの代表的な機能にカスタムフィールドという機能があります。これを使うと、WordPressで作られたホームページを複数の項目を持つデータベースみたいなサイトに仕上げることができます。

カスタムフィールド自体はWordPressの標準の機能ですが、デフォルトのままでは結構使い勝手が悪い機能です。そこで登場したのが「Advanced Custom Fields」というプラグイン! こいつを使うとことで、いまいちな機能がパッと冴えた機能に大変身させることができます。

さらに、そんなAdvanced Custom Fieldsというプラグインを拡張させることが出来るアドオン「Repeater Fields」があります。今日はそのRepeater Fieldsの使い方を紹介します。

ちなみに、Repeater Fieldは1ライセンス25$の有料な拡張機能です。この記事では購入のステップについては割愛いたします。そんなに難しくないので、使いたい方は自分で購入してくださいね。

プラグインの導入方法

Repeater FieldはAdvanced Custom Fieldsの拡張となっているため、まず先にAdvanced Custom Fieldをインストールします。その後で、Repeater FieldのzipファイルをWordPressの管理画面からインストールします。普通にWordPressを使っていると、zip形式のプラグインをインストールする機会って少ないと思うので、ここでちょっとやり方を説明します。

20160306_001

つぎのページでプラグインのアップロードをクリックします。

20160306_002

つぎの画面からzip形式のプラグインをインストールできます。

20160306_003

インストールが完了させて、インストール済みプラグインの画面でAdvanced Custom Fields とAdvanced Custom Fields:Repeater Fieldの2つを有効化させます。

20160306_004

Repeater Fieldの使い方

今回はRepeater Fieldの方として、メディアフォルダにアップロードされた画像ファイルで構成された画像ギャラリーを作ってみます。とりえあず普通に画像ギャラリーというフィールドを作成し、そのフィールドの中で好きな画像の枚数分だけでフィールドを追加できるようにする、というアプローチで作ります。

20160306_005

「フィールドラベル」に「画像ギャラリー」。フィールド名に「image_gallery」と設定しました。さて次からがRepeater Fieldの使い方の解説になります。Repeater Fieldをインストールすることで、フィールドタイプに「Repeater」というメニューが追加されています。今回はこれを選択します。

20160306_006

Repeaterを選択すると、Repeater Fieldの設定画面が表示されます。

「Add Sub Field」を追加し、繰り返したい項目を設定します。今回はギャラリーの使う画像とキャプションをセットで設定します。

20160306_008

設定後の画面です。画像とキャプションをセットで設定しました。

この設定したカスタムフィールドを固定ページのカスタムフィールドと設定したことにし、管理画面でどのように画像ギャラリーを作成するのか説明します。

Repeater Fieldでのカスタムフィールド設定方法

設定したカスタムフィールドを使用する固定ページを開きます。
現状では1枚も画像を登録していないため、↓のように1枚も画像が登録されていない状態で表示されます。

20160306_009

「Add Row」というボタンが右下にありますが、そのボタンを押すことで、画像とキャプションがセットになったカスタムフィールドを追加できます。

20160306_010

ここで画像とキャプションを好きな枚数だけ登録していきます。ためしに3枚登録したサンプルを表示します。

20160306_011

このようになりました。Repeater Fieldのすごいところは、このような手順で好きな数だけ同じカスタムフィールドを繰り返して登録できるところですね。さらにカスタムフィールドの左端にある「1」「2」「3」の部分をドラッグすることで、自由に画像の並び替えができます。これはすごいプラグインだ!

Repeater Fieldで設定したカスタムフィールドをテンプレートで読み込む方法
それではRepeater Fieldで設定したカスタムフィールドを実際に表示させるために必要なコードの書き方を紹介します。通常のAdvanced Custom Fieldsでの書き方とちょっと異なっているので注意してください。

tableタグで読み込むサンプルです。ざっと解説すると、

<?php while(the_repeater_field('image_gallery')): ?>
→ 管理画面で設定したカスタムフィールドの数だけ繰り返す

<?php the_sub_field('caption'); ?>
→ キャプション出力する (subが付いている点に注意!)

$img_thumbnail = wp_get_attachment_image_src(get_sub_field('image'));
→ 画像URLを取得する

こんな感じです。
フィールドを出力するときは「the_sub_field」、変数に代入したいときは「get_sub_field」となります。ここらへんの書き方はオリジナルのAdvanced Custom Fieldsと同じですね。それでは実際にブラウザで見てみましょう。

20160306_012

このようになります。

Advanced Custom Fieldsのアドオン「Repeater Field」の解説は以上です。有料のプラグインなので購入を躊躇されているかたもたくさんいると思います。この記事がRepeater Fieldの購入の検討に役に立てれば幸いです。私はこのプラグインを購入して、本当に世界が変わりました。みなさまもぜひRepeater Fieldのご購入をお勧めいたします。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

あわせて読みたい


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。フリーランス目指していろいろと活動中。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

WordPress | Posted on 2016/03/06 15:14

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です