コンテンツスライダーは最近のWordPressでは一般的ですが、通常は非常に限られた状況でのみ使用されます。通常、ホームページに配置され、最新の投稿や画像ギャラリーを表示するために使用されます。新しいトレンドとして、WordPressウェブサイトがコンテンツスライダーの可能性と柔軟性を活用して、訪問者にアクションを促す魅力的なストーリーを語るようになっています。つまり、製品ツアーの形です。
WordPressの製品ツアーでコンテンツスライダーを使用すると、ユーザーを自分のペースで主要なポイントに誘導することで、製品の販売を促進できます。これは単にビデオを使用するよりも優れています。なぜなら、ユーザーはタイムコードを推測する必要なく、特定の定義されたポイントに前後にスキップできるからです。さらに、このようにコンテンツスライダーを使用すると、あらゆる種類のウェブメディアを活用できます。つまり、ユーザーに受動的にビデオを見せるのではなく、スライドにインタラクティブなコンテンツを含めることができます。
最近まで、最も簡単なコンテンツスライダー製品ツアー以外を作成するにはコーディング方法を知る必要がありましたが、私たちはSlideDeck 2という素晴らしいスライダープラグインを使用しており、それはすべてを変えます。
この強力なプラグインを使用すると、コードを一切書かずに、数分で素晴らしいスライダーを簡単に作成できます。SlideDeck 2の他の強力な機能については、以前の投稿で紹介しましたが、最新のアップデートにより、カスタムコンテンツスライダーを作成し、各スライドのコンテンツを調整して、訪問者の行動を促す魅力的なプレゼンテーションを作成できるようになりました。ここでは、SlideDeck 2を使用してWordPressサイト向けの魅力的な製品ツアーを作成する方法を説明する簡単なガイドを作成しました。
プラグインの購入とインストール
まず最初に：カスタムコンテンツスライドはSlideDeck 2のプレミアム機能なので、サイトで使用するには購入する必要があります。SlideDeckのウェブサイトにアクセスしてプラグインを購入することをお勧めします。その機能の強力さを考えると、かなり安価であり、より優れた機能を取得したり、より多くのサイトで使用したりするために簡単にアップグレードできます。
カスタムコンテンツ機能を有効にするには、ProfessionalまたはDeveloperパッケージのいずれかを購入し、プラグインと追加機能を有効にする「アドオン」をインストールする必要があります。
プラグインをインストールするには、便利なWordPressプラグインのインストール方法（初心者向けステップバイステップガイド）に従ってください。
用語
開始する前に、いくつか用語を説明しておきましょう。
- スライドタイプ – スライドには4つの異なるタイプがあり、それぞれ画像、ビデオ、テキスト、HTMLといった特定の種類のコンテンツに対応するように設計されています。
- レンズ – レンズはコンテンツスライダーのテーマのようなものです。スライダーの外観と動作、およびコンテンツがページに表示される方法を制御します。WordPressテーマと同様に、コンテンツに異なるレンズを適用するのは数秒で済み、スライダーに大きく異なるルックアンドフィールをもたらすことができます。
さて、専門用語はこれで終わりです。SlideDeck 2を有効にして、始めましょう！
カスタムコンテンツSlideDeckの作成
SlideDeckのカスタムコンテンツ機能を使用して、4種類のコンテンツを組み合わせた製品ツアーコンテンツスライダーを作成する方法を説明します。まず、「管理」をクリックしてメインダッシュボードに移動します。この画面で、新しいSlideDeckを作成したり、既存のSlideDeckを並べ替えたりできます。
カスタムコンテンツセクションで、青い「スライドデッキを作成」ボタンをクリックします。カスタムコンテンツエディタ画面に移動し、最初 のスライドを作成します。カスタムコンテンツエディタにアクセスしたら、まずスライドデッキに名前を付けます。最初 のスライドが作成されており、使用しているスライドデッキ2のパッケージによって、3つまたは4つの異なるスライドタイプから選択できます。プロフェッショナルパッケージのユーザーは、画像、ビデオ、テキストのスライドタイプにアクセスできます。開発者パッケージのユーザーは、これら3つに加えてHTMLスライドタイプを選択できます。
このフライアウトメニューの下には、SlideDeck 2の最もユニークな機能の1つであるライブプレビューウィンドウがあります（SlideDeck 2がWPBeginner's Blueprintで推奨されるWordPressプラグインである理由の1つです）。ここで、編集中のスライダーがリアルタイムで更新されるのを確認できます。
画像スライドから始める
まずは画像スライドから始めましょう。訪問者に、これから始まるツアーの概要を素早く、視覚的に魅力的な形で伝えるものです。「画像スライド」スライドタイプをクリックしてください。フライアウトメニューが更新され、画像スライドを作成するための関連オプションがすべて表示されます。
画像をアップロード | URLを指定 – WordPressメディアギャラリーに画像をアップロードするか、別の場所にホストされている場合はURLを貼り付けるかを選択します。
キャプション | 本文 | なし – 画像に重ねて表示するテキストキャプションが必要か、それに付随する簡単な本文が必要かをSlideDeckに指示します。あるいは、関連テキストなしで画像全体を表示することもできます。
スライドリンク – ユーザーがスライドのどこかをクリックした場合にアクセスするURLを指定します。
タイトル – キャプションまたは本文エリアに表示されるスライドのタイトルを付けます。
説明 – スライドの説明文を入力します。リッチテキストを入力できます！
キャプションの位置 – スライド上のテキストオーバーレイの位置を決定します。キャプションは上下、本文は左右に配置できます。
スライドがお好みの設定になったら、「適用」ボタンを押すだけで、ライブプレビューエリアが更新され、最初 のスライドが表示されます。この例では、URLを指定し、キャプションを下に表示し、スライドリンクなしでスライドを作成しました。
これで最初のカスタムコンテンツスライドが作成されました – 簡単ですよね？次に、製品のデモを示すビデオを追加するために2つ目を追加します。
動画スライドの作成
SlideDeck 2は、YouTube、Vimeo、Dailymotionの3つのソースからのビデオコンテンツをサポートしています。つまり、製品のデモビデオをこれらのサービスのいずれかにアップロードし、ビデオページのURLを貼り付けて「更新」をクリックするだけで済みます。
画像スライドタイプと同様に、訪問者に動画で何を見るかについてのアイデアを与えるために、タイトルと簡単なキャプションまたはテキストの段落を追加することを選択できます。デフォルトでは、SlideDeck 2 は YouTube/Vimeo/Dailymotion ページにあるキャプションコンテンツを取り込みますが、製品ツアーのニーズに合わせて調整できます。
前と同様に、適用をクリックし、スライダーをすばやくクリックして進んでください。これで、画像スライドとビデオスライドの間を行き来できるようになります。
テキストスライドの作成
たとえば、機能リストを表示したり、製品の素晴らしいレビューからの引用を共有したりするために、テキスト用のスペースが必要になる場合があります。このような場合は、テキストスライドタイプを使用できます。
これは非常にわかりやすいスライドタイプで、考慮すべきオプションはいくつかしかありません。
レイアウト – 基本レイアウトでは、スライドの上部にタイトルを配置し、その下にテキストを流し込みます。マルチカラムは、テキストを自動的に2つのカラムに折り返すことで、新聞のような形式になります。ブロック引用では、大きくて太いタイポグラフィで短いテキストスニペットを強調表示できます。以前と同様に、「適用」をクリックしてスライドをSlideDeckに追加します。
スライドの再編成
この時点で、ユーザーをすぐにツアーに参加させ、エンゲージさせるために、画像ではなくビデオスライドを最初に表示したいと思うかもしれません。SlideDeckを使えば、これを瞬時に行うことができます。スライドヘッダーエリアで、ビデオスライドをクリックしてドラッグし、画像スライドの左側にある光るスペースにドロップします。とても簡単です！
さらに進んで – HTMLスライドタイプを使用する
HTMLスライドタイプは、SlideDeck 2のデベロッパーパッケージに強力な機能を追加するもので、スライドに独自のHTMLコードを入力できます。コンテンツのより複雑なレイアウトや、コンテンツスライダーに強力なインタラクションを追加するのに最適です。たとえば、サインアップフォームを埋め込むことができるため、顧客は製品ツアーの最後にメールニュースレターを受け取ることを選択できます。これは、もしあれば強力なコールトゥアクションです！
HTML スライドタイプを選択すると、フライアウトメニューに HTML エディターが表示されます。
HTML の挿入フィールドにカスタムコードを貼り付けることができます。構造が正しくなっていることを確認するのに役立つように、さまざまなタグが自動的に色分けされていることに気付くでしょう。注意すべき重要な点がいくつかあります。
- <style></style> タグの間にスライドコンテンツの CSS スタイルルールを含めることができ、それらは SlideDeck のすべてのスライドに適用されます。
- SlideDeckのライブプレビューは、テーマのスタイルがコンテンツスライダーとどのように相互作用するかを予測できないため、複雑なスタイリングの場合は、SlideDeckを発行する予定のページで表示すると、より正確なプレビューが得られます。
コードを配置したら、適用をクリックすると、スライドがローテーションに追加されます。
レンズの設定
これで、最初 のカスタムコンテンツスライドデッキが作成されました！ライブプレビューでスライドを数分間クリックして、うまくできた仕事の輝きに浸ってください。
次に、レンズを設定してサイトにシームレスに統合する時間です。SlideDeckには、レンズをカスタマイズすることで、新しい製品ツアーの外観を制御するための膨大なオプションが含まれています。
SlideDeckの保存と公開
素晴らしいコンテンツ？OK。魅力的なテーマを選択し、カスタマイズしましたか？OK。これで、新しい製品ツアーを公開し、訪問者を顧客に変える準備が整いました！
SlideDeckでは、スライダーをWordPressサイトに埋め込むための3つの方法があります。既存のページや投稿のコンテンツに挿入する方法、スライダーが埋め込まれた新しいページや投稿を作成する方法、そしてページテンプレートに挿入する方法です。製品ツアーをホームページに追加したい場合は、おそらくページテンプレートへの挿入が最善の方法でしょう。
まとめ
コンテンツスライダーは通常、画像ギャラリーや注目の投稿にのみ使用されますが、SlideDeck 2は、訪問者を惹きつけ、再訪を促す魅力的な体験を作成するために、コンテンツスライダーの可能性を探求するための多くの柔軟性を提供します。WPBeginnerでは、ぜひチェックしてみることを強くお勧めします！カスタムSlideDeckの使用方法のライブ例は、無料WordPressブログ設定ページでご覧いただけます。
共有したいSlideDeckの例がありますか？コメントでお知らせください！また、このシリーズのパート1もチェックしてください。ここでは、動的ソーススライドデッキの作成方法を紹介しています。
タッチインターフェーススライダーは、Webデザインの未来です。今すぐSlideDeckを入手。クーポンコード：WPB-SD2 を使用すると20％割引になります。
質問や提案はありますか？コメントを残して、議論を開始してください。