別ブログでwordpressを運営しています。初心者向けにトップページやサイドバーに自分のyoutubeの動画をスライドショーで設置するカスタマイズ方法のまとめです。
youtubeをスライドショーで設置するカスタマイズ
wordpressの自分のホームページやブログのトップページ、またはサイドバーにyoutubeの動画やスライドショーを埋め込みたいと思いませんか。youtube動画をトップページに埋め込むことで読者にyoutubeチャンネルをアピールすることも可能で、またスライドショーを埋め込むことで、オシャレなトップページに変わります。
また、youtubeで動画を投稿したことない人もこの機会に登録することをおすすめします。ブログで動画を公開する場合、youtubeを使って公開するほうがメリットが多いです。たとえば、もし再生回数が多いと動画のみで収益を得ることができるからです。
カスタマイズ方法
トップページにスライド画像やyoutubeの動画を埋め込むためには2つのプラグインがこ必要になります。
- page builder by siteorigin
- master slider
page builder by siteoriginはトップページを自由にレイアウト出来るプラグインです。たとえば、トップページの左側をさらに2分割して関連記事と新着記事をそれぞれ表示することが簡単にできます。このプラグインを使ってトップページにスライドショーや動画を埋め込みます。
注意
ただし、トップページではなくサイドバーに設置を考えている人はpage builder by siteoriginをインストールする必要はありません。また、page builder by siteoriginの基本的な使い方については以下の記事を参考にしてください。
master slider
master sliderの解説です。初心者でもスライドショーを簡単に作れるプラグインで、youtubeなどの動画もスライドショーとして設定ができます。もちろん、レスポンシブ対応です。
プラグインをインストールし、有効化後メニューバーにMaster Sliderのボタンがでてきます。settingsはそのままで上のMaster sliderをクリックします。下側の青いボタンCreate New Sliderをクリックしてください。
サンプルのスライドショーが表示されます。サムネイルが横や縦または、説明がついているスライドショーなど確認できます。気に入ったスライドショーを選択してCreateボタンをクリックします。もちろん、自分でスライドショーをカスタマイズすることも可能です。
既存のサンプル画像がありますが、自分が使用する画像に変更します。ゴミ箱のマークで捨てるをクリック。＋のマークで画像の追加です。
上記の画像は僕のブログで使用しているyoutube動画のサムネイル画像です。こちらをアップロードしてドラッグして先頭にもっていきました。この流れで、他にもアップロードした動画を追加します。追加完了したら、video and link をクリック。
1.Video embed srcへ //www.youtube.com/embed/あなたのyoutubeの動画idを入力
これでスライドショーでは画像だけ読み込み、クリックしてから動画を読み込むためサイトへの負荷が軽減されます。
2.また上の部分にURLはスライドショーで使用します。ここを入力するとクリックしたときに指定したURLに飛ばしてくれます。以上で設定は完了です。
再生されない
スライドショーやyoutube動画を埋め込んでもうまく再生されない、または動かないことがあります。僕も最初は動かず困りました。よくよく調べてみるとjQueryが関係していることがわかりました。わかる人は修正してください。
トップページに設置する
最後に完成したスライドをトップページに設置します。事前に設定したpagebuilder by siteoriginで設置したい場所にテキストを用意しておきます。スライドショーが完成するとショートコードが割り振られます。これをコピーしてテキストに貼付けたら完成です。最後まで読んでいただきありがとうございました。
