Web関連

WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』実践編1

0

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」が選択できるようになっています。

kishizawa_acf_15012102.jpg

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」を選択することで、繰り返し項目内に繰り返し項目を追加できます。

kishizawa_acf_15012103.jpg

実際に以下のように登録してみました

kishizawa_acf_15012104.jpg

3. 投稿

実際に投稿してみましょう。
投稿画面に先ほど設定した「画像&キャプション」という項目が追加されていると思いますので、
キャプションのテキストと画像のセットが繰り返し登録可能になっています。
項目を増やしたい場合は、「Add Row」で追加、登録した項目の並び替えや削除も可能です。

kishizawa_acf_15012105.jpg

実際に投稿したページを見てみましょう。

あれれ?繰り返し項目が・・・表示されていない。

kishizawa_acf_15012106.jpg

テンプレートの設定が必要でした・・・。

次回ではテンプレートの設定方法を説明したいと思います。

サラダバー

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作
システム開発
ECサイト構築
CMS構築

関連コラム

WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』インストール編
WordPressをCMSとして活用するためのプラグイン Advanced Custom Fieldsの有料ライセンスの拡張機能(アドオン)『The Repeater Field』実践編2
WordPressの管理画面を使いやすくカスタマイズ!

0

私が思う、5つの「電子書籍っていいね!」前のページ

サイト制作の見積もりに必要な事、知ってますか?次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    和とパララックスデザインから生み出される魅力

    さてさて、以前スマホとパララックスデザインについてお話をさせていただ…

  2. Web関連

    脱・マンネリ化!仕事が楽しくなる3つのスイッチ

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテー…

  3. Web関連

    身近なWebビジネスを考えてみた。~飲食店のタッチパネル注文~

    こんにちは。IAの中條です。最近年度末ということもあって、飲みに行くこ…

  4. Web関連

    ECサイトを立ち上げろ!!最新のEC-CUBEを使ってみた話

    みなさん、ECサイトを利用していますか?ECサイトで有名なのは、Ama…

  5. Web関連

    あれ、ここのデザイン変わった?見るタイミングで変化するWebサイト!

    こんにちは!段々寒くなってきましたが、まだまだ薄着の角田です。先日入用…

  6. Web関連

    動画コンテンツは一般ユーザーには響いてなかった!

    いきなりですが、御社はホームページに動画コンテンツを取り入れようと考え…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    スポーツから考える、機械による自動化について
  2. Web関連

    売れるキャッチコピーを作る法則とは…
  3. Web関連

    東京のWeb制作会社が教える失敗しない海外向けサイトの作り方
  4. Web関連

    初心者WEB担当者が勘違いしてるUI/UX
  5. Web関連

    Web制作会社における「スマートオフィス」
PAGE TOP