YourChannel
YourChannel

YouTubeチャンネルページをWordPressページに埋め込めるプラグイン「YourChannel」

YouTubeチャンネルページをWordPressサイトに埋め込みたいという、話がありましてちょっと探してみました。[ YourChannel ] というプラグインが便利そうだったので、備忘録としてまとめてみました。YouTubeチャンネルページへ直接リンクする方法もあるかと思いますが、今回はページに埋め込み、YouTubeチャンネルページを更新すれば、自動的に埋め込まれた内容も更新されるという要望でした。

プラグインのインストールと有効化

下記リンクページはJetpackをインストールし有効化するまでの手順を記載したページです。
[ Jetpack ] を [ YourChannel ] と置き換えてプラグインのインストールをしてください。

YourChannelの設定

[ YourChannel ] のインストールと有効化が完了したら、設定を行います。まずWordPress管理画面の左メニュー [ 設定 ] → [ YourChannel ] をクリックしてください。

設定

[YourChannel] の設定画面が開きます。設定のサンプルがありますので、[ Edit ] で設定を行います。

YourChannelダッシュボード

設定画面を開くと、下図のような画面が開きます。最低限設定が必要な項目は [ API Key ] と [ YouTube ] の [ Channel ID ] の部分です。次の項目で [ API Key ] の作成手順を記載します。

YourChannel 詳細設定

API Key作成について

API Keyを作成するには、Googleアカウントにログイン後、Google API Consoleのページにアクセスし、「新しいプロジェクト」を作成します。プロジェクト名は任意のものでかまいません。自分で管理しやすい名前を付けてください。プロジェクト名を入力したら [ 作成 ] ボタンをクリックしてプロジェクトを作成してください。 

新しいプロジェクト作成

プロジェクトを作成したら、下図矢印部分のプルダウンメニューから、今回作成したプロジェクトを選択してください。既に選択されている場合はそのままで構いません。

API選択プルダウン

作成したAPIのダッシュボードを開いたら、[ APIの概要に移動 ] のリンクをクリックしてください。

APIの概要に移動

[ APIの概要に移動 ] にアクセスすると [ APIとサービス ] 画面がひらきますので、左メニューの [ ライブラリ ] をクリックしてください。

APIライブラリ

[ ライブラリ ] を開くと、[ YouTube Data API v3 ] という項目を探してクリックしてください。

YouTube Data API v3

[ YouTube Data API v3 ] を開いたら、APIを有効にしてください。

API有効化

APIを有効化すると、「認証が必要になる可能性があります。」とアラートが表示されるので、[ 認証情報を作成 ] をクリックしてください。

認証情報を作成

「プロジェクトへの認証情報の追加」の画面が表示されるので、[ APIを呼び出す場所 ] の設定を [ ウェブブラウザ(Javascript) ] を選択し設定を保存してください。

プロジェクトへの認証情報の追加

設定を保存すると [ APIキーを作成しました ] とウインドウが開きますので、API Keyをコピーしてください。

API Key 作成

API Keyを取得したら、YourChannelの設定画面に戻り、[ API Key ] の設定項目に、 先ほどコピーしたAPI Keyを貼り付けてください。

API Key 設定項目

YouTubeチャンネルのChannel ID 確認手順

YouTubeチャンネルのChannel ID 確認手順はまず、Googleアカウントにログインし、該当のチャンネルページを開きます。右上のアイコン(①部分)部分をクリックしてプルダウンを表示し、設定(②部分)をクリックしてください。

YouTubeチャンネル

設定を開くと下図のような画面が開きます。詳細設定(下図①部分)をクリックしてください。アカウント情報の部分にChannel IDが表示されていますのでコピーしてください。

Channel ID 表示

[ YouTube ] の [ Channel ID ] 部分に先ほどコピーしたChannel IDを貼り付けてください。その後 [ Check ] ボタンをクリックすると、Usernameが入力されます。

Channel ID 貼り付け

ここまでの設定が完了したら、とりあえず設定を保存します。

ショートコードの取得と固定ページへの貼り付け

設定を保存すると、下図のような画面になり、ショートコードが発行されます。Shortcodeの[yourchannel user="✕✕✕✕✕✕✕✕✕✕✕"]部分をコピーします。
※注意:userの中は設定したチャンネルのUsernameが入ります。

ショートコード発行

固定ページの編集画面に移動し、任意の箇所に先ほどのショートコードを貼り付けます。

ショートコード貼り付け

これで、固定ページを保存すれば、固定ページにYouTubeチャンネルを埋め込んだページが作成されます。

その他設定について

プラグイン YourChannel にはその他にも、設定項目があります。必要に応じて設定してみましょう。

YourChannel 詳細設定

Cache Refresh
取得したYoutubeチャンネルページのキャッシュをリフレッシュするまでの時間を設定します。初期設定は180分になっています。動画の更新頻度によって時間を設定してください。

Show
Videos、Playlists、Bannerの項目があり、各項目チェックを入れると表示します。Videosはチャンネルに登録している動画の一覧を表示します。PlaylistsはYoutubeチャンネルで作成したプレイリストを表示します。BannerはYoutubeチャンネルのヘッダー画像を表示するかどうかの設定です。

Style
この項目は次の項目で詳細を記載します。

Videos missing
動画が無い場合のみチェックを入れます。

Videos per load
1ページあたり表示する動画の数を指定します。

Max Videos
取得する動画数の上限を指定します。無制限の場合は空欄にします。

Styleの設定について

Show options

Style
グリット表示かリスト表示かを指定できます。

Thumb size
サムネイルのサイズを大きいか小さいかで指定できます。

Meta
動画のMeta情報をどの位置に表示するかを指定できます。

Show Description
動画の説明を表示するかどうかを指定できます。

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

Play icon
動画サムネイルにPlayアイコン表示の仕方を指定できます。

Sticky Player
動画再生時に画面をスクロールしても、動画部分のみを追従して表示させるかどうかの指定ができます。

まとめ

YourChannelの設定は、[ YouTube Data API v3 ] 取得の部分が少し難しいかもしれませんが、そこさえクリアできれば、簡単にYouTubeチャンネルをWordPressサイトに埋め込むことができます。もし、このような需要があればご活用ください。


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利!
タグ :