WordPressで動画スライダーを作成する方法(簡単なチュートリアル)

競合他社が簡単に注目を集めているのに、WordPressの直帰率が上昇するのを見ているのはイライラするものです。多くの場合、その違いは1つのこと、つまり「動き」にかかっています。

静的なページは興味を持続させるのに苦労し、訪問者はエンゲージメントなしにスクロールして通り過ぎてしまいます。

これを修正する1つの方法は何でしょうか?動画スライダーを追加することです。

動画スライダーは、動き、ビジュアル、ストーリーテリングを組み合わせてコンテンツに命を吹き込みます。静止画ではできない方法で注目を集め、ユーザーがサイトに長く滞在するように促します。

このチュートリアルでは、コーディングなしでWordPressに動画スライダーを作成する方法を紹介します。完了すると、サイトをより魅力的にし、訪問者を惹きつけるダイナミックなホームページが完成します。🙌

how-to-create-a-video-slider-in-wordpress-og

WordPressでビデオスライダーを使用する理由

動画スライダーは、WordPressサイトをより魅力的で記憶に残るものにする簡単な方法です。

静止画とは異なり、動画はすぐに注意を引き、より少ない時間でより多くの情報を示すことができます。強い第一印象は、訪問者がサイトに留まるか離れるかの違いになります。

動画スライダーは非常に汎用性も高いです。製品デモを強調したり、顧客のレビューを共有したり、プロモーションコンテンツを紹介したりするために使用できます。例えば:

  • 旅行サイトでは、ホテルの推薦、目的地、ツアー体験などを紹介できます。
  • 不動産サイトでは、バーチャル物件ツアーを掲載できます。

基本的に、ビデオスライダーは画像ではなくビデオを使用するスライドショーです。これにより、サイトがより生き生きとし、インタラクティブになります。

ビデオスライダーのあるウェブサイト

ここに、WordPressウェブサイトで動画スライダーを使用する実用的な方法をいくつかご紹介します。

  • 製品またはサービスのレビューを紹介する
  • 機能と製品の動作方法を実演する。
  • 満足している顧客からの短いお客様の声を共有しましょう。
  • 詳細なケーススタディを強調する。

これを踏まえ、WordPressで簡単に動画スライダーを作成して視聴者を惹きつける方法を解説します。このガイドで取り上げる全ステップの概要を以下に示します。

  1. WordPressサイトに動画スライダーを追加する
  2. WordPressでのビデオスライダーの表示
  3. ボーナス: WordPressに注目のコンテンツスライダーを追加する
  4. よくある質問:WordPressでのビデオスライダーの作成
  5. 次のステップ:WordPressでのメディアファイルの使用方法ガイド

準備はいいですか?早速始めましょう!

WordPressサイトに動画スライダーを追加する

ウェブサイトに動画スライダーを追加する最も簡単な方法は、プラグインを使用することです。

WordPressの市場でSoliloquyが最高のWordPressスライダープラグインであるため、それをお勧めします。ほとんどのWordPressスライダープラグインはウェブサイトを遅くしますが、Soliloquyは非常に高速で、ページの読み込み時間に影響を与えません。

広範囲にテスト済みです。詳細については、当社の完全なSoliloquyレビューをご覧ください。

Soliloquy WordPress 画像スライダー

Soliloquyは、YouTube、Vimeo、Wistiaなど、複数の動画プラットフォームをサポートしています。そのため、すでに公開されている動画の場合は、動画URLを入力するだけで済みます。

このプラグインはモバイルレスポンシブでもあります。これは、あらゆるデバイスや画面サイズで機能する動画スライドを作成するために使用できることを意味します。さらに、複数のスライドタイプに対応しているため、動画、画像、コンテンツを追加することもできます。

まず、Soliloquyプラグインをインストールして有効化する必要があります。インストールの詳細については、WordPressプラグインのインストール方法に関する投稿をご覧ください。

💡 注:ビデオスライダーを作成できる無料のSoliloquyプラグインもあります。しかし、このチュートリアルでは、YouTube、Vimeo、Wistaの組み込みサポートと、より多くのビデオ制御設定を備えているため、Soliloquy Proプラグインを使用します。

アクティベートしたら、Soliloquy » Add Newに移動するだけです。

