WordPressで動画ギャラリーを作成する方法（ステップバイステップ）

WordPressで動画ギャラリーを作成したいですか？

デフォルトでは、WordPressでは投稿やページに動画を埋め込むことができます。ただし、多くの動画を追加すると、ウェブサイトの速度が低下し、ホスティングサーバーの容量を大量に消費します。

この記事では、ウェブサイトのパフォーマンスに影響を与えない、プロフェッショナルな見た目のYouTube動画ギャラリーを簡単に作成する方法を紹介します。

WordPressで動画ギャラリーを作成する理由

人々は動画を見るのが大好きです。実際、私たちの究極のブログ統計リストによると、動画を含む投稿は、動画を含まない投稿よりも83%多くのトラフィックを獲得しています。

もしあなたがオンラインストアを運営しているなら、動画はさらに売上を伸ばすことができます。専門家によると、88%の人が動画を見た後に商品やサービスを購入したことがあるそうです。

デフォルトでは、WordPressでは動画を投稿、ページ、サイドバーなどのウィジェット対応エリアに追加できます。しかし、組み込みのWordPressブロックやツールを使用して、見栄えの良いギャラリーレイアウトを作成するのは困難です。

WordPressは動画のホスティングと再生にも最適化されていません。ウェブサイトに大量の動画をアップロードすると、読み込み時間が長くなり、訪問者のエクスペリエンスが悪化することが多いため、動画を直接WordPressにアップロードしないでください。

代わりに、YouTubeのような動画ホスティングプラットフォームの使用をお勧めします。YouTubeチャンネルをお持ちであれば、ウェブサイトのパフォーマンスに影響を与えることなく、すべての動画をWordPressに埋め込むことができます。

それでは、WordPressで動画ギャラリーを作成する方法を見てみましょう。

ビデオギャラリープラグインのインストール方法

WordPressウェブサイトにYouTube動画ギャラリーを追加する最も簡単な方法は、Smash Balloon YouTube Feedプラグインを使用することです。これはWordPress向けの最高のYouTube動画ギャラリープラグインであり、160万以上のウェブサイトで使用されています。

注意: YouTube Feed無料プラグインがあり、WordPressでYouTubeチャンネルの最新動画を表示できます。しかし、プロバージョンを使用すると、YouTubeプレイリスト、お気に入り、ライブストリームなどを埋め込むことができます。

すでにYouTubeチャンネルをお持ちの場合は、すべてのビデオをWordPressに簡単に埋め込むことができます。チャンネルをお持ちでない場合は、作成して、WordPressウェブサイトに埋め込みたいすべてのビデオをアップロードする必要があります。

その後、Smash Balloon YouTube Feedプラグインをインストールして有効化する準備が整います。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、YouTube Feed » Settings に移動し、「License Key」フィールドにライセンスキーを入力してください。

この情報は、Smash Balloonウェブサイトのお客様のアカウントの下にあります。

キーを入力したら、「有効化」ボタンをクリックしてください。

WordPressウェブサイトをYouTubeに接続する方法

プラグインが有効になったら、YouTube チャンネルに接続できます。YouTube フィード » 設定画面で、「ソースの追加」ボタンを選択します。

次の画面で、「Google経由でYouTubeに接続」をクリックしてください。Smash Balloonに、すべてのGoogleアカウントが表示されます。

リストからアカウントを選択するか、「別のアカウントを使用」をクリックします。

その後、Smash Balloon が YouTube チャンネルにアクセスできるという警告が表示されます。

続行してもよろしければ、「続行」ボタンをクリックします。

Smash Balloonは、YouTubeチャンネルのIDまたはユーザー名を尋ねます。

この情報を取得するには、YouTubeのウェブサイトにアクセスし、右上隅にあるプロフィール写真をクリックします。その後、「チャンネル」を選択します。

次に、アドレスバーを確認してください。「user/」の後に何かテキストが表示されている場合、それがYouTubeチャンネルのユーザー名です。

「channel/」の後に数字と文字の羅列が表示される場合は、それがチャンネルIDです。

値をコピーして、WordPressダッシュボードに戻ります。

ここで、デフォルトで「チャンネルIDまたはユーザー名を入力」と表示されているフィールドに情報を貼り付けます。準備ができたら、「次へ」をクリックします。

YouTube APIキーを作成する

この時点で、「API キーが入力されていません」というメッセージが表示されます。

