CMS:パジネーションバーを追加・設定する
読了時間:5分
パジネーションバーを使用すると、訪問者がリピーターやギャラリー内の大量のアイテムのコレクションをシンプルかつ直感的に閲覧できるようになります。パジネーションバーを使用すると、訪問者は「ページ」や動的ページに表示されるアイテムのセット間を移動できます。データセットの「アイテム最大表示数」フィールドは、各「ページ」に表示されるアイテムの最大数を決定します。
パジネーションバーに表示されるページ数は、データセットによって取得されたコレクションアイテムの総数と「アイテム最大表示数」に基づいて計算されます。たとえば、コレクションに 50 のアイテムが表示されており、「アイテム最大表示数」を 10 に設定している場合、パジネーションバーには 5ページ(50/10=5)が表示されます。各ページはアイテムのセットを表し、パジネーションバーを使用して、訪問者はこれらのセット内を移動することができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/16/ffcb96ea-47d5-43e4-907c-2d4603aeab82/3fcd70dc-c074-4186-9c0e-f4151577f7ae.png)
重要:
パジネーションバーは、現在 Wix Studio エディタではご利用いただけません。この機能をご希望の場合は、機能リクエストに投票してください。
始める前に:
ステップ 1 | パジネーションバーを追加・カスタマイズする
サイトにパジネーションバーを追加して、デザインニーズに合わせてカスタマイズします。
パジネーションバーを追加・カスタマイズする方法:
- エディタにアクセスします。
- 複数のアイテムを一覧表示できる該当する動的ページに移動します:
- エディタ左側で「ページ・メニュー」
をクリックします。
- 「動的ページ」をクリックします。
- 複数のアイテムを表示できる該当する動的ページをクリックします。
注意:パジネーションバーは、一度に 1つのアイテムのみを表示できる動的アイテムページでは使用できません。
- エディタ左側で「ページ・メニュー」
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/16/c404e029-ecc8-4dae-a613-730df528498b/e63c928c-b5f2-45d1-908d-5b304412cb2e.png)
- パジネーションバーを追加します:
- エディタ左側で「パーツを追加」
をクリックします。
- 「インタラクティブ」をクリックします。
- 「パジネーションバー」をクリックします。
- 使用したいパジネーションバーをクリックして、ページにドラッグします。
- エディタ左側で「パーツを追加」
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/16/31a8960b-1c34-4102-986d-9d64c8526328/385c1e1f-f0f3-41ea-9b07-30ce2d83c0a7.png)
- パジネーションバーのレイアウトとデザインをカスタマイズします:
レイアウト
デザイン
ステップ 2 | CMS に接続する
リピーターまたはギャラリーに接続している同じデータセットにパジネーションバーを接続します。次に、パジネーションバーのサイズを変更し、プレビューモードでテストします。公開の準備ができたら、サイトを公開します。
パジネーションバーを CMS に接続する方法:
- パジネーションバーをクリックします。
- 「CMS に接続」アイコン
をクリックします。
- 「データセットを選択」ドロップダウンをクリックし、リピーターまたはギャラリーに接続されているのと同じデータセットを選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/16/d81f09fa-ecb0-4e2a-92e1-082f56856587/407e7afe-a156-4330-bc45-320c586294c8.png)
- パジネーションバーの端をドラッグしてサイズを変更します。
- 「プレビュー」をクリックして、パジネーションバーの動作をテストします。
- 変更内容を公開する準備ができたら、「公開」をクリックします。