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プレイリストを埋め込む方法(ベストメソッド)

YouTubeプレイリストをウェブサイトに追加することで、訪問者にシームレスな視聴体験を提供し、ユーザーエンゲージメントを高め、SEOを改善することができます。また、チャンネル登録者を増やし、チャンネルを成長させることもできます。

WPBeginnerでは、10年以上にわたってYouTube動画をブログに埋め込んできました。YouTubeの動画やフィードがいかにエンゲージメントを大幅に高めることができるかを、私たちは身をもって体験してきました。

文章よりも動画での説明を好むユーザーもおり、このオプションを提供することで視聴者を増やし、トラフィックを増やすことができました。

この投稿では、WordPressにYouTubeのプレイリストを簡単に埋め込む方法を紹介します。

How to embed a YouTube playlist in WordPress

なぜWordPressにYouTubeプレイリストを埋め込むのか?

コンテンツをより魅力的なものにしたいのであれば、YouTube動画を追加するのは訪問者の注目を集める素晴らしい方法だ。

YouTubeのコンテンツを埋め込むことには多くのメリットがあります:

  • 人々の関心を引きつけ、あなたのサイトでより多くの時間を過ごしてもらうことができる。
  • 動画コンテンツは、高いエンゲージメントと低い直帰率が検索エンジンにポジティブなシグナルを送るため、WordPressのSEOを高めるのに役立ちます。
  • YouTubeチャンネルを宣伝し、購読者を増やすのに役立ちます。

YouTubeのコンテンツをサイトに追加する方法はいくつかあります。YouTubeの個別動画を埋め込んだりYouTubeチャンネルの最新動画を表示したり、あるいは動画ギャラリーを作成することもできます。

では、なぜプレイリストを選ぶのか?

プレイリストを埋め込むことで、動画を個別トピックに集中させることができます。

また、プレイリストを利用することで、訪問者を動画から次の動画へと順番に誘導することができ、訪問者のサイトへの滞在をさらに促進することができます。

それでは、WordPressサイトにYouTubeのプレイリストを埋め込む方法を見てみましょう。

WordPressでYouTubeプレイリストを埋め込む方法

WordPressの初期設定では、プレイリストを埋め込む権限がありません。WordPressにYouTubeのプレイリストを埋め込む最も簡単な方法は、YouTube Feed Pro by SmashBalloonプラグインを使うことです。

YouTubeのための最高のWordPressプラグインであり、あなたのサイトにカスタマイYouTubeフィードを作成するのに役立ちます。YouTubeのプレイリストを追加することができ、多くのカスタマイズ機能を提供しています。

YouTube feeds pro by SmashBalloon

YouTubeの動画を追加すると、プラグインが自動的にプレイリストを更新します。WordPressにYouTubeのライブストリームを埋め込むこともできます。

このチュートリアルでは、YouTube Feed Proのプレミアムバージョンを使用します。無料版もありますので、お試しください。

まず、YouTube Feed Proプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPressダッシュボードからYoutubeフィード ” 設定ページにアクセスし、ライセンスキーを入力してください。

この情報は、Smash Balloonサイトのアカウントから取得できます。

Activate your smash balloon license key

その後、WordPressダッシュボードからYouTubeフィード ” すべてのフィードのページに移動します。

ここから、上部の「新規追加」ボタンをクリックしてフィードの作成を開始します。

フィードタイプの選択」ページが表示され、個別動画、チャンネル全体、ライブストリーム動画などを埋め込むことができます。

プレイリストを埋め込みたいので、’プレイリスト’オプションを設定し、’次へ’ボタンをクリックして進みます。

Select Playlist as feed type

プラグインとチャンネルを接続するために、YouTube API キーをプロバイダーするよう画面に表示されます。

APIキーをお持ちの場合は、それをプロンプトに貼り付けるだけです。

Add YouTube API key

YouTube API キーの作成

YouTubeのAPIキーをお持ちでない場合は、Google Cloud Platformの サイトにアクセスし、Googleアカウントにログインしてください。

その後、上部にある「プロジェクトを選択」ボタンをクリックする。

Click Select Project button

画面上にポップアップが開き、以前に作成したプロジェクトがすべて表示されます。

ここから、右上の「新規プロジェクト」ボタンをクリックします。

Click the New Project button

新しいページが開きますので、プロジェクト名を入力してください。プロジェクト名を簡単に識別できるものであれば何でもかまいません。

次に、ドロップダウンメニューから「組織」とその場所を選択します。組織なし」を選択し、「作成」ボタンをクリックして続行することもできます。

Add YouTube project name

プロジェクトを作成すると、プロジェクトのダッシュボードが表示されます。

