Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. その他 Wix 製品と CMS の連携
    5. CMS：動的アイテムページをイベント詳細・登録ページとして使用する

CMS：動的アイテムページをイベント詳細・登録ページとして使用する

読了時間：18分
イベント詳細・登録ページの外観や構成をさらに制御したい場合は、Wix CMS（コンテンツ管理システム）を使用して動的アイテムページを作成し、そこに個々のイベントを同じデザインとレイアウトで表示させることができます。

テキスト、画像、ボタン要素を CMS のイベントコレクションの該当するフィールドに接続すると、それらの要素にイベントに応じた詳細が表示されるようになるため、ページをデザインする手間が一度だけで済みます。サイトを公開すると、各イベントは固有の URL を持つ動的アイテムページとして表示されます。
この方法を使用して、訪問者が 1か所ですべてのイベントを表示できる動的リストページを作成することも合わせておすすめします。動的リストページで特定のイベントをクリックすると、訪問者はそのイベントの詳細が表示された動的アイテムページに移動します。
始める前に：

ステップ 1 | イベントに動的アイテムページを追加する

まずは、エディタで「CMS」アイコンをクリックして「Wix アプリコレクション」を選択し、一覧にある「Events」コレクションから動的アイテムページを作成します。この動的アイテムページはテンプレートとして機能し、1つのページに個々のイベントに応じた詳細が表示されます。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタにアクセスします。
  2. エディタ左側で「CMS」 をクリックします。
  3. 左側で「Wix アプリコレクション」をクリックします。
  4. 「イベント」コレクションまでスクロールダウンします。
  5. 「Events」にマウスオーバーし、「その他のアクション」アイコン をクリックして、「動的ページを追加」を選択します。
  1. 「アイテムページ」をクリックします。
  2. 「サイトに追加」をクリックします。

ステップ 2 |（オプション）URL スラッグ構造を変更する

動的アイテムページでは、各イベントに固有の URL が自動で割り当てられます。デフォルトでは、これらのページは以下の URL スラッグ構造になっていて、末尾の {Title} の部分はイベント名に応じて変化します：
  • Wix エディタ：https://www.{your-domain.com}/events-1/{Title}
  • Editor X と Wix Studio エディタ：https://www.{your-domain.com}/events/{Title}

URL スラッグ構造を編集する際は、その構造がサイトの他の既存ページで使用されていないことを確認してください。URL スラッグ構造を固有にするためには、たとえ変数が異なっていても、サイト上の別のページと同じプリフィックス（例： {コレクション名}）と同じ数の変数を持つことはできません。固有の動的ページ URL を作成する方法はこちら

URL スラッグ構造を編集する方法：

Wix エディタ
Editor X
Wix Studio エディタ
Wix エディタでは、URL スラッグの events 部分は、今後および過去のイベントページを表示するために既に使用されています。そのため、CMS が events の後に -1 を自動で追加して、新しい動的アイテムページ用に固有の URL を割り当てます。この URL スラッグは、ライブサイトでまだ使用されていない新しい構造に変更することができます。
動的アイテムページの URL スラッグ構造を編集する方法：
  1. エディタにアクセスします。
  2. エディタ左側で「ページ・メニュー」 をクリックします。
  3. 「動的ページ」をクリックします。
  4. 「EVENTS/EVENTS コレクション」下の「Events (Item)」ページにマウスオーバーし、右側の「その他のアクション」アイコン をクリックします。
  5. 「SEO」をクリックします。
  6. 「URL スラッグ構造」をクリックします。
  1. URL スラッグ構造をカスタマイズし、キーボードの Enter キーを押します。たとえば、events-1 を event に変更することができます。

ステップ 3 | 新しい動的アイテムページをカスタマイズする