混乱を避けるために、YouTube APIキーを作成し、プラグインの設定に追加することも推奨します。

新しいタブでGoogle Consoleに移動し、Googleアカウントを使用してサインインします。

コンソールにログインしたら、ツールバーのドロップダウンメニューをクリックします。デフォルトでは、最新のGoogle Consoleプロジェクトの名前が表示されるため、異なるテキストが表示される場合があります。

Google Cloud Consoleに初めてログインする場合、求められたときに利用規約に同意する必要があります。

それが終わったら、「新しいプロジェクト」をクリックします。

プロジェクトの名前を入力できるようになりました。これは参照用ですので、好きな名前を使用できます。その後、「作成」をクリックします。

ツールバーで「検索」アイコンをクリックし、「YouTube Data API」と入力します。「マーケットプレイス」の下にあるYouTube Data APIを見つけてクリックします。

これにより、YouTube API キーを有効にできる画面が表示されます。

これを行うには、「有効化」ボタンをクリックします。

左側のメニューで「認証情報」を選択します。

次に、「認証情報を作成」をクリックします。

表示されるドロップダウンメニューで、「APIキー」をクリックします。

しばらくすると、「APIキーが作成されました」というメッセージが表示されます。この情報をSmash Balloonプラグインに追加する必要があるため、メモしておいてください。

すべてのAPIキーはデフォルトで無制限です。他の人が許可なくキーを使用するのを防ぐために、「APIキーの編集」リンクをクリックして制限することをお勧めします。

これにより、すべてのキーが表示される画面が開きます。先ほど作成したYouTubeキーをクリックするだけです。

注意: ポップアップを誤って閉じてしまった場合でも、慌てる必要はありません。「認証情報」を左側のメニューから選択することで、同じ画面にアクセスできます。同様に、APIキーを記録しなかった場合は、「キーを表示」をクリックするだけで認証情報が表示されます。

「アプリケーションの制限を設定する」の下で、「ウェブサイト」オプションを選択します。

「ウェブサイトの制限」の下にある「追加」をクリックします。

これでWordPressウェブサイトのアドレスを入力し、「完了」をクリックできます。

Feeds for YouTubeがAPIにアクセスできるように、www.googleapis.comと入力し、「完了」をクリックする必要があります。

「API制限」の下で、「キーを制限する」の隣にあるラジオボタンをクリックします。

これが完了したら、「APIの選択」ドロップダウンメニューをクリックし、「YouTube Data API」の横にあるボックスにチェックを入れます。

その後、「OK」をクリックします。

APIキーの設定に満足したら、「保存」ボタンをクリックします。

これで、APIキーをWordPressウェブサイトに追加する準備ができました。WordPressダッシュボードに戻り、YouTube Feed » 設定に移動します。

ここで、APIキーを「APIキー」フィールドに貼り付け、「追加」をクリックします。

WordPressで動画ギャラリーを作成する方法

WordPressとYouTubeが接続されたので、WordPressでYouTubeチャンネルの最新動画を表示するのは簡単です。

YouTubeフィード » すべてのフィードに移動し、「新規追加」をクリックします。

Smash Balloon YouTube Feed Proを使用すると、プレイリスト、ライブストリーム、個々の動画など、さまざまな種類のYouTubeコンテンツを埋め込むことができます。

複数のソーシャルプラットフォームからの投稿を組み合わせてソーシャルウォールを作成することもできます。たとえば、Facebookのステータス投稿を埋め込み、ツイートを表示し、Instagramの写真をディスプレイし、YouTube動画を表示するなど、すべてを1つのギャラリーにまとめることができます。

YouTube ギャラリーを作成するには、「チャンネル」を選択してから「次へ」をクリックします。

次のタスクは、YouTube動画フィードの開始点として使用するテンプレートを選択することです。すべてのテンプレートは完全にカスタマイズ可能なので、ギャラリーの見た目に応じてデザインを微調整できます。

動画ギャラリーを作成するには、「ギャラリー」テンプレートを選択してから「次へ」をクリックします。

Smash BalloonはYouTubeギャラリーを作成します。これは良いスタートですが、WordPressブログやウェブサイトでの動画の見栄えを微調整したい場合があります。

YouTubeギャラリーのカスタマイズ方法

新しいフィードを作成するたびに、Smash Balloonは自動的にエディターに移動します。右側にはギャラリーのプレビューが表示され、左側にはいくつかの設定が表示されます。

