Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトでYouTubeチャンネルの最新動画を表示したいですか?

YouTubeの動画はサイトのコンテンツとして最適ですが、新しい動画を手動で埋め込むのは時間と手間がかかります。その代わりに、YouTubeに新しい動画を投稿するたびに自動的に更新されるフィードを作成することをお勧めします。

この投稿では、WordPressでYouTubeチャンネルの最新動画を自動的に表示する方法を紹介します。

How to show latest videos from YouTube channel in WordPress

なぜWordPressでYouTubeチャンネルの動画を表示するのか?

WordPressサイトに加えてYouTubeチャンネルを運営しているのであれば、サイトにも動画を投稿することは理にかなっている。

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

YouTube動画を埋め込むことで、サイトへの訪問者を増やすこともできます。実際、私たちのブログ統計の究極のリストによると、動画付きのブログ投稿は、そうでないものに比べて83%以上のトラフィックを獲得しています。

サイトに少数の動画を追加するだけなら、WordPressブログ投稿にYouTube動画を埋め込むのは簡単だ。ただし、動画を追加するたびに手作業で追加する必要があり、時間と手間がかかります。

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

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

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

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

Showing the latest videos from your YouTube channel in WordPress

このチュートリアルでは、プラグインのPro版と無料版のどちらでも使用できます。

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

有効化したら、YouTube Feed ” Settingsに向かい、’Add Source’をクリックします。

Adding a YouTube channel to your WordPress website

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

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

How to connect Smash Balloon to a WordPress website

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

このまま進んで構わないとして、『続ける』をクリックする。

Connecting YouTube to WordPress

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

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

Getting your YouTube channel ID or username

ブラウザーのアドレスバーを見てください。user/」の後にテキストがあれば、それがあなたのチャンネル・ユーザー名です。

channel/」の後に数字とアルファベットの文字列が続く場合、次の画像にあるように、これがチャンネルIDである。

How to get your YouTube channel username or ID

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

そうしたら、「次へ」ボタンをクリックする。

Adding the YouTube channel ID or username to Smash Balloon

ステップ 2: Google ConsoleでYouTube APIキーを作成する

この時点で、以下のメッセージが表示されます:APIキーが入力されていません。

A YouTube error message, in the WordPress dashboard

混乱を避けるために、YouTube APIキーを作成し、WordPressブログやサイトに追加することをお勧めします。

新しいタブでGoogle Consoleにアクセスし、Googleアカウントでログインします。

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

The Google Cloud Console

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

それが終わったら、『新規プロジェクト』をクリックする。

Creating a new project in the Google Console

プロジェクトの名前を入力します。これは参考用なので、好きなものを使ってください。

それができたら、『作成』をクリックする。

ここで、「検索」アイコンをクリックし、「YouTube Data API」と入力する。Marketplace’でYouTube Data APIを見つけてクリックする。

Enabling the YouTube Data API

YouTube APIリクエストを行うためのキーを有効化する画面に移動します。

有効化』ボタンをクリックするだけです。

How to enable the YouTube Data API

左側のメニューで「ログイン情報」をクリックする。

それが完了したら、「Create Credentials」を選択します。

How to create a YouTube API in the Google Cloud Console

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

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

Creating a YouTube API key for your WordPress website

初期設定では、YouTube APIキーは無制限です。他の人にAPIキーを使わせないようにするには、ポップアップ内の「APIキーを編集」リンクをクリックして、APIキーを制限するのが賢明です。

Google APIキーがすべて表示された画面が開きます。先ほど作成したキーを見つけてクリックするだけです。

Editing an API key in the Google Cloud Console

注:誤ってポップアップを閉じてしまっても、慌てないでください。左側のメニューから’ログイン情報’を選択すれば、同じ画面にアクセスできます。同様に、APIキーを記録していない場合は、’キーを表示’をクリックするだけで、ログイン情報が表示されます。

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

Restricting the YouTube API access to specific websites

サイトの制限」で「追加」をクリックします。

サイトのアドレスを入力し、「完了」をクリックします。

How to add a HTTP referrer in the Google Cloud Console

Smash BalloonにAPIへのアクセス権を与えるには、www.googleapis.com と入力して「完了」をクリックする必要もある。

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

How to create a YouTube API key with restricted access

それが完了したら、’Select APIs’ ドロップダウンメニューをクリックし、’YouTube Data API’ の隣のボックスにチェックを入れる。

その後、『OK』をクリックする。

Creating a secure and restricted YouTube API key

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

