CMSリストにSNSアイコンとURLを設定する方法

本記事では一例として、CMSリストを使い、各アイテムに異なるSNSアイコンとリンクを設定する方法をご紹介します。

以下の手順で設定すると、リストに表示される各ライターのSNSアイコンをクリックするとそれぞれのSNSアカウントへ移動するようになります。

1. モデルの作成

「＋」ボタンをクリックして、追加したアイテムにテキストプロパティを追加します。プロパティ名は、リンクを設定する時に選びやすいように”facebook_url"など、SNSの種類がわかるようにすると便利です。

プロパティにSNSのURLを入力します。SNSが複数ある場合は、その数だけ追加します。

次にエディタへ移動します。追加パネルのCMSメニューから、ライターのCMSリストをページに配置します。

リスト内アイテムにアイコンを追加します。アイコンを選択して、リンク欄で各アイコンに対応するCMSプロパティを選択します。

アイコンを選択した状態で「表示条件」を設定します。「プロパティ is set」という条件を選んでください。

この条件を設定することで、URLが設定されている場合にのみ、アイコンが表示されるようになります。URLが設定されていないアイテムではアイコンが非表示になり、リストの見た目がすっきりします。

出し分け