WordPressを使っている方でYouTubeに動画を投稿している方は多いかと思います。
一番簡単なのは、動画の共有からリンクをコピーして貼り付けするとリンクを貼ることができます。
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
最新動画を自動で表示してくれる方法ないのかなぁ?
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
楽に表示することができるプラグインを見つけてきたよ!
今回はプラグイン導入で簡単に表示できたので紹介していきます。
当サイトはSWELLを使っているのでカスタマイズが簡単です。
SWELLにおすすめのプラグインをまとめた記事もあります!
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
WordPressのブロックエディタでも近いものは作れると思います。
新着動画などを表示できるプラグイン「Your Channel」
![](http://az-notez.com/wp-content/uploads/2022/02/Your-Channel.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Your-Channel.jpg)
WordPressにYouTube動画を表示させるなら導入必須のプラグインです!
英語なので使いにくいところはありますが、新着動画を表示するだけなら今回紹介する手順通りにすれば導入可能となっています!
導入方法
まずは、「Your Channel」のサイトに行きプラグインをダウンロードします。
![](https://ps.w.org/yourchannel/assets/banner-772x250.png?rev=1788345)
![](https://ps.w.org/yourchannel/assets/banner-772x250.png?rev=1788345)
ダウンロードしたZIPファイルをWordPress→プラグイン追加でアップロード→インストールします。
![](http://az-notez.com/wp-content/uploads/2022/02/アップロード-1024x326.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/アップロード-1024x326.jpg)
インストール後、「有効」にします。
Your Channelの設定をするためにGoogle Cloud Platformのページに行きます。
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform①-1-1024x576.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform①-1-1024x576.jpg)
利用規約に同意して続行します。
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform②-1024x576.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform②-1024x576.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform③.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform③.jpg)
左上の「プロジェクト選択」から「新しいプロジェクトを作成」を選択します。
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform④.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform④.jpg)
プロジェクト名は好きな名前で大丈夫です。
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑤-1024x503.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑤-1024x503.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑥.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑥.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑦-1024x383.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑦-1024x383.jpg)
- 使用するAPIは「Youtube Data API v3」
- 一般公開データを選択
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑧.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑧.jpg)
認証情報(APIキー)をコピーしておいて、完了。(メモ帳などにメモしておいてください)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑨.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/Google-Cloud-Platform⑨.jpg)
![YouTube-ID①](https://az-designlife.site/wp-content/uploads/2022/11/23eaf4aff51327248c14f4efa92c7b93-1024x420.jpg)
![YouTube-ID①](https://az-designlife.site/wp-content/uploads/2022/11/23eaf4aff51327248c14f4efa92c7b93-1024x420.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/YouTube-ID②.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/YouTube-ID②.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/YouTube-ID③.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/YouTube-ID③.jpg)
- API KeyにAPIキーを入力
- YouTubeにユーザーネームとチャンネルIDを入力
- Checkを選択しチャンネルを決定する
- Saveで登録完了。
![](http://az-notez.com/wp-content/uploads/2022/02/設定①.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/設定①.jpg)
これでひとまずは、ショートコードで[Yourchannel user=”〇〇”]が出来上がるので、こちらを記事に貼り付けることでYouTubeを表示することが出来ます。
![](http://az-notez.com/wp-content/uploads/2022/02/設定④.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/設定④.jpg)
新着動画だけを表示する方法
ここからは設定できた「Your Channel」を新着動画だけ表示する設定を紹介します。
- Show→Videosのみ (動画、プレイリスト、バナーの表示)
- Style→Style:list
- Show Description → off (動画の紹介文の表示)
- Play icon →Show
- Video per load → 1(表示される動画の数)
![](http://az-notez.com/wp-content/uploads/2022/02/設定②.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/設定②.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/設定③.jpg)
![](http://az-notez.com/wp-content/uploads/2022/02/設定③.jpg)
SWELLだと見やすい構成が作れる
SWELLだと「リッチカラム」「タブブロック」「SWELLボタン」を使用でき綺麗にまとめることができます!
それ以外だと、カラムブロックやボタンブロックで代用できるのではないかと思います。
リッチカラムで左側に画像、右側にタブブロックで新着動画と人気動画を分けれるようにして貼り付け、その下にSWELLボタンを使ってリンクをチャンネルのトップページでチャンネルに飛ぶことが出来ます。
![](https://az-notez.com/wp-content/uploads/2022/09/実際の構成-1-edited.jpg)
![](https://az-notez.com/wp-content/uploads/2022/09/実際の構成-1-edited.jpg)
まとめ!
今回は「WordPressにYouTube新着動画を貼り付ける方法」を紹介してきました。
プラグインを導入することで簡単に表示することができました。
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/42325caaee3458e2fb340652cf7f6db2-1-150x150.png)
動画更新のたびに貼り替えしなくて済むようになったね!
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5972512a8d365c59e7787baf6585b29b-150x150.png)
設定を変えたら何個表示するかという設定もできるから導入必須だね!
SWELLを使うとかなり自由度が高くカスタマイズできますので、おすすめです。
その他にも、Webデザインを学んだ私がめちゃくちゃ使えると思ったWordPressのプラグインをまとめた記事がありますので、自分のサイトで使いやすそうなプラグインが見つかると嬉しいです!
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/11/e248eae6b0e10728070845128c92c5d1-300x158.jpg)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-1-150x150.png)
最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
![](https://az-designlife.site/wp-content/uploads/2022/12/5cea0a48db9710d13ba3642c5b82c46a-150x150.png)
当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。
コメント