WordPress 記事内やサイドバーにYouTubeギャラリーを表示 Smash Balloon「YouTube Feed」
※このページ(2ページ目)はこの記事の初回作成時の古い内容です。新しい内容は1ページ目を見て下さい。
インストール・有効化

WordPressのプラグインから新規追加で「Smash Balloon」で検索すると、同じ製作者様のプラグインと一緒に上記のプラグインが出てきます。インストールと有効化は特に説明はしません。プラグインのインストールと有効後、YouTube Feedの設定ページを開きます(WordPressの左側メニューにあります)。
設定
YouTube Feedの設定は同じ製作者様のプラグインである為、Smash Balloon Social Photo Feedと非常に良く似ています。※「YouTube Feed」ではAPI keyでの使用を推奨しています。API keyの場合も以降で記載しています。
1.Configure

初めてYouTubeのギャラリーをプラグインを利用してブログに掲載する場合は、プラグインからYouTubeアカウントに対するアクセス許可を行う必要があります。上記画面で青い「Log in to YouTube~」ボタンをクリックします。

Webブラウザで別ページが開くので、プラグインで表示したいYouTubeチャンネルのアカウントでログインします。プラグイン名が少し異なっていますが・・・。
同じアカウントで別チャンネル(ブランドアカウント)がある場合は、上記の様にさらにチャンネルを選択します。

権限の付与に対してのウィンドウが出るので、許可をクリックします。

さらに確認の表示が出るので、許可をクリックします。

その後は画面が切り替わり、WordPressの設定画面に戻ると思われますが、私の環境(おそらくセキュリティプラグインの影響)では上記の様に表示されてしまいました。

ただし、その画面を閉じて再びYouTube Feedの設定ページを開けば(「1.Configure」のページが残っている場合は、一度「2.Customize」等へ切り替える)、上記の様にYouTubeアカウントが表示されました。矢印のボタンをクリックすると、内容が確認出来ます。
その他の設定について、「Feed Type」は特に変更の必要はありません(入力欄も空のまま)。「Preserve settings when~」はプラグインを削除する際に、設定データを残すかの設定、「Check for new posts」ではプラグインがチャンネルの更新チェックを行う間隔を設定します。さらに「When the page loads」はその下の時間毎にキャッシュは削除されるが、YouTubeからの読み込みはその次にページが開いた時、 「In the background」は時間毎にキャッシュ削除とYouTubeからの読み込みを行います。読み込みは動画のアップロードの頻度にもよりますが、半日や1日毎で十分だと思います。

また同じアカウントの別チャンネル(ブランドチャンネル)を表示させたい場合は、上記「Add another Feed」で表示される内容に従います。結局の所はショートコードで他のチャンネルIDを作成するか、1つのショートコード内に追加して同じギャラリー内にまとめて表示するだけの様ですが、別チャンネルも表示させる場合は、 改めてそのチャンネルに対するアクセス許可が必要かもしれません(※1の画面、私の場合はもう一方に動画は上げていないので不明です)。また現状では別アカウント(ログイン名)となるチャンネルの同時表示は出来ない様です。
以上までを行い「設定を保存」ボタンをクリックします。
ボタンからGoogleへのログイン、アクセス許可が出来ない場合
青い「Log in to YouTube~」ボタンを押しても画面が変わらない等で、Googleへのログインやアクセス許可が出来ない場合、まずは「Log in to YouTube~」ボタンを右クリックして、新しいウィンドウまたはタブで開くとログインやアクセス許可が出来るかもしれません(Smash Balloon Social Photo Feed側で経験あり)。

右クリックでも取得出来なかった場合は、その横にある「Button not working?」のリンクをクリックします。リンクをクリックするとプラグイン製作者様のサイトに移動し、そこでAccess TokenとRefresh Tokenが取得出来ます(上記)。ただし現状ではプラグイン製作者様のページで上記のボタンをクリックしても、プラグイン製作者様のページ内でNot Foundとなってしまい、私の環境では上手く取得出来ませんでした。
また「YouTube API key」を別途Googleにログインして入手し、そのAPI keyを入力する方法もあります。入手方法については先のYotuWPの記事内(2ページ目)で書いているので、そちらを見て下さい。

Access TokenとRefresh Tokenを取得した場合は、「Manually Connect~」ボタンからそれぞれ入力して「Connect This Account」ボタンをクリックします(上記下側の矢印)。
YouTube API keyの場合は「Or,manually enter~」にチェックを入れて、入力欄にAPI keyを入力します(上記上側の矢印)。またAPI keyの場合は「Feed Type」で表示したいチャンネルIDの入力が必要です。チャンネルIDは自分のYouTubeチャンネルページを開き、Webアドレス「youtube.com/channel/*****」の「*****」部分です。別のチャンネルに変更したい場合も手動で入力します。
各項目の入力後は忘れずに「設定を保存」を行って下さい。
2.Customize

次にCustomizeに移動します。色々ありますがそれほど難しい項目はありません。表示するギャラリーの列数、動画数、ヘッダー(アイコン)、Subscribeボタン等に関しての設定を行います。
一番下の「Advanced」で「Local storage process」は、YouTubeから動画(ギャラリー)の読み込みが出来ない場合に、「Background」を選択する事でキャッシュから表示を行う事になっています。「Are you using an AJAX theme?」はWordPressのテーマがAJAXを使用している場合に設定します。
Smash Balloon Social Photo Feedでは有料となるPro版でさらに色々設定が行えますが、現状YouTube Feedでは特にPro版が必要となっている機能は見当たりません。いずれは機能が追加されると思われます。
Customizeでの設定後も「設定を保存」を行って下さい。
3.Display

通常は「2.Customize」の設定まで行ったらショートコードとなる[YouTube-Feed]をテキストで記事内やサイドバーのウィジェットに記載します。「3.Display」ページではショートコードに追記出来るオプションについての記載になっていますが、基本的には各設定項目で行える内容と同等の様子です。
4.Support
「4.Support」のページは特に必要な項目はありません。WordPressにインストールされているプラグインの一覧等が表示されるので、WordPressのプラグインページにあるフォーラムや製作者様とのやり取りで必要になる情報かもしれません。
実際の様子

私のチャンネルをサイドバーに表示させてみると上記の様になりました。レイアウト設定はGridでColumns「2」、動画数「4」です。チャンネルのDescription(説明)は非表示にしていますが、ヘッダーやSubscribeボタンも表示出来るので、YouTube Feedであれば先の別プラグインも不要になります。また動画の題名はカーソールをサムネイル上に持って行くと表示されました(左上)。希望としては題名は動画下に表示したいのですが、その様な機能は現状無い様子です。

上記はSmash Balloon Social Photo FeedによるInstagramですが、やはり同じ製作者様のプラグインなので統一感があります。
ただし残念な事に私の環境では動画をクリックするとホップアップはされるのですが、動画が表示されませんでした(chromeブラウザ)。動画が再生されないので現状では実際の利用には至っておらず、まだYotuWPを使用しています。→動画再生についてはプラグインの更新があり、再生される様になりました。ただやはりサムネイル下に題名表示が欲しいので保留中。

















