当サイトは広告が表示されます。

WordPress　記事内やサイドバーにYouTubeギャラリーを表示　Smash Balloon「YouTube Feed」

2019年12月12日プラグイン

このブログのサイドバー（スマホの場合はメニュー、または下部に表示される「サイドバー」アイコンより）にYouTubeに上げている動画や、現在では全く更新していないInstagramをギャラリー表示しています。それぞれ異なるWordPressのプラグインを利用していますが、YouTube用にはInstagramのプラグインと同じ製作者様によるプラグインで、「YouTube Feed」があります。

スポンサーリンク

現在利用中のYouTube用プラグイン「YotuWP」

ただし、実際に現在利用しているYouTubeギャラリーの表示プラグインは「YotuWP」という物で、さらにそれまでは「Youtube Channel Gallery」というプラグインを利用していました。しかし2019年3月時点でYoutube Channel Galleryは3年間更新されない状況だったのでYotuWPに乗り換えました。

YotuWPは最初の設置時に少し細かい手を入れる必要がありましたが、設置して以降は特に問題は起きていません。もう少し整えたい所もありますが、とりあえずギャラリー表示が可能となれば良いのであまり特別な事はせず、プラグイン自体も簡単であえて機能の少ない「YotuWP」を使用しています。※2024年5月現在、私の環境ではキャッシュ設定に問題あり。詳細は上記記事にて。

YouTubeギャラリーの上に表示しているアイコンと「Subscribe」ボタンは別のプラグインになっています。残念ながらYotuWPにはこれらを一緒に表示する機能が無いので、下記のプラグインを別途利用しています。

なおYouTube Feedを使用していない理由は、動画の下部に動画タイトルを表示したい為で、YotuWPでは可能ですが、YouTube FeedではPCでカーソールを動画サムネイルに合わせた時のみに表示されます。

Smash Balloon 「Instagram Feed」

Instagramの表示で利用しているプラグインは「Instagram Feed」という名称です。YouTube Feedと同じ製作者様が出しているので、ブログで表示される様子や設定画面等もよく似ています。

同じ製作者様のプラグインにはその他に、FacebookやTikTok用などもあります。

Smash Balloon 「YouTube Feed」

※以前まで「YouTube Feed」は「Feeds for YouTube」という名称でした。公式サイトの一部やWordpress上のプラグイン名称も、いまだに「Feeds for YouTube」だったりしますが…。

ここから今回のYouTube Feedについてです。WordPressでのプラグインページは上記です。またYouTube Feedには有料の「Pro版」となる機能も多くありますが、ここでは無料で利用出来る機能についてのみ記載します。

インストール・有効化

WordPressのプラグインから新規追加で「YouTube」で検索すると、上記のプラグインが出てきます。インストールと有効化の方法は特に記載しません。プラグインのインストールと有効後、YouTube Feedの設定ページを開きます（WordPressの左側メニューに表示されます）。

設定

YouTube Feedの設定は同じ製作者様のプラグインである為、Instagram Feedと非常に良く似ています。以下より、新規にYouTubeギャラリーを作成していきます。

１.YouTubeにYouTube Feedからのアクセスを許可する

初めてプラグインを利用する場合は、プラグインからYouTubeアカウントに対するアクセス許可を行う必要があります。上記画面の「All Feeds」から「Add New」ボタンをクリックします。※上記では既に1つ、設定済みの内容（Feed）が表示されています。

ギャラリーとして表示させたいYouTubeの内容を選択しますが、無料版の場合は「Channel」しか選択できません。選択後「Next」をクリックします。

※１

表示させたいYouTubeチャンネルのIDかユーザーネームを入力（赤枠内）して、「Connect」ボタンをクリックします。

Webブラウザで上記のページ（WordPressとは別ページ）が開くので、「Connect to YouTube～」をクリックします。※YouTube FeedではAPIキーによる接続を推奨しています。APIキーに付いては後述。

YouTubeへのログインページが表示されます。表示させたいYouTubeチャンネルのアカウントでログインします。

同一アカウントでブランドアカウント（サブチャンネル）がある場合は、さらに選択が続きます。

