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

関連記事

  1. Web関連

    イラスト制作における時短への取り組み ~イラストのディレクションをしていて気づいた事~

    働き方改革が謳われるようになってから、様々な業務の効率化が急がれたり、…

  2. Web関連

    インターネットでのマイナンバーを取扱いについて

    マイナンバーを利用してインターネットからも個人の情報を閲覧できるように…

  3. Web関連

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

    今回は、海外向けプロモーションで失敗しないWebサイトの作り方について…

  4. Web関連

    目指せ印税生活!ミュージシャン気取りになれるWeb楽曲配信サービス

    最近のミュージックシーンは楽器を一切使わないEDMなどの楽曲が流行し、…

  5. Web関連

    バレンタイン? なにそれ、美味しいの?

    ついに、今年もこのイベントがやってきましたね。「2月14日」そうです、…

  6. Web関連

    フェイクニュースに騙されていませんか?

    皆さんは自分が見た情報の真偽を正しく見抜けていますか?噂話、風刺な…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    気付いてますか?ビジネスで愛されるタブレット端末
  2. Web関連

    「拝啓」はもう使わない!?変わるギフト市場
  3. Web関連

    抑えるべきはココ。顧客満足度を向上させる秘訣
  4. Web関連

    【必見!】円滑にコミュニケーションをとるための話し方、「PREP法(プレップ法)…
  5. Web関連

    使いすぎ!?目のショボショボを防ごう!!
PAGE TOP