これらのオプションのほとんどは自明ですが、いくつかの重要な領域を簡単に説明します。

フィードの外観に満足できない場合は、「テンプレート」メニューオプションをクリックして別のテンプレートを試すことができます。

次に、「変更」ボタンを選択します。

これにより、使用できるさまざまなテンプレートが表示されるポップアップが開きます。

使用したいテンプレートをクリックし、「更新」をクリックするだけです。

その後、「カスタマイズ」リンクをクリックします。

これで、Smash Balloon のメイン設定画面に戻ります。

次に、「フィードレイアウト」をクリックして、動画の表示方法を変更できます。

この画面では、グリッド、ギャラリー、リスト、カルーセルレイアウトを切り替えることができます。

選択したレイアウトによっては、追加の設定にアクセスできる場合があります。

例えば、「リスト」を選択した場合、Smash Balloonが表示する動画の数を変更し、YouTube動画間のスペースを増やすことができます。

変更を加えるとプレビューが自動的に更新されるため、さまざまな設定を試して、ビデオギャラリーに最適なものを確認できます。

ソーシャルメディア統計によると、消費者の90%がモバイルデバイスで動画を視聴しており、70%の人がスマートフォンやタブレットを使用してYouTubeにアクセスしています。これを念頭に置いて、動画ギャラリーがデスクトップと同じくらいモバイルでも見栄えが良いことを確認したいはずです。

右上隅にあるボタンの行を使用して、デスクトップコンピューター、タブレット、スマートフォンでフィードがどのように表示されるかを確認できます。

WordPress ウェブサイトのモバイル版をテストした後、スマートフォンやタブレットに表示する動画の数を変更したい場合があります。これにより、ギャラリーが小さなタブレットやスマートフォンの画面に快適に収まるようになります。

ギャラリーレイアウトを使用している場合、Smash Balloon はモバイルデバイスとデスクトップコンピューターで異なる数の列を表示します。

デフォルト設定を変更するには、「列」セクションに新しい数値を入力するだけです。

変更に満足したら、「カスタマイズ」をクリックして、Smash Balloon のメイン設定画面に戻ります。

次のオプションである「配色」を探索する準備ができました。

デフォルトでは、Smash BalloonはWordPressテーマと同じ配色を使用します。ただし、好みに応じて「Light」または「Dark」の配色に切り替えることができます。

「カスタム」を選択し、設定を使用してリンクの色、テキストの色、背景色などを変更することで、独自のカラースキームを作成することもできます。

次に、動画ギャラリーの上にヘッダーを追加したい場合があります。このヘッダーにはYouTubeのプロフィール写真とチャンネル名が表示されるため、訪問者はコンテンツがどこから来たのかを正確に確認できます。

ヘッダーセクションを追加するには、左側のメニューで「ヘッダー」をクリックします。

この画面で、「有効にする」スライダーをクリックして、グレーから青に切り替えます。

ヘッダーセクションを追加した後、コントロールを使用して標準ヘッダーとテキストヘッダースタイルの切り替えができます。

「テキスト」を選択した場合、テキストの色とフォントサイズを変更できます。デフォルトでは、このヘッダーには「We are on YouTube.」というメッセージが表示されます。「テキスト」ボックスに入力することで、独自のメッセージに置き換えることができます。

ヘッダーの外観に満足したら、次の設定画面は「動画」です。

これにより、訪問者が動画にカーソルを合わせたとき、再生中のとき、デフォルトで各動画がどのように表示されるかを微調整できる新しい画面が表示されます。それぞれのオプションを順に見ていきましょう。

「ビデオスタイル」では、ボックスレイアウトと通常のレイアウトを切り替えることができます。

「ボックス」を選択した場合、背景色を変更したり、ボックスシャドウを追加したり、ボーダー半径を増やして角を丸くすることができます。

動画を横向きまたは縦向きのレイアウトで表示するかどうかを選択することもできます。

変更に満足したら、「動画」リンクをクリックします。これにより前の画面に戻り、「個々の要素を編集」を選択できます。

ここで、各動画からさまざまな要素を追加および削除できます。

たとえば、動画のタイトル、説明、日付をカスタマイズできます。

個々のYouTube要素の色やサイズは、その要素の名前をクリックすることで変更することもできます。