YouTubeにYouTube Feedからのアクセスを許可する確認画面が表示されます（プラグイン名が異なっていますが…）。「続行」をクリックします。※上記では既に許可済みである事が表示されています。

その後は画面が切り替わり、YouTube Feedの設定画面に戻ると思われますが、私の環境（おそらくセキュリティプラグインの影響）では上記の様に表示されてしまいました。その場合は手動（以下の方法）で設定を行います。

「続行」ボタンからアクセス許可が出来ない場合

「続行」ボタンを押しても画面が変わらない等でアクセス許可が出来ない場合、まずは「続行」ボタンを右クリックして、新しいウィンドウまたはタブで開くとアクセス許可が出来るかもしれません（Instagram Feed側で経験あり）。

（※２）

右クリックでも取得出来なかった場合は、先（※１）の画面から「Cannot Connect？」のリンクをクリックします。リンクをクリックすると「アクセストークン」の入力ウィンドウが表示されるので、その中の「here」リンクをクリックします。

「here」リンクをクリックするとプラグイン製作者様のサイト（WordPressとは別ページ）が開き、そこでアクセストークンが取得出来ます。アクセストークンをコピーして、先の入力ウィンドウ（※２）の項目にペーストして「Add」ボタンをクリックします。

また「YouTube API key」を別途Googleにログインして入手し、そのAPI keyを入力する方法もあります。API keyの入手方法については「YotuWP」記事内の2ページ目で書いているので、そちらを見て下さい。YouTube Feed側の設定は後述します。

YouTubeへのアクセス許可、あるいはアクセストークンの手動設定が完了すると、初期設定でのYouTubeのギャラリーが表示（プレビュー）されます。この時点で一旦、右上にある「Save」をクリックして保存しておきます。ここから表示設定を行いますが、PCやタブレット、スマホでの表示状態の切り替え（赤枠内）が可能です。

２.設定（Customize）

引き続き、以下より左側メニューの内容を見ていきます。まずは「Customize」タブ側。

「Templates」ではギャラリーの表示形式が幾つか用意されていますが、無料版では1つ（Default）しか選択出来ません。初期設定に戻す場合には利用出来そうです。

「Feed Layout」ではギャラリーの表示形式や動画数、グリッドの縦横数を設定出来ます。グリッドは「Columns（列数）」と表示する動画の総数で決まります。Columnsを「2」動画総数を「4」とすると、2×2のグリッドとなります。

「Color Scheme」では、ギャラリーの配色を設定します。

「Header」ではYouTubeチャンネルのアイコンやDescription（説明文）の表示ON/OFFの設定を行います。「Subscriber」は登録者数を表示しますが、無料版では利用出来ません。なおDescriptionが多い場合、全文は表示出来ない様子です。

「Videos」はギャラリーの動画サムネイル中央に再生マークを表示したり、再生時の設定を行います。

「Load More Button」と「Subscribe Button」はギャラリーの追加読み込みと、チャンネル登録ボタンをギャラリーの最下部に表示します。ギャラリーの追加読み込みはボタンをクリックする毎に、設定した動画総数分をギャラリーに追加表示します。ただし減らす事は出来ません。

３.設定（Settings）

続いて「Settings」タブ側です。

「Feed Type」ではギャラリーとして表示する動画の種類を設定します。無料版では「Social Wall（複数SNSの混在表示）」は選択できません。

また「Channel」以外の動画表示には、別途「APIキー」が必要です。詳しくは「YotuWP」記事内の2ページ目で。

「Filters and Moderation」は有料版のみなので省略します。「Advanced」ではYouTubeへの読み込みやWordPressでの表示（制御）についての設定を行いますが、通常は変更の必要は無いと思います。

４.全体設定

ここからはプラグイン自体の設定を見ていきます。WordPress左側メニューの「YouTube Feed」内から「Settings」をクリックします。

「General」内の「License Key」は有料版を購入した場合に、そのライセンスキーを入力します。「Connect YouTube Account」では先のYouTubeへのアクセス許可を行ったチャンネルアカウントが表示されますが、アカウントでの接続では制限があり、特に有料版ではAPIキーの設定が必須です。APIキーの取得方法は「YotuWP」記事内の2ページ目にて。