新しい動的アイテムページのテキスト、画像、ボタン要素に、イベントコレクションのフィールドを接続して、それらの要素にイベントに応じた詳細が表示されるようにします。テキストやボタン要素は必要に応じてページに追加し、イベントコレクションの任意のフィールドに接続することができます。すべての要素を正しく接続したら、ページ上の要素のサイズ、位置、デザインを好みに合わせて調整します。
Wix エディタ
Editor X
Wix Studio エディタ
  1. エディタにアクセスします。
  2. イベント（Item）ページに移動します。
  3. ページ上の要素を接続します：
    • 「戻る」ボタン：「戻る」ボタンをクリックし、「リンク」アイコン をクリックして、訪問者がこのボタンをクリックした際の移動先を選択します。
      ヒント：このボタンを、イベントリストがあるサイトのページ、またはセクションにリンクさせます。
    • テキスト要素：該当するテキスト要素をクリックし、「CMS に接続」アイコン をクリックします。「テキストを接続」パネルで「テキストの接続先」ドロップダウンをクリックし、テキスト要素に使用するイベントコレクションのフィールドを選択します。イベントコレクションのフィールドに接続したいテキスト要素ごとに、この手順を繰り返します。
    • 画像：画像をクリックし、「CMS に接続」アイコン をクリックします。「画像を接続」パネルで該当するドロップダウンをクリックし、画像、代替テキスト、ツールチップ、リンクを接続します。
イベント用に作成した動的アイテムページで、画像の「接続設定」オプションが表示されている様子を示したスクリーンショット。
  1. （オプション）さらにテキスト要素を追加し、「CMS に接続」アイコン をクリックして、それらをイベントコレクションのフィールドに接続します。たとえば、テキストは以下のイベントコレクションのフィールドに接続することができます：
    • Title（テキスト）：イベント名。
    • Description （テキスト）：イベントの「イベントの紹介（オプション）」欄に入力した詳細。
    • About（リッチテキスト）：イベントの「イベントについて（オプション）」セクションに入力したリッチテキスト。
    • Schedule formatted（テキスト）：イベントの日時（例：「2024年4月1日 19時00分～23時00分」など）。
    • Start date formatted（テキスト）：イベントの開始日（例：「2024年4月1日」など）。
    • 開始時間（テキスト）：ローカル設定に合わせた形式のイベントの開始時間。 イベントスケジュールが未定の場合は空白です。
    • Location name （テキスト）：イベントの「会場名（オプション）」欄に入力した場所、または、「未定」を選択して入力したメッセージ。
    • Location address（テキスト）：イベントの「住所」欄に入力した詳細な住所。場所で「未定」を選択した場合は何も表示されません。
    • Status（テキスト）：以下のイベントステータスのいずれかが表示されます：
      • SCHEDULED：イベントが今後開催される場合は、このステータスが表示されます。
      • STARTED：イベントが開催中の場合は、このステータスが表示されます。
      • ENDED：イベントが終了した場合は、このステータスが表示されます。
      • CANCELED：イベントが中止された場合は、このステータスが表示されます。
    • Lowest price formatted（テキスト）：通貨記号付きのイベントの最低価格。
      注意：
      • 予約制のイベントや外部イベントの場合は何も表示されません。
      • このイベントのチケットを販売している場合は、その最低価格が表示されます。
      • チケットを無料で提供している場合は「￥0」と表示されます。
  1. ゲストがイベントに登録したり、カレンダーにイベントを追加したりできる動的ボタンを追加します：
    1. 左側の「パーツを追加」 をクリックし、「ボタン」をクリックして追加するボタンを選択します。
    2. ボタンをクリックし、「CMS に接続」アイコン をクリックします。
    3. 「クリック時の動作を選択」ドロップダウンをクリックし、訪問者がボタンをクリックした際の動作を選択します：
      • Site event page url にナビゲート：イベントに登録できるイベント詳細・登録ページに移動します。
      • Google calendar url にナビゲート：Google カレンダーにイベントを追加します。
      • iCalendar url にナビゲート：イベントへの iCalendar リンクをダウンロードします。
      • Registration url にナビゲート：Wix イベントへの登録が外部で管理されている場合は、登録用の URL に移動します。
    4. リンク先ページの表示方法を、「現在のウィンドウで開く」または「新しいタブで開く」から選択します。
    5. 「ラベルの接続先」ドロップダウンをクリックし、動的ボタンテキストとして使用するフィールドを選択します。または、ボタンの「テキスト・アイコンの変更」をクリックして、静的ボタンテキスト（例：「登録する」など）を入力します。
  1. ページ上の要素のサイズ、位置、デザインを好みに合わせて調整します。
  2. 「プレビュー」をクリックして、動的イベントページの動作をテストします。
  3. 変更内容を公開する準備ができたら、「公開」をクリックします。

お役に立ちましたか？

|
この記事では下記を説明します：
  • ステップ 1 | イベントに動的アイテムページを追加する
  • ステップ 2 |（オプション）URL スラッグ構造を変更する
  • ステップ 3 | 新しい動的アイテムページをカスタマイズする