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

関連記事

  1. Web関連

    売り上げの上がるECサイトを作りたい

    売上をアップさせるショッピングサイトを制作します「どのように売上を…

  2. Web関連

    デジタルコミュニケーションの可能性

    デジタルコミュニケーションとは、インターネットを使って、情報を収集・配…

  3. Web関連

    意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)

    私の隣にはデザイナーがいます。しかもかなり若いです。19歳。若過ぎる!…

  4. Web関連

    実現も目前!?人工知能が活躍する時代!

    今回は世界的な家電や情報通信などの総合展示会で知られる「CES2016…

  5. Web関連

    今後の活躍に期待!ドローンのうまい使い方

    Amazonが配達に利用する意向にあるなど、今後の利用シーンが期待され…

  6. Web関連

    ショッピングカートシステムのまとめ

    ECサイト構築で必ずと言っていいほど使われるショッピングカートシステム…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Web制作におけるSaaS活用
  2. Web関連

    大手企業が実践しているリターゲティング広告をする2つのメリット
  3. Web関連

    テレワークとは?導入への一歩を踏み切るために
  4. Web関連

    デジタルマーケティングのインターネット広告について
  5. Web関連

    Web制作会社の採用担当がおすすめするリクルートサイト必須コンテンツ3選!
PAGE TOP