WordPressでYouTubeチャンネルの最新動画を表示する方法

当社の読者の一人が最近、WordPress サイトに最新の YouTube 動画を表示する方法を尋ねました。それは素晴らしい質問であり、簡単な解決策があります。

WPBeginner では、WordPress の役立つチュートリアルを YouTube チャンネルに定期的に更新しています。ウェブサイトに新しい動画を 1 つずつ手動で埋め込むのがいかに時間がかかるか、私たちは直接学んできました。

幸いなことに、WordPressサイトに最新のYouTube動画を自動的に表示する簡単なプラグインを見つけました。この方法により時間を節約でき、ウェブサイトに常に最新のコンテンツが表示されるようになります。

手順をステップバイステップで見ていきましょう。

WordPressでYouTubeチャンネル動画を表示する理由

WordPressサイトに加えてYouTubeチャンネルも運営している場合は、動画をウェブサイトにも投稿するのが理にかなっています。

これらの動画は訪問者の注意を引きつけ、ウェブサイトに長く滞在してもらうのに役立ちます。これにより、ページビューを増やし、WordPressの直帰率を減らすことができます。

埋め込まれたYouTube動画は、ウェブサイトへの訪問者をさらに増やすことができます。実際、ブログ統計、トレンド、データの究極のリストによると、動画を含むブログ記事は、動画を含まない記事よりも83%多くのトラフィックを獲得しています。

ウェブサイトに少数の動画のみを追加したい場合は、WordPressのブログ投稿にYouTube動画を簡単に 埋め込むことができます。ただし、新しい動画ごとに手動で追加する必要があり、時間と労力がかかります。

その代わりに、新しい動画をチャンネルに投稿するたびに自動的に更新されるYouTubeフィードを埋め込むことをお勧めします。これにより、訪問者は追加の労力をかけずに、常に最新の動画を見ることができます。

それでは、WordPressでYouTubeチャンネルの最新動画を表示する方法を見ていきましょう。以下のクイックリンクを使用して、この記事をナビゲートできます。

• ステップ 1: YouTube動画プラグインのインストールとセットアップ
• ステップ2：GoogleコンソールでYouTube APIキーを作成する
• ステップ 3: YouTube チャンネルフィードを作成してカスタマイズする
• Step 4: Embed the Latest YouTube Channel Videos in WordPress

ステップ 1: YouTube動画プラグインのインストールとセットアップ

YouTubeチャンネルの最新動画を表示する最も簡単な方法は、無料のSmash Balloon Feeds for YouTubeプラグインを使用することです。このプラグインは、YouTubeチャンネルのフィードがサイトにどのように表示されるかを調整するための多くのカスタマイズオプションを提供します。

このチュートリアルでは、プラグインのPro バージョンまたは無料バージョンのいずれかを使用できます。どちらも機能します。Smash Balloon プラグインの完全なキットには、TikTok、Facebook などからの動画を埋め込む機能も含まれています。

まず、Feeds for YouTubeプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

有効化したら、YouTube フィード » 設定 に移動し、「ソースの追加」をクリックします。

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

リストからアカウントを選択するか、「別のアカウントを使用」をクリックして新しいGoogleアカウントを追加できます。

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

続行しても問題ない場合は、「続行」をクリックします。

この時点で、YouTubeチャンネルのIDまたはユーザー名を追加する必要があります。

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

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

「channel/」の後に英数字の文字列が表示されている場合、それがチャンネルIDです。以下の画像で確認できます。

値をコピーして、WordPressダッシュボードに戻ります。「チャンネルIDまたはユーザー名を入力」と表示されているフィールドに値を貼り付けます。

それが終わったら、「次へ」ボタンをクリックします。

ステップ2：GoogleコンソールでYouTube APIキーを作成する

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

混乱を避けるために、YouTube API キーを作成し、それを WordPressブログ またはウェブサイトに追加することを推奨します。

API キーなしで YouTube 動画を表示することは可能ですか？

答えはイエス、そうです。ただし、Smash Balloon はこの手順をスキップすることを推奨していません。なぜなら、これにより、時間の経過とともに YouTube データへのアクセスがより安定し、一貫したものになるからです。これにより、フィードの更新を維持する上での混乱の可能性が最小限に抑えられます。

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

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

Google Consoleに初めてログインする場合は、利用規約に同意する必要があります。

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