これで、WordPressサイトにAPIキーを追加する準備ができました。WordPressのダッシュボードで、YouTube Feed ” Settingsに進みます。

最後に、「API Key」フィールドにキーを貼り付け、「Add」をクリックする。

Fetch YouTube data using an API key

ステップ 3: YouTubeチャンネルフィードの作成とカスタマイズ

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

YouTube Feed ” All Feedsにアクセスし、’Add New’をクリックするだけです。

How to create a YouTube video feed

YouTube Feed Proを使えば、YouTubeの個別の動画、プレイリスト、ライブストリームなどを埋め込むことができます。複数のソーシャルプラットフォームからの投稿を組み合わせてソーシャルウォールを作成することもできます。例えば、Facebookのステータス投稿を埋め込んだりInstagramの写真を追加したりできます。

無料のプラグインを使用しているので、単に「チャンネル」をクリックし、「次へ」を選択する。

Create a feed showing latest YouTube channel videos

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

左側には、YouTube動画の見え方を微調整するためのさまざまな設定がすべて表示されます。

Customizing the latest YouTube video feed in WordPress

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

設定を変更すると、ライブプレビューが自動的に更新されるので、さまざまな設定を試して、サイトに最適な設定を確認することができます。

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

Changing the YouTube channel feed layout using Smash Balloon

選択したレイアウトによっては、いくつかの追加設定にアクセスできる。

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

Switching between different layouts for the YouTube channel feed

調査によると、消費者の90%がモバイル端末で動画を視聴し、70%の人がスマートフォンやタブレットを使ってYouTubeを閲覧しています。このことを念頭に置いて、あなたの最新の動画がデスクトップと同じようにモバイルでもよく見えるようにしたいと思うでしょう。

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

Previewing the YouTube channel feed on smartphone and tablet

WordPressサイトのモバイル版をテストした後、スマートフォンやタブレットで表示する動画の数を変更したくなるかもしれません。こうすることで、YouTubeの動画がより小さなタブレットやスマートフォンの画面に快適に収まるようになります。

初期設定では、Smash Balloonはモバイル端末とデスクトップコンピューターで異なるカラム数を表示します。初期設定を変更するには、「カラム」セクションに新しい数字を入力してください。

Showing a different number of columns on mobile devices

これで、次の設定画面である「配色」を探索する準備ができた。

初期設定では、YouTubeフィードはWordPressテーマと同じ配色を使用しています。ただし、動画フィードの配色を「ライト」または「ダーク」にすることもできます。

カスタム」を選択し、設定を使ってリンクの色やテキストの色、背景色の変更などを行うことで、独自の配色を作ることもできる。

Creating a custom color scheme for your YouTube channel feed in WordPress

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

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

Adding a header to your YouTube channel feed

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

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

Choosing different header styles for your YouTube channel feed

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

各YouTube動画の初期設定、マウスオーバー時、動画再生時の見え方を微調整できる画面が表示されます。

The Smash Balloon YouTube video editor settings

個別要素の編集」をクリックすると、「再生」アイコンの表示・非表示を選択できる。

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

Adding and hiding the YouTube play icon

変更が完了したら、「動画」リンクをクリックしてください。

これで前の画面に戻り、「マウスオーバー状態」を選択できる。

Customizing a YouTube video's hover state

ここでは、訪問者がマウスオーバーしたときに動画のタイトルを表示するかどうかを選択できます。

タイトルは有益な情報を提供し、訪問者に動画の再生を促すことができます。その点を考慮し、「動画タイトル」の隣にあるボックスにチェックを入れるとよいでしょう。

Adding a title to the latest YouTube videos in WordPress

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

動画プレーヤーのエクスペリエンス」をクリックすると、プレーヤーの動作や見た目を変更できます。

Customizing the YouTube lightbox experience

ここでは、プレーヤーの縦横比を変更したり、動画の再生を自動的に開始するか、訪問者が再生ボタンをクリックするまで待機するかを選択できます。

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

Smash Balloon's lightbox settings

ここで、左側のメニューから「Load More Button」を選択する。

訪問者は「Load More」ボタンを使ってYouTube動画をもっと見ることができます。これにより、サイト訪問者をより長く滞在させることができ、同時にYouTubeチャンネルのエンゲージメントと表示数を増やすことができます。

このことを念頭に置いて、背景色、マウスオーバーの状態、テキストの色を変更することで、「Load More」ボタンを目立たせることができます。

Customizing the YouTube 'Load More' button in WordPress

