Your Channel | Youtubeチャンネルを埋め込むWordPressプラグイン

日本で馴染みのあるメディアとなった動画共有サイトYoutubeですが、自分のチャンネルを登録しているクリエイターやユーチューバーなら、自分をPRするウェブサイトにチャンネルを埋め込みたいと思った事は無いでしょうか？
WordPressならプラグインで簡単に自分のチャンネルを埋め込む事が可能ですので、今回は導入や設定方法をご紹介します。

WordPressサイトにYoutubeチャンネルを埋め込む！その方法とは？

ホームページに自分のYoutubeチャンネルを埋め込みして手間をかけずに新着動画を表示させたいなんて事は思った事はないでしょうか？
WordPressならプラグインを無料でインストールするだけで、新着順にアップロード動画を表示して、さらに自動更新までしてくれる優れものなのです。その方法とは？

WordPress用プラグイン Your Channel

このウェブサイトとは別のPR用ウェブサイトに埋め込んだYoutubeチャンネルですが、新しく投稿した順番に表示してクリックするだけで動画再生もできる素晴らしい機能なのです。
私もそうですが、CSSとかHTMLとかよくわからなくて埋め込み方を知らないという人でも一発で表示する事ができるようになりますので、このプラグインのインストール方法を解説します。

Your Channelのインストール方法

今回インストールするのは、WPプラグインのYour Channelです。
WPの管理画面にあるプラグイン→新規追加の項目でYour Channelと検索するか、こちらのページからプラグインをダウンロードしてください。
念のため類似のプラグインは無いと思いますが、作者がPlugin Buildersとなっているのがそうです。

WordPressプラグインページで検索したなら、Your Channelの項目にある今すぐインストールをクリックして有効にします。
プラグインをダウンロードした場合は、プラグインのアップロードという項目でダウンロードした圧縮ファイルごとインストールして有効にして下さい。

初期設定に必要な YouTube Data API v3 Keyを取得する

API Keyを取得するには、自身のGoogleアカウントでログインをしてからGoogle API Consoleのページにアクセスして下さい。

プロジェクト名はデフォルトか任意の名前で構いませんので、作成をクリックして先に進みます。

左上のナビゲーションメニューからAPIとサービスにカーソルを動かして、次の項目のライブラリをクリックすると上の項目が表示されます。
隠れていて見えないのですが、Youtube Data API v3という項目が今回使用するAPI Keyの発行場所ですので、ここをクリックして先に進みます。

YouTube Data API v3を選択したら、このような画面に切り替わりますので、認証情報を作成をクリックして先に進みます。

プロジェクトへの認証情報の追加を設定します。
使用するAPIは、Youtube Data API v3を選択、APIを呼び出す場所はウェブブラウザ(Javascript)、アクセスするデータの種類では一般公開データを選択します。
上の項目に入力が終わったら、必要な認証情報をクリックします。

次のページで表示される、APIキーのボックスの中にある文字列をテキストドキュメントなど、忘れない場所にコピーしておきましょう。忘れなければどこでもいいです。
ドラクエの復活の呪文みたいに手書きでも可。
このキーが今回使用するYour Channelプラグインの設定で使用するキーです。

Your Channelの設定

WordPressの管理画面にある設定の項目にあるYourChannelをクリックして、WordPressサイトに表示するために必要となる初期設定を行います。

Your Channelの初期設定

先程、Google API ConsoleのYouTube Data API v3で取得したAPI Keyを、YourChannelのAPI Keyの項目にコピペまたは入力します。

Youtubeの項目には、表示したいユーチューブチャンネルのユーザー名かチャンネルIDを入力します。

YoutubeチャンネルIDの確認と入力

Youtubeのインターフェースは複雑すぎて似たような項目が沢山あってわかりにくいと思いませんか？
設定についても一か所ではなく、何か所も存在するので少しコンパクトにまとめて欲しい所・・。
今回設定するYoutubeチャンネルIDは、Youtubeトップ画面で右上のアカウントアイコンをクリックした後に、設定をクリックします。そこで表示される詳細設定から次の画面に入るとチャンネルIDをコピペまたは入力します。
ユーザーIDではないので間違えないように。

その他の設定項目

Cache Refresh
取得したYoutubeチャンネルを更新する時間です。初期設定は180分になっていますがアップロード頻度に合わせて時間を調整しましょう。

Show
何を表示するかの設定項目なので、デフォルトでは新着動画・再生リスト・チャンネルのバナーを表示しています。 不要な項目があればチェックを外しましょう。

Video missing
表示する動画をアップロードしていない場合にチェックを入れます。

Videos per load
1ページに表示する動画の数を指定します。数を多くしすぎるとページが重くなってしまうので、サーバーに負荷がかかりすぎない程度に増減しましょう。私は24に設定しています。

Max Videos
取得する動画数の上限を設定します。無制限の場合は空欄で、制限したい場合は表示したい数だけ入力しましょう。初期状態では500になっていますが、ここまで見てくれる人はいないと思うのでそのままでもOK!

Your ChannelのStyle設定

Your Channelにはもう一つ設定項目があります。
動画リストをどうやって表示するかの設定なのですが、WordPressの表示幅で変動してしまうので、どんな感じで表示されるかチェックしながら設定した方が無難でしょう。
YourChannelの設定画面でも、プレビューが表示されていますがほとんどと言っていいほどアテになりません。

Video Theme

Style 
グリッド表示かリスト表示かを選択できます。

Thumb size
サムネイルのサイズの大きさです

Meta
動画のタイトルを表示するかしないかの設定です。
Noneで非表示になりますが、分かりやすいように入れておいた方が良いでしょう。

Show Description
動画の説明文を表示する設定です。最大限に表示されてしまうので、ごちゃごちゃしたのが嫌いなのであればチェックを入れない方が良いでしょう。

Gutter
動画と動画の間の幅を指定できます。

Play icon
サムネイルにPlayアイコンを表示するかしないか設定できます。

Sticky Player
動画を再生中に画面をスクロールした時の設定項目です。スクロールした時も追従して再生したい時はEnableにチェックを入れましょう。

Title
タイトルを表示する時の設定です。1行だけに表示したい時はSingle lineにチェックを入れましょう。

Saveをクリックして設定は終わりです！

Your Channelの設定トップ画面に、ショートコードが生成されますので表示したいページにショートコードを埋め込みます。

Your Channelの埋め込み方法

私はWord Pressテーマ Affinger5を使用しているので、簡単に設定ができる別サイトのトップページに埋め込んでいます。
Your Channelで生成したショートコード、[Yourchannel user=”〇〇”]を記事などに入力して完成です。

デザインがたまに崩れたりしますが、割と目的通りの表示が出来たのではないかと思います！
こんなプラグインがあればいいなと思っていたのですが、探せばあるものですね！