プロジェクトの名前を入力できるようになりました。これは参照用ですので、好きな名前を自由に使用できます。

それが完了したら、「作成」をクリックします。

次に、「検索」アイコンをクリックし、「YouTube Data API」と入力します。

「マーケットプレイス」の下で、YouTube Data APIを見つけてクリックします。

これにより、YouTube APIリクエストを行うためのキーを有効にできる画面が表示されます。

これを行うには、[有効にする]ボタンをクリックするだけです。

左側のメニューで「認証情報」をクリックします。

それが終わったら、「認証情報を作成」を選択します。

ドロップダウンメニューで「APIキー」をクリックします。

しばらくすると、「API キーが作成されました」というポップアップが表示されます。この情報をウェブサイトに追加する必要があるため、メモしておいてください。

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

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

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

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

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

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

「APIの制限」の下で、「キーを制限する」の隣にあるボタンを選択します。

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

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

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

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

最後に、キーを「APIキー」フィールドに貼り付けてから、「追加」をクリックします。

ステップ 3: YouTube チャンネルフィードを作成してカスタマイズする

WordPressウェブサイトとYouTubeを接続した後、チャンネルの 動画ギャラリーを作成 できます。

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

YouTube Feed Proを使用すると、個々のYouTube動画、プレイリスト、ライブストリームなどを埋め込むことができます。

複数のソーシャルプラットフォームからの投稿を組み合わせて、ソーシャルウォールを作成することもできます。たとえば、Facebookのステータス投稿を埋め込み、Instagramの写真を投稿するなどです。

無料プラグインを使用しているため、「チャンネル」をクリックしてから「次へ」を選択するだけです。

これによりエディタが開かれ、右側にYouTubeフィードのプレビューが表示されます。

左側には、YouTube動画の外観を微調整するために使用できるさまざまな設定が表示されます。

これらの設定は簡単なので、左側のメニューの各オプションをクリックして、希望する変更を行ってください。

設定を変更すると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して、ウェブサイトで最も見栄えの良いものを見つけることができます。

まず、「フィードレイアウト」をクリックして動画の表示方法を変更できます。この画面では、グリッド、ギャラリー、リスト、カルーセルレイアウトを切り替えることができます。

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

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

調査によると、消費者の90％がモバイルデバイスで動画を視聴しており、70％の人がスマートフォンまたはタブレットを使用してYouTubeにアクセスしています。これを念頭に置いて、最新の動画がデスクトップで表示されるのと同じくらいモバイルでも見栄えがするようにしたいはずです。

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

スマートフォンやタブレットに表示する動画の数を変更することもできます。これにより、YouTube動画が小さなタブレットやスマートフォンの画面に快適に収まるようになります。

デフォルトでは、Smash Balloon はモバイルデバイスとデスクトップコンピューターで異なる数の列を表示します。これらのデフォルト設定を変更するには、「列」セクションに新しい数値を入力するだけです。

次の設定画面、「配色」に進む準備ができました。

デフォルトでは、Feeds for YouTubeはWordPressテーマと同じカラースキームを使用します。ただし、動画フィードに「ライト」または「ダーク」のカラースキームを使用することもできます。

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

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

このセクションをカスタマイズするには、左側のメニューで「ヘッダー」をクリックします。

ここでは、コントロールを使用して、標準ヘッダースタイルとテキストヘッダースタイルの切り替えができます。

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

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

これにより、訪問者がマウスをホバーしたとき、および動画が再生されているときに、各 YouTube 動画がデフォルトでどのように表示されるかを微調整できる新しい画面が表示されます。

「個々の要素を編集」をクリックすると、「再生」アイコンを表示するかどうかを選択できます。

次の画像では、YouTube フィードのすべての動画に「再生」アイコンを追加しています。

変更に満足したら、「動画」リンクをクリックします。

これで前の画面に戻り、「ホバー状態」を選択できます。

ここで、訪問者が動画にカーソルを合わせたときに動画のタイトルを表示するかどうかを選択できます。

タイトルは、追加の役立つ情報を提供し、訪問者に動画を再生するように促すことができます。それを念頭に置いて、「動画タイトル」の横にあるチェックボックスをオンにすることをお勧めします。

訪問者が動画をクリックすると、埋め込み動画プレーヤーで再生が開始されます。

「動画プレーヤーの体験」をクリックすると、プレーヤーの動作や外観を変更できます。

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