このボタンは初期設定では’Load More…’と表示されますが、’Text’フィールドに入力することで、これをユニークなコールトゥアクションに置き換えることができます。

初期設定では、Smash Balloonは最近のYouTube動画の下に「購読者」ボタンを表示します。

これは、訪問者があなたのYouTubeチャンネルに参加することを促します。より多くの購読者を獲得するために、Smash Balloonのメイン設定画面から「購読ボタン」を選択してボタンをカスタマイズすることもできます。

How to encourage people to subscribe to your YouTube channel

この画面では、「有効化」をクリックすることで、「購読者」ボタンを追加・削除することができます。

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

Customizing the subscribe button for your YouTube channel feed

初期設定では、このボタンは「購読者」コールトゥアクションを表示します。

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

Adding custom messaging to your YouTube channel feed

動画フィードの見た目に満足したら、「保存」をクリックして変更を保存するのを忘れないでください。これでWordPressサイトに最新のYouTube動画を追加する準備が整いました。

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

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

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

コードを取得するには、YouTube Feed “ All Feedsに 行き、’Shortcode’の下にあるテキストをコピーしてください。

以下の例では、youtube-feed feed=2を使う必要がある。

Adding the latest videos to your website using a block or widget

ページや投稿日に最新の動画を表示したい場合は、「Feed for YouTube」ブロックを使用することをお勧めします。

YouTube動画を表示したいページや投稿を開くだけです。次に、「+ブロックを追加」アイコンをクリックして新しいブロックを追加し、「YouTube用フィード」と入力し始めます。

適切なブロックが表示されたら、クリックしてページや投稿に追加する。

Adding the latest YouTube videos to a WordPress block

ブロックは初期設定でYouTubeフィードの1つを表示します。別のフィードを使いたい場合は、右側のメニューから「ショートコードの設定」を見つけてください。

このボックスにショートコードを追加することができます。ショートコードを追加したら、「変更を適用」ボタンをクリックしてください。

Adding the latest videos from your YouTube channel to WordPress

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

ブロックが有効化されたテーマを使っている場合、フルサイトエディターを使ってサイト上の任意の場所にYouTube用フィードブロックを追加することができます。手順は上で説明したものとほとんど同じで、ブロックを追加するテンプレートやパターンを知っておく必要があるだけです。

詳しくはWordPressフルサイト編集ガイドをご覧ください。

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

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

Adding a Feeds for YouTube block to your WordPress theme

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

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

Showing the latest YouTube videos using a block

初期設定では、Feeds for YouTubeを使って作成したフィードのいずれかがウィジェットに表示されます。

代わりに別のフィードを表示するには、そのフィードのコードを「ショートコード設定」ボックスにタイプしてください。そして、「変更を適用」をクリックする。

Showing the latest videos from your YouTube channel using Smash Balloon

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

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

もう一つのオプションは、ショートコードを使用して、任意のページ、投稿日、またはウィジェット対応エリアに最新の動画を埋め込むことです。適切なショートコードを取得するには、YouTube Feed “ All Feedsにアクセスし、’Shortcode’カラムの値をコピーするだけです。

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

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

WordPressサイトでのYouTube動画の表示についてさらに詳しく知りたいですか?または、YouTubeチャンネルを運営するためのヒントが必要ですか?

これらの投稿をチェックして答えを見つけよう:

この投稿が、あなたのWordPressサイトにYouTubeチャンネルの最新動画を追加するのにお役に立てば幸いです。WordPress に Facebook 動画を埋め込む方法や、専門家が選ぶ最高のソーシャルメディア・プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

13件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    I think this method will help both the website and the y
    Youtube channel aswell. But I have not heard you mention, does this Improve my website SEO?

    • WPBeginner Support says

      It would normally be an indirect increase to your SEO, your visitors would learn about your YouTube channel through the latest videos feed and your channel would grow then if you mention your site in your videos you can grow your audience that way.

      管理者

  3. joan says

    brilliant, thanks so much for these clear instructions…i was searching everywhere for an answer.

  4. Marika says

    Hello! I really like this plugin.. But I am wondering if it is possible to get all my user videos on page? Now there are visible only 9 of them…

  5. Ramesh Joshi says

    Its fantastic and easy way to learn. Thanks a lot to provide a good method to know more about wordpress.

  6. Nancy Seeger says

    This looks great. Any idea is this works with WordPress 3.8? On wordpress.org it shows it is compatible up to 3.5.2 and no one has commented yet if it works with 3.8.

返信を残す

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