「Preserve settings～」はプラグインを削除する時に設定は残す、「Import～」および「Export～」で設定のインポートとエクスポートが可能です。

「Feeds」内ではキャッシュ時間の設定とキャッシュの削除が可能です。上記では午後6時にキャッシュの削除が行われ、以降12時間毎に自動で削除が行われます。GDPR（EU一般データ保護規則）については「Automatic」、「Yes」、「No」の選択があります。CustomCodeでCSSやJavaScriptでギャラリーのカスタマイズが行えます。

「Advanced」では高度な設定を行いますが、通常は特に変更は必要無いと思います。「Usage Tracking」は設定や統計を送信するそうですが、個人情報は送信されないとの事。必要なければOFFのままで。また、まれにWordPress内のデータベースで不具合が発生し、ギャラリーが更新されない事があり、その時は「Cron Clear Cache」を有効にすると修正されるとの事。

各項目の入力・変更後は忘れずに「Save Changes」を行って下さい。

2024年5月追記

私の環境ではキャッシュ設定が上手く機能していない様子です。上記で午後6時にキャッシュ削除後、以降12時間毎に削除の設定を行っていますが、「午後6時」を過ぎても次回スケジュールが「午後6時」のままです。本来であれば12時間後の「午前6時」のはず。実際のギャラリーも更新されません。「Clear All Cashes」ボタンでギャラリーは更新され、一旦設定ページを離脱してから再び設定ページを開くと、次回は「午前6時」となります。ただしやはりそれ以降はまた同様です。

2024年5月現在、「YotuWP」側もPHPのバージョン8でキャッシュが機能しない様子で、回避の為に一時的にこのYouTube Feedを利用するつもりだったのですが、まさかこちらも機能しないとは。

上記は同じSmash Balloonの「Instagram Feed」側のキャッシュ設定ですが、YouTube Feedと同じ設定方法で、実際にInstagramに新規投稿した所、ギャラリーは更新されました。

YouTube Feedにはキャッシュ削除に問題がある場合に、「WordPress Cron」を利用してキャッシュの削除を行う設定がありますが、これを有効にしても変わらず（以下に追記）。WordPress本体やサーバー側の問題の可能性もありますが、他の自動更新等は機能しています。

※後日、Cron設定を有効にした状態でギャラリーが更新されました。ただしスケジュール時間とは全く異なるタイミングです。YouTube Feedも同じ問題で更新出来ないのか、そもそもYouTubeに関連するキャッシュだけが更新出来ない点が謎です。Cron設定があるという事（Instagram側には無い）は、問題が発生する可能性をプラグイン製作者様も分かっているのでしょうけれど。…更新出来たので、これで良いか。

ブログ上への設置

ブログへの設置はショートコードで行います。ショートコードはフィード一覧か、フィード個別の設定ページ右上の「Embed」ボタンから取得できます。ウィジェットとして設置したい場合は、「テキスト」ウィジェットにショートコードを貼り付ければ可能です（貼り付けの際はビジュアルではなくテキストで）。

記事中であれば、ブロックでも設置可能です。

実際の様子

私のチャンネルをブログのサイドバーに表示させると上記の様になります。レイアウト設定はColumns「1」、動画数「4」。ヘッダーにアイコンとチャンネル名を表示していますが、Description（説明文）は非表示です。

上記は「Instagram Feed」によるInstagramの表示です。同じ製作者様のプラグインなので統一感があります。「Load More」や「Subscribe」、「Follow on Instagram」ボタンは表示していませんが、同様に同じ様なボタンデザインになります。

ただし、私の場合はYouTube Feedでのヘッダー表示は行わずに、最初に記載した「Get Youtube Subs」という別のプラグインを利用しています。さらに各動画の下部にタイトルを表示させたいので、実際にはこのYouTube Feedではなく「YotuWP」を使用しています（上記はGet Youtube Subs＋YouTube Feed）。

またこれはブラウザ側の問題ですが、スマホ（Operaブラウザ）でデータ圧縮設定を行っていると「Load More…」ボタンが機能しない事があります（Instagram側も）。

※2ページ目は、この記事の初回作成時の古い内容になっています。

Posted by ヒト・ログ（管理人）