動画プレーヤーの設定に満足したら、「カスタマイズ」リンクをクリックして、Smash Balloonのメインエディタ画面に戻ります。

ここで、左側のメニューから「もっと読み込むボタン」を選択します。

訪問者は「もっと読み込む」ボタンを使用して、より多くのYouTube動画を表示できます。これにより、訪問者はウェブサイトに長く滞在し、YouTubeチャンネルのエンゲージメントと再生回数を増やすことができます。

これを踏まえて、「もっと読み込む」ボタンを目立たせるために、背景色、ホバー状態、テキストの色を変更するとよいでしょう。

このボタンはデフォルトで「さらに読み込む…」と表示されますが、「テキスト」フィールドに入力することで、独自の行動喚起に置き換えることができます。

デフォルトでは、Smash Balloon は、最近の YouTube 動画の下に 「登録」ボタン を表示します。

これは、訪問者にYouTubeチャンネルに参加するように促します。より多くの登録者を獲得するには、Smash Balloonのメイン設定画面から「登録ボタン」を選択してボタンをカスタマイズすることをお勧めします。

この画面では、「有効にする」をクリックして「登録」ボタンを追加および削除できます。

ボタンの背景色、ホバー状態、テキストカラーも変更できます。

デフォルトでは、このボタンには「登録」という行動喚起が表示されます。

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

ビデオフィードの外観に満足したら、変更を保存するために「保存」をクリックすることを忘れないでください。これで、最新のYouTube動画をWordPressウェブサイトに追加する準備が整いました。

ステップ4：WordPressに最新のYouTubeチャンネル動画を埋め込む

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

Feeds for YouTubeプラグインを使用して複数のフィードを作成した場合、ブロックまたはウィジェットを使用する場合は、フィードのショートコードを知る必要があります。

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

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

最新の動画をページまたは投稿に表示したい場合は、「YouTube 用フィード」ブロックの使用をお勧めします。

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

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

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

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

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

ブロック対応テーマを使用している場合は、フルサイトエディターを使用して、サイトのどこにでも Feeds for YouTube ブロックを追加できます。手順は上記で説明した手順とほぼ同じですが、ブロックを追加するテンプレートまたはパターンを知る必要があります。

詳細については、WordPressのフルサイト編集に関する完全ガイドをお読みください。

サイドバーなど、ウィジェット対応のエリアにフィードを追加することもできます。これにより、ウェブサイト全体に最新のYouTube動画を表示できます。

これを行うには、WordPress ダッシュボードの [外観] » [ウィジェット] に移動し、「+」ボタンをクリックします。

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

次に、ウィジェットを YouTube チャンネルの最新動画を表示したいエリアにドラッグします。

デフォルトでは、ウィジェットにはFeeds for YouTubeで作成したフィードのいずれかが表示されます。

別のフィードを表示するには、そのフィードのコードを「ショートコード設定」ボックスに入力します。その後、「変更を適用」をクリックします。

最後に、「更新」ボタンをクリックしてウィジェットをライブにします。

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

もう1つのオプションは、ショートコードを使用して任意のページ、投稿、またはウィジェット対応エリアに最新の動画を埋め込むことです。正しいショートコードを取得するには、YouTubeフィード » すべてのフィードに移動し、「ショートコード」列の値を確認してコピーします。

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

YouTubeチャンネルとWordPressサイトを運営するためのヒント

WordPressサイトにYouTube動画を表示する方法についてもっと知りたいですか？それとも、YouTubeチャンネルを運営するためのヒントが必要ですか？

回答を見つけるには、これらの記事をご覧ください。

• ビジネスで成功するYouTubeチャンネルを開始する方法
• WordPress向けの最高のYouTube動画ギャラリープラグイン
• ブログとYouTubeチャンネルのどちらを始めるべきか？（初心者ガイド）
• YouTube動画からWordPress投稿を自動作成する方法
• WordPressで動画アナリティクスを追跡する方法（ステップバイステップ）
• WordPressウェブサイト向け動画の最適化方法
• 調査：YouTubeとTikTokの「オンラインでお金を稼ぐ」動画の裏側

この記事が、YouTubeチャンネルの最新動画をWordPressウェブサイトに追加するのに役立ったことを願っています。また、WordPressにFacebook動画を埋め込む方法に関するガイドや、おすすめのWordPressソーシャルメディアプラグインも参照してください。

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