次の画面で、新しいビデオスライダーにタイトルを付ける必要があります。次に、「他のソースからファイルを選択」というボタンをクリックしてください。

新しい動画スライダーを追加

🧑‍💻 プロのヒント: Soliloquyでは動画を直接アップロードできますが、これは推奨されません。動画をWordPressライブラリにアップロードするとサイトが遅くなる可能性があるため、YouTube、Vimeo、またはWistiaのような動画ホスティングサービスを使用する方が良いでしょう。

詳細については、WordPressに動画をアップロードしてはいけない理由に関するガイドをご覧ください。

ポップアップウィンドウが表示され、「動画スライドを挿入」オプションをクリックする必要があります。

ここで、タイトル、動画URL、キャプション、および動画の代替テキストを追加する必要があります。

動画URLには、メディアライブラリのリンク、またはYouTube、Vimeo、Wistiaなどの動画ホスティングサイトのリンクを使用できます。

ビデオスライドを挿入する

ビデオの詳細をすべて入力してください。

「画像URL」フィールドには、ビデオのプレースホルダー画像も提供する必要があります。この画像は、ビデオが再生されていないときに使用されます。また、ユーザーがクリックしたときにのみビデオが読み込まれるため、WordPressのパフォーマンスを向上させるのに役立ちます。

次に、「動画URL」フィールドに、メディアライブラリまたはYouTubeのような動画ホスティングサイトから直接動画URLを見つけることができます。

動画にキャプションを追加するオプションもあります。キャプションを追加する場合は、再生ボタンをクリックしたときに何が表示されるかを説明し、魅力的な内容にすることをお勧めします。

動画スライドの追加

ビデオスライドをもう1つ追加したい場合は、「別のビデオスライドを追加」ボタンをクリックしてください。

そこから、次のビデオのタイトル、ビデオURL、画像URL、キャプション、代替テキストをアップロードする必要があります。

別のビデオスライドを追加

それが終わったら、追加したいすべての動画スライドに対してプロセスを繰り返すことができます。

その後、「スライダーに挿入」ボタンをクリックするだけです。

スライダーに挿入

ビデオスライドは、新しいスライド画面にこのように表示されます。

変更が必要な場合は、いつでも鉛筆アイコンをクリックしてビデオを編集したり、「非アクティブ」アイコンをクリックして非アクティブにしたりできます。

ここから、「設定」タブに移動して、ビデオスライダーの表示方法をカスタマイズできます。

動画スライドの設定タブ

この画面では、いくつかの設定を切り替えることができます。

例えば、スライドの寸法を変更してウェブデザインに合わせることができます。スライダーとキャプションの位置をカスタマイズして、ページ上の他の要素と揃えることも可能です。

スライダーの寸法

その他のオプションとして、動画の自動再生を許可するかどうかを検討することもできます。

ビデオスライダーを訪問者がページにアクセスしたときに自動再生するように設定すると、コンテンツを強制的に視聴させることができます。ただし、ブラウザもビデオを読み込む必要があるため、ページの速度が低下する可能性があることに注意してください。

動画の自動再生

Soliloquyの良い点は、プラグインが動画スライダーをモバイルデバイス向けに最適化できることです。ただし、設定は手動でセットアップする必要があります。

これを行うには、「モバイル」タブに移動しましょう。

内部に入ったら、モバイルスライダー画像を作成し、キャプションを表示して、再生ボタンをクリックする前に視聴者が何を見るかを知ることができるようにできます。

モバイルビデオスライダー

これで、WordPressブログまたはウェブサイトにスライダーを追加する準備ができました。

右側のパネルにある「公開」ボタンをクリックしてください。

公開ボタン

WordPressでのビデオスライダーの表示

スライダーを埋め込むには、表示したい投稿またはページを作成または編集することをお勧めします。

WordPressエディターでは、「+」ボタンをクリックして、Soliloquyブロックをページに追加できます。プロセスを簡単にするには、検索バーに「Soliloquy」と入力します。

Soliloquyブロックを追加

次に、Soliloquyウィジェットから作成したばかりのビデオスライダーを選択し、ページに挿入しましょう。

それが終わったら、一番上にある「公開」または「更新」ボタンをクリックしてください。

