WordPress で動的スライダーを作成する方法
WordPress サイトを目立たせるための Web サイト機能のリストを作成している場合、スライダーはリストの上位に表示されます。しかし、本当に印象的なカスタム Web サイトが必要な場合は、動的なコンテンツ機能を備えたスライダーが必要になります。
動的コンテンツとは何ですか?
動的コンテンツは、Web サイトからのデータやユーザーの行動に応じて Web ページ上で変化するコンテンツです。
動的コンテンツの反対は静的コンテンツです。静的コンテンツの場合、Web ページはユーザーや時間に関係なくまったく同じままになります。
静的コンテンツが見つかりやすい好例は、通常、誰がクリックしたかに関係なく、まったく同じタイトル、説明、行動喚起が表示されるランディング ページです。
以下に、WordPress をダウンロードするためのランディング ページが表示されます。どのようにしてそのページに到達したかに関係なく、情報は静的であるため、まったく同じ情報が表示されます。
ただし、静的コンテンツが機能しない場合があります。たとえば、ブログを運営している場合は、最新の投稿を一番上に表示したいと思うでしょう。コンテンツが静的であれば、ブログでは常に同じ投稿が上部に表示されます。ただし、動的であれば、新しい投稿を公開するたびに、順序が自動的に (または動的に) 変更されます。
以下はWPExplorerのブログです。 WPExplorer が新しいブログ投稿を投稿するたびに、左上に最新の投稿として自動的に表示されます。
動的コンテンツが必要になる例は他にもあります。ツアー パッケージを販売する旅行 Web サイトを運営している場合は、各ツアーを独自の投稿に表示するツアーのカスタム投稿タイプが必要になります。
各ツアー ポストを個別に設計できるようになりましたが、それには時間と労力がかかります。ツアーのレイアウトを変更したい場合はどうすればよいでしょうか?同じ構造になるように各ツアーを個別に編集する必要があります。繰り返しますが、自分自身に不必要な作業を作成することになります。
最善の解決策は、カスタム投稿を表示するテンプレートを作成することです。このテンプレートでは、投稿のタイトル、画像、価格などの動的なコンテンツを追加できます。これは、それぞれのツアー投稿をクリックするとコンテンツが変更されることを意味します。たとえば、セムク チャンペイについてのツアー投稿にはセムク チャンペイに関するコンテンツが含まれ、王家の谷についてのツアー投稿には…おわかりいただけるでしょう。
ダイナミックスライダーにはどのような種類がありますか?
カスタム Web サイトを強化する 2 種類のダイナミック スライダーがあります。
1. ダイナミックイメージスライダー
動的画像スライダーは、テンプレートに一度追加できる画像スライダーで、クリックした投稿に応じてデータベースから異なる画像を表示します。
たとえば、ジムの Web サイトには、多数のジムの投稿を保持するジムのカスタム投稿タイプがある場合があります。各ジムの投稿に、そのジムの画像を含む画像スライダーを表示するとよいでしょう。したがって、クリックしたジムの投稿ごとに画像が異なります。
これを行う最も簡単な方法は、動的な画像スライダーを作成することです。静的画像スライダーでは、「Downtown Fitness Center」または「Balance Gym」をクリックしても同じ画像が表示されますが、動的な画像スライダーでは、バックエンドの各投稿に追加した画像が表示されます。
2. 動的な投稿コンテンツ スライダー
場合によっては、スライダーには画像以外のものも含まれることがあります。実際、ホームページで見かけるスライダーの多くには、画像に関連する詳細情報が含まれています。
たとえば、ジムの Web サイトで、それぞれに異なるジムを表示する 3 つの画像を含むスライダーを作成するとします。問題は、画像を表示するだけの場合、ユーザーはジムの名前、会員料金、利用できる設備をどのようにして知ることができるでしょうか。最も簡単な解決策は、カスタム フィールドに基づいて動的な投稿コンテンツを含むスライダーを追加することです。
なぜこのコンテンツを動的にする必要があるのか疑問に思われるかもしれません。スライダーの各スライドを 1 ページと考えてください。各スライダーの「ページ」をめくると、内容が変わり、別のジムの情報が表示されます。
もちろん、このコンテンツが静的な場合は変更されず、同じ背景画像、投稿タイトル、行動喚起などを表示するだけになります。しかし、動的なコンテンツでは、各スライドに各ジムからの情報が表示されるようになります。
動的スライダーを作成するのに最適なプラグインは何ですか?
コーディング能力に関係なく、両方のタイプの動的スライダーを確実に含めることができる優れたスライダー プラグインが多数あります。
1. ツールセット
最初のプラグインは、カスタム Web サイトを構築するための最も汎用性の高いリソースの 1 つである Toolset です。
Toolset は、Gutenberg 拡張機能である Toolset Blocks を作成しました。これは、あらゆる経験レベルの WordPress ユーザーがコーディングなしでスライダーなどのカスタム コンテンツだけでなく、カスタム フィールド、デザイン テンプレート、アーカイブなどを簡単に表示できるようにすることに特化しています。
PHP の代わりに、動的コンテンツに対応した Toolset の独自のブロック セットを使用できます。 Toolset の大きな利点の 1 つは、その機能です。スライダー以外にも、検索、フロントエンド フォーム、マップなど、他の重要な機能を多数作成できます。
2. スライダー革命
Slider Revolution は、スライダーをカスタマイズするためにできるだけ多くのオプションが必要な場合に最適なプラグインです。それらのオプションの 1 つはダイナミック スライダーです。
ただし、動的なスライダーを作成することはできますが、コンテンツを描画するカスタム フィールドを作成することはできません。組み込みのカスタム フィールドを含むテーマを選択するか、自分でコーディングする必要があります。
Slider Revolution は 200 を超えるテンプレートを提供しているので、スライダーを含む Web サイトを即座に構築できます。
3. スマートスライダー3
Smart Slider 3 を使用すると、WordPress の投稿やページ、WooCommerce 製品、Facebook などのソーシャル メディア チャネルなど、さまざまなソースから生成されたコンテンツを使用して動的なスライダーを作成できます。
Smart Slider 3 のプロ バージョンでは、事前定義されたスライダーのサンプルをインポートでき、WordPress の 20 のソースから描画することもできます。
動的な画像スライダーを作成する方法
Web サイトに追加できるダイナミック スライダーと最適なプラグインについて理解できたので、次にその作成方法を説明します。この例では、Toolset とその Gutenberg ブロックを使用します。
詳細なステップバイステップのビデオチュートリアルについては、テンプレートの動的スライダーに関するツールセットのガイドをご覧ください。
Toolset の無料のジム リファレンス サイトを使用し、ダイナミック イメージ スライダーをそのジムの投稿タイプに追加します。私の各ジムには、その画像を表示する動的な画像スライダーが含まれています。
1.カスタムフィールドを使用してカスタム投稿タイプを作成する
スライダー自体を追加する前に、スライダー内に表示する情報を追加し、スライダーが表示される構造を構築する必要があります。
カスタム投稿タイプとカスタムフィールドという 2 つのカスタムコンテンツを作成する必要があります。
以下では、Toolset を使用して名前を追加するだけでカスタム投稿タイプを作成する方法を示します。
ジムの投稿タイプを取得したら、次にコンテンツを追加する必要があります。これを行うには、カスタムフィールドを作成して各投稿の構造を設定する必要があります。
動的な画像スライダーの場合は、画像のカスタム フィールドが必要になります。もちろん、画像スライダーには複数の画像が含まれますが、カスタム フィールドには通常 1 つのデータのみが保存されます。では、さらに追加するにはどうすればよいでしょうか?
ツールセットを使用すると、複数のデータを保存する繰り返しカスタム フィールドを作成できます。この場合、複数の画像を保存し、それらすべてを動的画像スライダーに表示できます。
カスタム フィールドを繰り返し作成するには、フィールドの作成時に関連するボックスを選択するだけです。 「Gym Photo Gallery」を繰り返し作成した方法を以下に示します。
ご覧のとおり、ジムの投稿には、評価、住所、営業時間を含む多数のカスタム フィールドがすでにあります。
2. 投稿にメディアを追加する
スライダーのカスタムフィールドが完成したので、画像の形式で表示したいメディアを追加する必要があります。これを行うには、各投稿に移動し、アイキャッチ画像の場合と同様に、クリックして画像を追加します。
「+」ボタンをクリックするだけで画像をアップロードできます。
これらの画像は、ダイナミック スライダーの「ソース」として機能します。つまり、各ジムの投稿には、フロントエンドの「ジム フォト ギャラリー」に追加された画像がすべて表示されます。
3. スライダーを追加する
カスタム フィールドを準備し、コンテンツを追加したら、それらを使用して動的なスライダーを作成できるようになります。ダイナミック スライダーを作成する前に、投稿用のテンプレートを作成しておく必要があります。
まず、ツールセットの画像スライダー ブロックをテンプレートに挿入します。すでに画像を Gym Photo Gallery にアップロードしているため、動的ソースを選択し、画像を取得するカスタム フィールドを選択できます。
スライダーには、カスタム フィールドにアップロードした画像が表示されます。
エディターの上部にあるドロップダウンを使用して投稿を切り替えることで、スライダーが実際に動的コンテンツを表示しているかどうかを確認できます。新しい投稿を選択すると、動的な画像スライダーを含むその投稿のコンテンツが読み込まれます。
上記の例ではツールセットを使用していますが、動的コンテンツ オプションを備えたほとんどの WordPress スライダーは同じように機能します。ほとんどの場合、最初にコンテンツを作成してから、スライダーを投稿、ページ、またはテンプレートに追加するときに「動的」ソースを選択する必要があります。
動的な投稿コンテンツを含むスライダーを作成する方法
画像だけでなく、複数のフィールドをスライダーに追加することもできます (価格、評価、ボタン、抜粋などのカスタム フィールドを含む)。ツールセットには、カスタム スライダーを作成するための完全なステップバイステップのビデオも提供されています。
1.カスタムフィールドを使用してカスタム投稿タイプを作成する
動的な画像スライダーの場合と同様に、最初にカスタムフィールドを備えたカスタム投稿タイプを作成する必要があります。ジムのポストタイプを再利用します。
2. ダイナミックソースをスライダーに追加
ただし、ダイナミック イメージ スライダーとは異なり、ツールセットのビュー ブロックを使用します。これにより、データベースから投稿をロードし、スライダーなどのリストとして表示することができます。
View ブロックを挿入した後、ウィザードを使用してスライダーのパラメーターを設定します。たとえば、以下ではユーザーがスライド間を切り替えられるようにページネーションを追加し、スタイルは書式なしのままにしています。
コンテンツのソースとなる投稿タイプを選択する必要もあります。
これでビューが作成されました。スライダーの右側のサイドバーでさまざまな編集を行うことができます。まず、左上の [ブロック] ナビゲーション オプションから [表示] ブロックを選択する必要があります。
スライダーに構造を設定すると、コンテナ ブロックを挿入してコンテンツを追加できます。たとえば、背景、画像、テキスト、価格、レビューなど、カスタム フィールドを追加したほとんどすべてのものを追加できます。要素を挿入するときは、[ダイナミック ソース] を選択し、それに応じてカスタム フィールドを選択し、ニーズに合わせてカスタマイズします (色、フォント、配置などの変更)。
3. スライダーを使用する
スライダーを保存して、フロントエンドでチェックアウトできるようになりました。追加した内容に基づいて、素晴らしい動的コンテンツ スライダーが表示されるはずです。
動的画像スライダーと同様に、動的コンテンツ スライダーに関しては、ほとんどの WordPress スライダーに同様のオプションが含まれています。 Toolset には動的コンテンツ ソース選択ボックスが用意されており、Slider Revolution には組み込みの動的コンテンツ モジュールなどが含まれています。ほとんどの場合、動的コンテンツをスライダーに追加するには、選択したコンテンツ モジュールを挿入する必要があります。
今すぐダイナミック スライダーの構築を始めましょう!
あらゆる経験を持つ WordPress ユーザーにとってスライダーの作成がいかに簡単であるかがわかったので、今度はそれを試してみましょう。スライダー プラグインを選択して作業を始めましょう。