WordPressにYoutubeギャラリーを追加する「YotuWP」の設定方法(wordpress 5.4動作確認済み)

スポンサーリンク
Wordpress
スポンサーリンク

YotuWPとは

ブログに印象的なYoutubeページを追加するのに適しているプラグインです。

普通に埋め込みでページを作ることもできますが、このプラグインを使うことで、印象的なページを作ることができます。

プラグインのインストールと有効化は割愛します。

設定方法

設定方法については以下の手順となります。

  1. googleにアクセスしてAPIの取得
  2. wordpressプラグイン設定でYotuWPの設定
  3. 固定ページもしくは投稿ページへの貼り付け

APIの取得

まず、導入にはGoogleさんの許可が必要となります。

Google Developers Consoleへ移動してログインします。

左上の▼を押して「新しいプロジェクト」を作成します。

「プロジェクト名」は後でなんのAPIなのかわからなくならないようにしておきましょう

プロジェクトができたら、いよいよキーの取得です。

メニューから「認証情報」をクリックして

「認証情報を作成」を選択→「APIキー」を選択していきます。

APIキーを作成しました。とポップが出てきて

下に自分のAPIキーが表示されますのでコピーしておきます。

次に不正利用を防ぐために「キーを制限」に進みます。

「アプリケーションの制限」が「なし」になっていると思いますので「HTTPリファラー」にチェックを入れて下の「新しいアイテム」自分のHPのURLを記載します。

※ レンタルサーバー側の設定でキー制限をかけると表示できなくなる場合があるようです。
その際は、サーバーの設定を変更するかリスクはありますが、キー制限「なし」としましょう。

次にAPIを有効化します。

メニューから「ライブラリ」を選択します。

ライブラリの中から「YouTube Data API v3」を選択

タイトルの下にある「有効にする」を選択すれば完了です。

これでGoogle側の設定が終わりました。

次にwordpress側の設定に移ります。

wordpressプラグイン側の設定

wordpressにてプラグインを有効にすると左メニューに「YotuWP」項目が追加されます。

「General Settings」を選択します。

これだけは必須 

設定メニューが表示されるので左側の「API」を選択します。

APIキー入力画面に切り替わりますのでgoogleで取得した「APIキー」を張り付けて「変更を保存」をクリック

これでとりあえずは表示できる準備は整いました。

※ APIキー取得した直後だと反映しないことがあります。1日経過してから確認してみることをお勧めします。

記事への設置

いよいよ、記事に設置していきます。

「固定ページ」もしくは「投稿ページ」を新規作成します。

記事エディター上部に「YotuWP」ボタンが追加されているので

クリックしてメニューを開きます。

  1. プレイリストの一覧表示
  2. チャンネルの動画一覧 
  3. 特定のユーザー動画一覧
  4. 任意の動画
  5. 任意の複数動画
  6. 任意のキーワードの動画

から選択し該当のURLを張り付けてVEFIFYを選択します。

※URLはyoutubeからコピーしてきましょう。

URLが正しければサムネイルが表示されるので下の完了ボタンを押せば設置完了です。

という流れなんですが、記事投稿で手こずりました。

というのも、記事エディターにyotuWPが出て来なかったんです。

ブロックエディターでも旧エディターでも出て来ない…。

ということで以下の方法で改善できたので参考にどうぞ!

掲載ページを作るときは「Gutenberg」は停止すべし!

ブロックエディターであるGutenbergで記事を書いている人は要注意です。

このブロックエディターだとボタンが出てきません。※2020.5月現在

そのうち改善されるかもしれませんが、現行はプラグインを停止しすれば、昔のエディター表示となり。使えるようになります。

テーマ「Cocoon」を使っている人も要注意!

テーマ「cocoon」を使っている人は「cocoon設定」でエディターを制御しています。

cocoon設定の「エディター」で「Gutenbergエディターを有効にする」のチェックを外してください。

このチェックを必ず外すこと!

まとめ

設定をそこそこいじれば
以下のようなプレイヤーと動画一覧を掲載できます。

プラグインの細かな設定は書くとキリがなくなるので他の方のページを参考にしていただければと思います。

コメント

タイトルとURLをコピーしました