一部の要素には追加設定があります。たとえば、「説明」を選択した場合、Smash Balloon が表示する最大文字数を設定できます。

終了したら、「ホバーステート」設定に進むことができます。

ここで、訪問者が動画にマウスカーソルを合わせたときに表示されるコンテンツを変更できます。

訪問者が動画をクリックすると、埋め込み動画プレーヤーで再生が開始されます。「動画プレーヤーのエクスペリエンス」をクリックすることで、プレーヤーの動作や見た目を変更できます。

ここで、プレーヤーのアスペクト比を変更したり、動画を自動再生するか、訪問者が再生ボタンをクリックするまで待つかを選択できます。

「コールトゥアクション」を選択すると、動画が終了したときや訪問者が再生を一時停止したときに何が起こるかを変更できます。

デフォルトでは、Smash Balloon は関連動画を表示して、YouTube チャンネルでのエンゲージメントを高めようとします。代わりにカスタムリンクを表示したい場合があります。たとえば、WooCommerce ストアを運営している場合は、最も人気のある WooCommerce 商品にリンクすることができます。

プレーヤーに満足したら、「カスタマイズ」をクリックしてSmash Balloonのエディタ画面に戻ることができます。

その後、左側のメニューから「もっと読み込むボタン」オプションを選択します。

「もっと読み込む」ボタンは、訪問者がより多くの動画を簡単にスクロールできるようにします。これにより、YouTubeでのエンゲージメントを高め、訪問者をウェブサイトに長く滞在させることができます。

とはいえ、ボタンの背景色、ホバー状態、テキストの色を変更して、目立たせたい場合があるかもしれません。

このボタンはデフォルトで「もっと読み込む…」と表示されますが、「テキスト」フィールドに入力することでカスタムメッセージを追加できます。

デフォルトでは、Smash Balloon は動画ギャラリーの下に「登録」ボタンを表示します。

このボタンにより、訪問者はYouTubeチャンネルに参加しやすくなります。そのため、Smash Balloonのメイン設定画面で「購読ボタン」を選択してカスタマイズすることをお勧めします。

この画面では、ボタンの背景色、ホバー状態、テキストの色を変更できます。

「テキスト」ボックスに入力することで、「購読」を独自のメッセージに置き換えることもできます。

ビデオギャラリーの外観に満足したら、「保存」をクリックして変更を保存することを忘れないでください。これで、ギャラリーをウェブサイトに追加する準備が整いました。

WordPress に動画ギャラリーを埋め込む方法

ブロック、ウィジェット、またはショートコードを使用して、YouTubeギャラリーをWordPressに追加できます。

Smash Balloon を使用して複数のフィードを作成した場合は、ブロックまたはウィジェットを使用して追加する場合、ギャラリーのコードを知る必要があります。

コードを取得するには、YouTubeフィード » すべてのフィードに移動し、「ショートコード」の下のテキストをコピーします。

次の例では、youtube-feed feed=2を使用する必要があります。

動画ギャラリーをページまたは投稿に埋め込みたい場合は、「Feeds for YouTube」ブロックの使用をお勧めします。

まず、YouTube 動画ギャラリーを埋め込みたいページまたは投稿を開きます。次に、「+」アイコンをクリックして新しいブロックを追加し、「Feeds for YouTube」と入力し始めます。

正しいブロックが表示されたら、クリックして投稿またはページに追加します。

ブロックには、デフォルトでSmash Balloonフィードのいずれかが表示されます。代わりに別のフィードを使用したい場合は、右側のメニューで「ショートコード設定」を探します。

これで、このボックスにショートコードを追加できます。それが終わったら、「変更を適用」ボタンをクリックします。

これで、ブロックに YouTube チャンネルのすべての動画が表示されます。ページを発行または更新するだけで、YouTube のソーシャルメディアフィードがライブになります。

サイドバーやそれに類するセクションなど、ウィジェット対応エリアにフィードを追加することもできます。これにより、ギャラリーをウェブサイト全体に表示できます。

これを行うには、WordPressダッシュボードのAppearance » Widgetsに移動し、青い「+」ボタンをクリックするだけです。

次に、検索バーに「Feeds for YouTube」と入力して、適切なウィジェットを見つけます。

その後、ビデオギャラリーを表示したい領域にドラッグするだけです。