WordPressにビデオスライドを挿入する

これで完了です。投稿をプレビューして、ビデオスライドがどのように機能するかを確認できます。

このようになります:

ビデオスライダープレビュー

まだクラシックWordPressエディターを使用している場合は、任意のWordPressページまたは投稿に動画スライダーを追加することもできます。

すべての動画スライダーが保存されているSoliloquyページにあるショートコードをコピーする必要があります。次に、そのショートコードをコンテンツに挿入するだけです。

詳細については、WordPressにショートコードを挿入する方法に関するガイドをご覧ください。

ショートコードをコピー

ウェブサイトに動画スライダーを追加することに加えて、WordPressのページに注目のコンテンツスライダーを追加することも検討してください。

おすすめのブログ記事を紹介するだけでなく、注目のコンテンツスライダーを追加して、オンラインストアの注目の商品を目立たせたり、レビューを共有したり、ポートフォリオアイテムを見せたり、人気のカテゴリを表示したりできます。

動画スライダーとは異なり、注目のコンテンツスライダーは、画像とリンクの組み合わせをスライドに表示できます。

Soliloquyで「Featured Content Addon」をインストールするだけです。

activate-featured-content-addon

次のステップは、ビデオスライダーの場合と同様に、マルチメディアファイルのコンテンツ、リンク、説明を追加することです。

より詳しいチュートリアルについては、ブログ記事「WordPressでフィーチャーコンテンツスライダーを適切に追加する方法」をご覧ください。

よくある質問:WordPressでのビデオスライダーの作成

動画スライダーがサイトにどのように影響するか、またはそれらを効果的に使用する方法についてまだ疑問がある場合は、これらのよくある質問が重要なポイントをカバーしています。

動画スライダーは私のウェブサイトを遅くしますか?

できますが、Soliloquyのようなプラグインはパフォーマンスのために設計されています。それらは遅延読み込みを使用するため、ユーザーが再生をクリックしたときにのみ動画が読み込まれます。動画をWordPressに直接アップロードする代わりにYouTube、Vimeo、またはWistiaのような動画ホスティングサービスを使用することも、サイトを高速に保ちます。

同じスライダーにビデオと画像を混在させることはできますか?

はい。Soliloquyは複数のスライドタイプをサポートしているため、1つのスライダー内でビデオ、画像、カスタムHTMLコンテンツを組み合わせることができます。

ビデオの場合、ビデオ再生前に表示されるプレースホルダー画像(ポスター画像)を提供できます。これにより、パフォーマンスが向上し、読み込み中にスライダーが見栄えが良くなります。

Soliloquyの動画スライダーはモバイルフレンドリーですか?

もちろんです。当社のテストによると、Soliloquyは完全にレスポンシブなので、スライダーはデスクトップ、タブレット、スマートフォンに合わせて自動的に調整されます。

動画スライダーを追加するためにコーディングを知っている必要がありますか?

全くありません。このチュートリアルに従えば、完全にコード不要で作成できます。これにより、初心者でも簡単にビデオスライダーを作成、カスタマイズ、追加できます。

次のステップ:WordPressでのメディアファイルの使用方法ガイド

この記事が、Soliloquyを使用してWordPressにビデオスライダーを追加するのに役立ったことを願っています。次に、次のガイドも確認してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

2 CommentsLeave a Reply

  1. ウェブサイトに動画スライダーを追加したいと思っていましたが、どこから始めればよいかわかりませんでした。さまざまなスライダープラグインとカスタマイズオプションの内訳は非常に役立ちます。これで、動画コンテンツを紹介するための視覚的に魅力的なスライダーを作成できます。共有していただきありがとうございます!

  2. これは、製品説明、提供されるサービス、および操作方法のガイドなど、指示目的で短いビデオを展示するために多くのウェブサイトで非常に必要とされています。
    ウェブサイトの速度の問題のために、私は常にビデオスライダーの埋め込みという考えをスキップしてきました。
    Soliloquyは速度を管理し、スライダーにYouTubeビデオを埋め込むことを許可するため、それを必要とするすべてのウェブサイトで使用することは理にかなっています。
    このガイドをwpbeginnerに感謝します。私は間違いなくこれを試してみます。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。