Advanced Custom FieldsのアドオンThe Repeater Fieldって何?って方や、インストール編を読んでいな方は、WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field 「インストール編」を読んでみてください。
使いやすい管理画面を設計する上でThe Repeater Fieldが必要な理由
前回のコラムでインストールまで説明しましたが、今回は具体的に利用方法をまとめてみたいと思います。
実際にどんな場面で必要になるのか考えてみたいと思います。
例えば、画面設計する上で、以下の様な「画像+キャプション」のレイアウトがあると思います。
ページによってたくさんの画像が必要な場合や、1つで良い場合など様々です。ただし、CMSの仕様を設計する上で常に最大数を決める必要があります。
仮に画像+キャプションのセットが最大10個必要として設計したとしましょう。
その場合、10x2で20項目が必要になります。
さらに画像+キャプション+リンクとして仮定した場合、10?3で30項目になってしまいます。
常に最大数を想定して設計した場合、入力項目が膨大になってしまうといった問題が発生します。
また、WordPressの場合入力画面のレイアウトが一定のため、1セットをグルーピングが出来ません。
最大数を想定しているため、ほとんど利用しない項目が並んでいる使いづらい管理画面になってしまいますよね。
そんな時に役立つのがAdvanced Custom Fields のアドオン「 The Repeater Field 」です。
実際にどのように設定するのか説明したいと思います。
設定方法
1. カスタムフィールドの設定
左メニューのカスタムフィールドからカスタムフィールドを選択して、カスタムフィールドの作成画面に進みます。
作成方法は通常のAdvanced Custom Fieldsの同じです。
アドオンをインストールしていることで、フィールドタイプに「Repeater」が選択できるようになっています。
Repeater」が選択を選択することで、Repeater Fields、Minimum Rows、Maximum Rows、レイアウト、Button Label という専用項目が追加されます。
それぞれについて説明したいと思います。
・Repeater Fields
繰り返し項目の箇所になります。※説明は事項
・Minimum Rows/Maximum Rows
繰り返し項目の最小値と最大値になります。
設定しない場合、0件から制限なく入れることが出来ますが、最小値と最大値を決めたい場合に利用します。
・レイアウト
登録画面のレイアウトです。TableとRowから選択します。
繰り返し項目2-3項目だとTableがスッキリします。項目が多い場合はRowが良いと思います。
・Button Label
登録画面で繰り返し項目を追加するときのボタンの名称です。
デフォルトでは「Add Row」になっていますので、「追加」などの日本語にするとわかりやすいです。
2. Repeater Fields(繰り返し項目)の設定
「+Add Sub Field」ボタンをクリックすることで、繰り返し項目を追加できます。
入力内容は通常のAdvanced Custom Fieldsと同じです。テキストであったり、プルダウンなどの項目を設定可能です。
さらに、フィールドタイプに「Repeater」を選択することで、繰り返し項目内に繰り返し項目を追加できます。
実際に以下のように登録してみました
3. 投稿
実際に投稿してみましょう。
投稿画面に先ほど設定した「画像&キャプション」という項目が追加されていると思いますので、
キャプションのテキストと画像のセットが繰り返し登録可能になっています。
項目を増やしたい場合は、「Add Row」で追加、登録した項目の並び替えや削除も可能です。
実際に投稿したページを見てみましょう。
あれれ?繰り返し項目が・・・表示されていない。
テンプレートの設定が必要でした・・・。
次回ではテンプレートの設定方法を説明したいと思います。
サラダバー
ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!
関連するサービス
関連コラム
WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』インストール編
WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』実践編2
WordPressの管理画面を使いやすくカスタマイズ!