デフォルトでは、ウィジェットはYouTube Feed Proプラグインを使用して作成したフィードの1つを表示します。代わりに別のフィードを表示するには、フィードのコードを「ショートコード設定」ボックスに入力してから「変更を適用」をクリックします。

これで「更新」ボタンをクリックすると、ウィジェットが公開されます。

詳細については、ウィジェットの追加と使用方法に関するステップバイステップガイドをご覧ください。

また、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアに動画ギャラリーを埋め込むこともできます。ショートコードを取得するには、単に YouTube Feed » All Feeds に移動し、「Shortcode」列の値をコピーしてください。

次に、このコードをサイトに追加するだけです。詳細については、WordPress にショートコードを追加する方法に関する詳細ガイドをご覧ください。

最後に、ブロック対応テーマを使用している場合は、フルサイトエディターを使用して、サイトのどこにでも Feeds for YouTube ブロックを追加できます。

WordPressダッシュボードで、外観 » テーマエディターに移動するだけです。

デフォルトでは、フルサイトエディターにはテーマのホームページテンプレートが表示されます。

YouTubeビデオギャラリーを別のテンプレートに追加したい場合は、左側のメニューで「テンプレート」をクリックします。

これで、エディターに、WordPress テーマを構成するすべてのテンプレートのリストが表示されます。

編集したいテンプレートをクリックしてください。

WordPress はテンプレートのプレビューを表示します。

サイトのこの部分にギャラリーを追加しても問題ない場合は、鉛筆アイコンをクリックしてください。

テンプレートを選択したら、YouTube動画を表示したい領域にマウスカーソルを合わせます。

次に、表示される青い「+」をクリックします。

それが完了したら、「Feeds For YouTube」と入力し始めます。

右側のブロックが表示されたら、クリックしてテンプレートに追加します。

いつものように、Smash Balloon はデフォルトでフィードを表示します。これが使用したい YouTube ギャラリーでない場合は、上記と同じ手順でギャラリーのショートコードを追加できます。

動画ギャラリーをWordPressの投稿に変換する

これまで、Smash Balloonを使用して動画ギャラリーを作成し、ウェブサイトの他の部分と完全に一致するようにカスタマイズする方法を見てきました。このプラグインには、ギャラリーの動画をWordPressの投稿に変換するなど、さらに探索したい機能がいくつかあります。

このプラグインを使用すると、YouTube チャンネルの任意の動画を使用して、投稿をすばやく簡単に作成できます。その後、使い慣れた WordPress のダッシュボードとツールを使用して、その投稿に他のコンテンツを追加できます。

投稿を公開すると、Smash Balloonは画面上部に動画と、そのタイトルや公開日などの情報を表示します。

その他のコンテンツはビデオの下に表示されます。

これは、各動画を手動でブログ投稿に埋め込むよりもはるかに高速です。個々の動画を共有する簡単な方法でもあります。たとえば、ソーシャルメディアで宣伝したり、メールニュースレターに追加したりすることで、特定の投稿にアクセスを誘導できます。

最初に行うことは、YouTube Feed » Settingsに移動して、各動画の下に表示される情報を選択することです。

ここで、「単一動画」タブを選択します。

表示したい情報の各項目にチェックを入れるだけです。

設定を保存するために、「変更を保存」をクリックすることを忘れないでください。

その後、YouTubeフィード » 個別動画に移動します。ここで、Smash Balloonを使用してWordPressに接続したすべてのYouTubeチャンネルが表示されます。

使用したいチャンネルを見つけて、その名前をクリックするだけです。

このチャンネルのすべての動画が表示されます。

ポストにしたいビデオを見つけて、「編集」リンクをクリックするだけです。

これで、標準のWordPress コンテンツエディターを使用して、投稿にブロック、テキスト、その他のコンテンツを追加できます。

投稿と動画を公開する準備ができたら、通常通り「Publish」ボタンをクリックするだけです。これで、ウェブサイトにアクセスすると、新しい動画投稿が表示されます。

関連: WordPress サイトで TikTok 動画ギャラリーを作成したい場合は、Smash Balloon がTikTok Feeds Pro プラグインも提供しています。ステップバイステップの手順については、WordPress に TikTok 動画を埋め込む方法に関するガイドをご覧ください。

この記事がWordPressで動画ギャラリーを作成するのに役立ったことを願っています。また、WordPressサイトを高速化する方法に関するガイドや、おすすめのソーシャルメディアプラグインもチェックしてみてください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。