YouTubeチャンネルページをWordPressサイトに埋め込みたいという、話がありましてちょっと探してみました。[ YourChannel ] というプラグインが便利そうだったので、備忘録としてまとめてみました。YouTubeチャンネルページへ直接リンクする方法もあるかと思いますが、今回はページに埋め込み、YouTubeチャンネルページを更新すれば、自動的に埋め込まれた内容も更新されるという要望でした。
プラグインのインストールと有効化
下記リンクページはJetpackをインストールし有効化するまでの手順を記載したページです。
「Jetpack」を「 YourChannel 」と置き換えてプラグインのインストールをしてください。
WordPressプラグインインストールの超基本手順について
YourChannelの設定
[ YourChannel ] のインストールと有効化が完了したら、設定を行います。まずWordPress管理画面の左メニュー [ 設定 ] → [ YourChannel ] をクリックしてください。
[YourChannel] の設定画面が開きます。設定のサンプルがありますので、[ Edit ] で設定を行います。
設定画面を開くと、下図のような画面が開きます。最低限設定が必要な項目は [ API Key ] と [ YouTube ] の [ Channel ID ] の部分です。次の項目で [ API Key ] の作成手順を記載します。
API Key作成について
API Keyを作成するには、Googleアカウントにログイン後、Google API Consoleのページにアクセスし、「新しいプロジェクト」を作成します。プロジェクト名は任意のものでかまいません。自分で管理しやすい名前を付けてください。プロジェクト名を入力したら [ 作成 ] ボタンをクリックしてプロジェクトを作成してください。
プロジェクトを作成したら、下図矢印部分のプルダウンメニューから、今回作成したプロジェクトを選択してください。既に選択されている場合はそのままで構いません。
作成したAPIのダッシュボードを開いたら、[ APIの概要に移動 ] のリンクをクリックしてください。
[ APIの概要に移動 ] にアクセスすると [ APIとサービス ] 画面がひらきますので、左メニューの [ ライブラリ ] をクリックしてください。
[ ライブラリ ] を開くと、[ YouTube Data API v3 ] という項目を探してクリックしてください。
[ YouTube Data API v3 ] を開いたら、APIを有効にしてください。
APIを有効化すると、「認証が必要になる可能性があります。」とアラートが表示されるので、[ 認証情報を作成 ] をクリックしてください。
「プロジェクトへの認証情報の追加」の画面が表示されるので、[ APIを呼び出す場所 ] の設定を [ ウェブブラウザ(Javascript) ] を選択し設定を保存してください。
設定を保存すると [ APIキーを作成しました ] とウインドウが開きますので、API Keyをコピーしてください。
API Keyを取得したら、YourChannelの設定画面に戻り、[ API Key ] の設定項目に、 先ほどコピーしたAPI Keyを貼り付けてください。
YouTubeチャンネルのChannel ID 確認手順
YouTubeチャンネルのChannel ID 確認手順はまず、Googleアカウントにログインし、該当のチャンネルページを開きます。右上のアイコン(①部分)部分をクリックしてプルダウンを表示し、設定(②部分)をクリックしてください。
設定を開くと下図のような画面が開きます。詳細設定(下図①部分)をクリックしてください。アカウント情報の部分にChannel IDが表示されていますのでコピーしてください。
[ YouTube ] の [ Channel ID ] 部分に先ほどコピーしたChannel IDを貼り付けてください。その後 [ Check ] ボタンをクリックすると、Usernameが入力されます。
ここまでの設定が完了したら、とりあえず設定を保存します。
ショートコードの取得と固定ページへの貼り付け
設定を保存すると、下図のような画面になり、ショートコードが発行されます。Shortcodeの[yourchannel user="✕✕✕✕✕✕✕✕✕✕✕"]
部分をコピーします。
※注意:userの中は設定したチャンネルのUsernameが入ります。
固定ページの編集画面に移動し、任意の箇所に先ほどのショートコードを貼り付けます。
これで、固定ページを保存すれば、固定ページにYouTubeチャンネルを埋め込んだページが作成されます。
その他設定について
プラグイン YourChannel にはその他にも、設定項目があります。必要に応じて設定してみましょう。
Cache Refresh
取得したYoutubeチャンネルページのキャッシュをリフレッシュするまでの時間を設定します。初期設定は180分になっています。動画の更新頻度によって時間を設定してください。
Show
Videos、Playlists、Bannerの項目があり、各項目チェックを入れると表示します。Videosはチャンネルに登録している動画の一覧を表示します。PlaylistsはYoutubeチャンネルで作成したプレイリストを表示します。BannerはYoutubeチャンネルのヘッダー画像を表示するかどうかの設定です。
Style
この項目は次の項目で詳細を記載します。
Videos missing
動画が無い場合のみチェックを入れます。
Videos per load
1ページあたり表示する動画の数を指定します。
Max Videos
取得する動画数の上限を指定します。無制限の場合は空欄にします。
Styleの設定について
Style
グリット表示かリスト表示かを指定できます。
Thumb size
サムネイルのサイズを大きいか小さいかで指定できます。
Meta
動画のMeta情報をどの位置に表示するかを指定できます。
Show Description
動画の説明を表示するかどうかを指定できます。
Gutter
動画と動画の間の幅を指定できます。
Play icon
動画サムネイルにPlayアイコン表示の仕方を指定できます。
Sticky Player
動画再生時に画面をスクロールしても、動画部分のみを追従して表示させるかどうかの指定ができます。
まとめ
YourChannelの設定は、[ YouTube Data API v3 ] 取得の部分が少し難しいかもしれませんが、そこさえクリアできれば、簡単にYouTubeチャンネルをWordPressサイトに埋め込むことができます。もし、このような需要があればご活用ください。