ここで、上部メニューの「+ Enable APIs And Services」ボタンをクリックする。

Click on the + ENABLE APIS AND SERVICES button

APIライブラリには、APIを作成してプロジェクトで使用できるさまざまなGoogleサービスが表示されます。

次に、検索ボックスで「YouTube Data API v3」を検索する。

Search for the YouTube data API v3 option

YouTube Data API v3」の結果が表示されたら、それをクリックしてください。

新しい画面が表示されます。ここから「有効化」ボタンをクリックして、YouTube APIキーを有効化する必要があります。

Enable the YouTube API

API/サービスの詳細」ページが表示されます。

ログイン情報が表示されたら、上部にある「Create Credentials」ボタンをクリックします。

Click the Create Credentials button

別のページに移動したら、「公開データ」設定の隣にあるボックスにチェックを入れるだけです。

その後、「Next」ボタンをクリックしてAPIを作成する。

Check the Public data box and click on the Next button

APIキーが作成され、ページに表示されます。

このキーをコピーして「完了」ボタンをクリックするだけです。

Copy the YouTube API key

WordPressのダッシュボードにアクセスして、このAPIキーを貼り付けます。

プレイリストIDを追加するページが表示されます。

このIDは、YouTubeチャンネルにアクセスし、サイトに表示したいプレイリストにアクセスすることで見つけることができます。

URLの’=’マーク以降の文字列がプレイリストIDです。

Find YouTube playlist ID

IDをコピーして、「プレイリストID」設定に入力するだけです。

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

Add the playlist ID

YouTubeプレイリストのカスタマイズと埋め込み

Smash Balloonのフィードエディターが画面に表示され、右側にYouTubeプレイリストのプレビュー、左側にカスタマイザーの設定が表示されます。

ここから、YouTubeフィードの幅、高さ、背景色を編集できます。

フィードのレイアウトを変更できるようになりました。プラグインには、グリッド、ギャラリー、リスト、カルーセルタイプなど複数のレイアウトオプションがあります。

Customize feed layout

また、選択したレイアウトに応じて、追加の設定を行うこともできる。

プラグインには、YouTubeフィードをカスタマイズするためのオプション設定も用意されている。例えば、再生アイコン、タイトル、表示回数、日付など、表示する情報を選択できます。

また、情報テキストの翻訳入力、ヘッダーオプションの編集、Load Moreと購読者ボタンの設定の変更、モデレーションの追加、その他の高度な設定のオプションもあります。

詳しい手順については、WordPressで動画ギャラリーを作成する方法のチュートリアルをご覧ください。

YouTube feed editor

設定が完了したら、上部にある「保存」ボタンをクリックして設定を保存します。

次のステップでは、WordPressのページや投稿にYouTubeプレイリストを表示することができます

まず、新規ページを作成するか、既存のページを編集します。WordPressのコンテンツエディターに入ったら、「ブロックを追加」ボタンをクリックし、「YouTube用フィード」ブロックを追加します。

Add Feed for YouTube block

YouTubeプレイリストがあなたのページに表示されます。

投稿を公開して、YouTubeプレイリストフィードを実際にご覧ください。

YouTube Playlist preview

おまけ:WordPressでYouTube動画をフルスクリーンの背景として追加する

プレイリストの埋め込みとは別に、YouTube動画をサイトのフルスクリーン背景として使用することもできます。そうすることで、ユーザーの注意を即座に引き、サイトを探索するよう促すことができます。

そのためには、Advanced WordPress Backgroundsプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化したら、ブロックエディターに向かい、ページに「Background AWB」ブロックを追加する。

How to add a fullscreen video to a WordPress blog post or page

背景として使いたいYouTube動画のURLを開いてコピーするだけです。

その後、WordPressのページに再度アクセスし、ブロックパネルの「動画URL」フィールドにURLを追加する。

How to customize a YouTube background video in WordPress

その後、「更新」または「公開」ボタンをクリックして設定を保存します。WordPressサイトにアクセスして、フルスクリーンの動画背景を実際に表示してみましょう。

詳しくは、WordPressでYouTube動画をフルスクリーンの背景として追加する方法のチュートリアルをご覧ください。

An example of a YouTube video background in WordPress

動画チュートリアル

文章での説明が苦手な方は、ビデオチュートリアルをご覧ください。

Subscribe to WPBeginner

WordPressにYouTubeのプレイリストを埋め込む方法について、この記事がお役に立てれば幸いです。また、ソーシャルメディアウェブサイトの作り方についての初心者向けガイドや、WordPressにYouTubeの購読ボタンを追加する方法についてのチュートリアルもご覧ください。

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$編集プロセスをご覧ください。

アバター

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

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

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