WordPressのスライドショーに動画は入る?スライダープラグイン徹底検証

 
 
先日、こんなご相談がありました。



 
 

ホームページのトップに動画を流して、
続けてスライドショーが動くように
「動画とスライドショーを両方」
いれたいんですが、できますか?

 

えっ???
動画とスライドショーを、
両方、ですか!?

 
スライドショーを入れるプラグインも、

動画を入れるプラグインも、それぞれありますが・・・
 
動画が終わった後、静止画へと
連続して動かしたいという珍しいリクエストでした。

調べてもあまり情報がなかったので、
こちらにまとめておきますね。

 

スライダーに動画は入らないの?

 
スライダーといえば、


みんな大好き、WordPressテーマ
Lightningライトニングについていますね!

ライトニングテーマ

 
 

プラグインを入れなくても


初めから「カスタマイザー」の中でスライド設定ができます。
 





ここに、画像やテキストを入力するだけで
簡単にスライダーが作れるのですが、
 
残念ながら、Lightningでは「動画」は対応外
スライドできるのは画像だけなんです。

というわけで
何かお客様のご要望に叶うものはないだろうか、調べまくりました。

 
 
 

スライダープラグイン 上位7選

WordPressのプラグイン公式ページで
「Slider」と検索して出てきたものを上位7つ試してみました。


 
 
ネットで検索して出てくる記事を参考にしてもいいのですが、
今回調べてみたところ、
けっこう古くて使えない情報が多くて惑わされました。

そんな時は、WordPressにログインして「プラグイン」から検索すれば
最近更新されている、人気のプラグインがわかりますよ!

 
今回以下の7点をためしてみましたよ。
 
1)Meta Slider メタスライダー
2)Smart Slider 3  スマートスライダー3
3)Slide Anyting スライドエニシング
4)Slider by Soliloquy ソリロクィ
5)Master Slider マスタースライダー
6)Video Slider ビデオスライダー
7)WP-LogoShowcace WPロゴショーケース
 
 
順番にご紹介していきますね。
 

1 MetaSlider メタスライダー 定番・安心


まずはこちらの「MetaSlider メタスライダー

有効インストール数が90万!
ダントツです。

安心・安定の定番プラグインです。
使っている方が多いですね。

さてどんなプラグインなのでしょうか。

インストールして有効化すると
「MetaSlider」メニューが増えました。

 
 
こんな画面です。

「Add a New Slideshow」(赤マルをつけたところ)で
スライドショー作成画面に入れます。

 
 
 
 
編集画面はこんなです。

「スライドを追加」と小さく書いてありました。
押すと、画像を挿入できる画面になります。

 

左上に「メディアライブラリ」と3つも書いてあります。


上から、それぞれ
 
 
 
画像

 
 
音声

 
 
動画
 
 
全部「メディアライブラリ」ですが
「画像・音声・動画」の3つに分けて表示されるようになっていました。

それぞれ違う項目なのに、

日本語に翻訳するとき
全部「メディアライブラリ」という名前にしてしまったのかな(笑)

 
動画と画像両方入れられるプラグインを、さっそく見つけました!
やったー♪
 
 
早速、動画を選択し
「動画プレイリストを新規作成」してみます。
 
 

「プレイリストを編集」画面に移りました。

 

 
「動画プレイリスト」には
動画を複数入れることもできるんですね!
 
 

ひとまずここでは1つでいいので、
「動画プレイリストを挿入」をクリック。
 
 
 
 
・・しましたが、あれ?
 

なぜか、編集画面に戻ってしまいました。

・・・何回繰り返してもダメでした。

 
 
 
 
どうやら、このプラグイン「MetaSlider」では
動画挿入機能は、有料オプションだったようです。
 
 
 
 
有料プラグインは、28ドルから。
 
 
https://www.metaslider.com/
 

購入しても、思ったのと違った場合は
30日間キャッシュバックもしてくれます。


試用期間で30日間って長いですよね!
希望の動作をするのかどうか、気軽に試せますね^^
 
 
どうやらあまり動画には特化していないようなので
次行ってみましょう。

 

次は、

SmartSlider3 スマートスライダー3

です。

 

2 Smart Slider 3 スマートスライダー3 多機能・便利・美しい!

 
 
このプラグインをインストールして有効化すると
設定の下に「Smart Slider」というメニューが増えました。

 
 
 
設定画面です。
 

説明は全部英語ですが、
わかりやすいアイコンや画像があるので
感覚的に操作できます^^

見た目、使い勝手がとってもよいので私は好きですね!

緑色の「NEW SLIDER」を押します。

 
 
すると「CREATE SLIDER」というメニューが出てきて
スライダーのサイズやレイアウトを選ぶことができました。
 


スライドのサイズやデザインもカスタマイズしやすいですね !

 
 
 
 


そして、「ADD SLIDE」を押すと、

スライドに何を追加するか、選べる画面が出てきました。

 
・Image・・・画像ですね。

・Library・・・ライブラリ、と言われると
WordPressの「メディアライブラリ」かなと思ってしまいましたが、

これは自分のメディアではなく、
プラグインが独自に用意してくれている「素材集」のことでした。

素材まで用意してくれてるんですねぇ。

 
 
・Video
そして、ありました「Video」!

Smart Sliderも、動画と画像の両方がスライドにできそうです。
 
 
ですが・・・

「Video」を押すと、動画のURLを入れる画面になりました。

スライドにできるのはYoutube、Vimeoなどの
動画サイトにアップロードした動画だけでした。

 

Youtube動画を
スライドショーに入れると
こんな感じになりましたよ。

 
イメージ画像↓
 
実際に配置したサイトはこちらです。
https://wp-firststep.com/Lightning/
 
このように、動画に使えるのはYoutubeなどのURLだけで、
手元の動画ファイルは使えないんですね。

さらに、上記画像のように、
Youtubeを埋め込むと、動画のタイトルや
操作ボタンが見えてしまいます。

一部に使うならいいですが、
サイトのトップイメージにはちょっと合わないので
今回のお客様のご要件には適さないことがわかりました。

使い勝手が良さそうだったので残念です。・

 
 
今回は合わなかったですが、
YouTubeリンクで良いならこのSmart Sliderが一番おすすめです!

高機能で素敵なスライダープラグインとして使えますね。
 
また、かっこいいスライダーサンプルがたくさんあるので、
そのままテンプレートとして、画像やテキストを変えれば
面倒な設定なしでかっこいいスライダーが作れちゃいますよ。

スライダーサンプルの一例

https://smartslider3.com/sample-sliders/
 
 
 
スマートスライダーの有料版も試してみたのですが、
ビデオに関しては特に追加機能はなく、YoutubeなどのURLのみのようでした。
 

つぎは・・

 

3 Slide Anyting スライドエニシング ビジュアルエディタでスライド作成!

 
 
スライドエニシング、です。

なんでもスライダーにしてくれるのかな?

 
 
インストールすると、
「SA Slider」というメニューができました。
 
 
 
 
画面には、有料版「SA SlidersPRO」のご案内と
あらかじめ、スライダーのサンプルが用意されていました。

わかりやすくて親切ですね!

 
 
 
 
サンプルをみてみると・・
 
 
 
 
 
すごい!!!!

なにこの多機能!!!!
 
 
さらにスライドの編集がめちゃくちゃ簡単です。

 
こんなサンプルスライドが入っていましたので
 
 
 
動画を追加してみました。
 
「ビジュアルエディター」で編集できるので
ブログを書くような感覚です!わかりやすいーー!
 
さて、肝心の動画を追加してみましょう。

 
 
プレビューがこちら
 
 
 
 
あれ、動画が表示されない・・・
 
 
こちら、公式サイトにあった説明です。
 
 
 

With SLIDE ANYHTING PPO each slide can now open a MODAL POPUP、
which can be an IMAGE popup a VIDEO EMBED pop up(Youtube/Vimeo),
a popup dispraying a WordPress SHORTCODE.

公式ページ https://edgewebpages.com/より引用

 
プロ版だと、ポップアップ、画像のポップアップ、動画の埋め込み(YoutubeかVimeo)
ショートコードが使用できます、とのことです。

 
動画は有料版だけでございました。。。
 
 
気になるお値段は 10ドル
(1サイトのみ)
 
 
この中の有料プラグインの中では破格の10ドル!
これなら手軽に試せますね^^
しかし、YoutubeとVimeoだけみたいなので
今回のお客様のご要望には添えなさそうなので、残念ながら次行ってみます。

動画は使わず、自由にスライダーをデザインしたい方向けですね。

 
 
 
では次です。
 
 

4 Soliloquy ソリロクィ ドラッグ・ドロップで簡単編集?

 
ソリロクィ。・・調べると独り言、という意味でした。
不思議なネーミングですね。
インストールすると、こんなメニューが出てきました。
 
 
 
「Add New」に入ってみましょう。

シンプルな編集画面ですね。

 
「ドラッグ&ドロップで簡単編集」って書いてありましたけど
簡単なのはメディアをアップロードする操作だけで
タブを選ぶ度に「アップグレードはこちら」ばっかり出てきて
なんかよくわからないです。

『File to  Upload」ファイルをアップロード、を試してみると・・・

 
 
アップロードするときに、選べるメディアは画像のみでした。
やっぱり動画は対応していないようです。
 
 
では、有料版はどうでしょう?
 
アップグレードすると、
インスタやWooComarceに対応しているようです。
 
 
 
 
 
肝心の動画については、こちら。
 
「Just add a vide slide,enter in your URL」とありました。
(黄色くマーカーを引いたところ)

「動画をスライドに追加するには、URLを入力するだけ」ということなので、

やっぱり有料版でも、YoutubeとVimeoだけみたいですね。
 
そして気になるお値段は・・

1サイト19ドルからです。


 
 
 
購入しても、2週間以内なら返金もしてくれるそうですよ。

ちょっと使い方がいまいちよくわかりませんでした・・(ごめんなさい)


また機会があったら研究してみます。
 
 
 
 

5 Master Slider マスタースライダー 美麗なデザイン!でも・・

 
 
 
続いては「Master Slider(マスタースライダー)」です。
 
 
こんなメニューで
 
 
 
操作画面はこんな感じ
 
 
左下の青いボタン、Create New Slider、からスライダー作成に入れます。

隣にエクスポートとインポートもあります。
作ったスライダーを、他のブログにコピーできるんですね。便利かも。
 
編集画面はこんな感じです。
 
 
かわいいスライダーサンプルがたくさん!
 
 
 
 
右側にサムネイル画像が一覧できたり
 
 
 
スライドの下に説明が書けたり
 
デザインいろいろ!
一から作れって言われても大変なので、これは便利!
 
さて本題の、動画ですが
「Video and link」というタブにありました。
 
 
 
 
編集画面はこんな感じです。
 
こちらも、使えるのはYoutubeとVimeoだけですね。
 
なかなか、動画ファイルをスタイだーに設定できるものって、少ないんですねー。
 
 
 
 
マスタースライダーの有料版は、24ドル
 
 
 
 
 
有料版なら、「Local Video」に対応しているようです^^
 
 
 
素敵なデザインの、こだわりのスライダーが自由自在に作れそうですね!

 
 
買うならこれも候補かもしれません!
 
 
 
さて次は・・・
 
 

6 WP-LogoShowcace WPロゴショーケース 多機能だが・・

続いてこちらです。

「ロゴショーケース」とはこれいかに?

 

インストールして有効化すると、
こんなお知らせがでます。

 

更新などのお知らせを受け取りますか?という意味です。

メルマガ登録みたいなものですね。
登録すると、50以上のプラグイン、10以上のテーマがダウンロードできるそうです。

ご興味のある方は右側のAllow and continueへ
不要な方はskipでどうぞ。

 

またお知らせが出てきますが、
無視してメニューの「All LogoShowcase」に進みましょう。

 

編集画面はとてもシンプルでした。
WordPressの管理画面そのままみたいな。

「Add New」に進みます。

 

あれ、なんじゃこりゃ。これだけ?

 

どうやら、このプラグインでは
このブログ投稿みたいな画面で、1枚づつスライドを作り、

それらにカテゴリーをつけると、
登録したものをまとめて表示できる、という機能でした。

 

できたのが、これ。

 

あれ。

スライダーじゃないじゃん・・・

ショートコードを指定の通り記載してもスライダーにはならず、
何か使い方があるのかもしれませんが、不明でした。

このプラグインの有料版は、
スライド機能だけでなく多量のプラグイン、テーマがセットになっており
年間49ドルでの総合パッケージプランになっていました。

もしかしたら、こちらに加入したり、
初めのメルマガ登録でもらえるプラグインで何かあるのかもしれませんが

わかりづらいことと、検証に時間がかかること、
また、今回の目的である動画については一切触れていないため
期待できなさそうなことから

WPロゴショーケースは今回は見送ろうかと思います。

 

では、次のプラグインです。

 

7 Video Slider ビデオスライダー  WordPress最新版に対応!

 
その名もそのまま「ビデオスライダー」

名前にビデオって書いてるんだからできますよね!?(強気)
 


はじめにこの
ブログを書いた時は、
「使用中のWordPressバージョンで未検証」で、うまくいきませんでしたが

見直していたら、アップデートしていました^^!

 
 
 
 
さて使い方を見ていきましょう。

 
有効化すると「Video Slider」が増えました。
 
 
操作画面はこんな感じです。
 
 
右側の「NewSlider」ボタンをクリックすると、
編集画面に入れます。
 

1.スライドに名前をつける

2.スライドのタイプを選ぶ

 
スライドタイプはたくさんあって、
ビデオが対応していないものもあるので、ご注意ください。
(Videoと入っているものならOK!)
 
 
このプラグインで、今回のブログの目的であった
「動画からの静止画スライドショー」を作成することができた!!
 
んですが・・・仕上がりはこのようなものでした。


(これは画像ですが)
 
三角マークが、中央にでんっと。
 
これをクリックするまで、動画は再生されないんです。

調べたところ、アップデートで、「自動再生機能」がついたそうなのですが
どうにも、うまく動作しない。。。残念。。

 
ただ、開発者の方はこまめにサポートしてくれるようなので
時間をかけてやりとりしていけば、解決できるかもしれません^^
https://wordpress.org/support/plugin/slider-video/
 
 
 
ビデオスライダーのプロ版は、15ドルから。
 
 

ノーマル版との違いは、スライドのディスクリプション、タイトルなどを

細かく設定できることと、半年間のサポートがついているようです。
 
無料版で十分な機能があるので、そんなにプロ版の必要性はなさそうですね。
 
 
 
このように、いろいろ試してみたのですが
主だったプラグイン、無料のものだけでは

なかなか希望の設定にできないことがわかりました。
 
 
 

裏技 有料テーマ TCD046 SKIN が一番簡単

 
というわけで、

   村重

無料ではご希望通り作るのは難しいみたいですね。
動画をトップスライドショーに入れると重たくなりますし、
静止画のスライドショーだけでよいのではないですか?

 
と、ご提案したのですが

  

いやだ!


と言われてしまいました(笑)

 

    村重

では有料のプラグインを使うか、
またはこのテーマを使うという方法もありますが・・

 

それは、美麗なテーマを豊富に販売していることで有名な、
TCDの「SKIN」というテーマです。

http://tcdwp.info/tcd046/

 
 
 
このテーマをインストールすると、
メニューの「外観」に「TCDテーマオプション」というメニューが増え、
 
 
 
ヘッダースライダーを、5枚まで設定することができます。
 
 
 
 
動画は、保存したファイルもURLも簡単に配置できます。

 
 
 
日本語でわかりやすく書いてくれると本当に楽だなぁ・・笑

本当にこれだけの操作で
美しい動画と静止画のスライドショーを手軽に作ることができました。

本当に楽でした(笑)



詳しくはTCDのデモサイトをご覧ください。
http://tcdwp.info/tcd046

 
じゃあみなさん有料テーマを使いましょう、というわけではないのですが
いろいろ検証したり、組み込んだりするのが大変、
時間がない、という方には、

はじめから

必要な機能の備わったテーマを使うことも、ひとつの方法なのかもしれませんね。
 
 

動画+静止画のスライダーを作る方法:回答

というわけで

今回のお客様のリクエスト

 

  

動画+静止画のスライダーを作りたい!!

 

にお答えする方法は、3通り。

 

1)上記のTCDテーマ「SKIN」を購入して使う 12,980(税込)
http://tcdwp.info/tcd046

 
または、

 
 
2)Master Slider のPro版 24ドルを購入して、
自分でセットアップする。
 
 
または

3)Smart Slider のPro版 35ドルを購入して、

自分でセットアップする。



のいずれかです。
 
 
Master Slider Proの方が、テンプレートを編集して
自由なスライダーを作りやすいです。

ですが、初期設定ではスマホに対応していないため、
かっこいいテンプレートをそのまま使おうとすると、
スマホにした時、ひどく崩れることがあります。


そのため、スライダーの設定画面で極力デザイン設定はせず、
クラス名だけつけてCSSで調整しなければならなかったので、結構手間がかかりました。

Smart Sliderはスライド作成の手間は変わりませんが、
こちらはテンプレートがはじめからスマホ対応しているので
とっても楽チンでしたよ。
 
 
 

スライダープラグインまとめ

と、いうわけで・・・
 
今回は、「動画+静止画」にしたい、という特殊なご要望だったので
上記のような結果になりましたが、
動画を使わないなら、こっちの方が絶対いいなぁ、という
プラグインもたくさんありましたので、ベスト3を発表します!
 
私のおすすめ1位はこちら!!
 

Smart Slider 3 スマートスライダー3



https://smartslider3.com/

Youtubeは貼れる?
動画ファイルは使える? 有料版のみ
有料版はいくら? 35ドル
テンプレートはある? 美しいテンプレートが豊富!
コメント 見た目がわかりやすく、機能も豊富!
スマホ対応もばっちり。
無料で美しいテンプレートが11種類使える

 

 
かっこよくておしゃれなデザインがすぐに作れて、わかりやすいのです^^
しかもスマホ対応してくれているので、何も調整せずそのまま使えます!
スマートスライダーのテンプレート例
 
 
 
 
個人的には1番好きなのですが、惜しくも2位なのがこちら。
 
Master Slider マスタースライダー 

https://www.masterslider.com/

Youtubeは貼れる?
動画ファイルは使える? 有料版のみ
有料版はいくら? 24ドル
テンプレートはある? 美しいテンプレートが豊富!
コメント 多機能ながら、使いやすくわかりやすい。
無料で動きのあるテンプレートが
15種類使えるがスマホ対応が手間。

 

マスタースライダーのテンプレート例はこんなかんじ。

設定画面は英語で、慣れるまで少しかかりますが
1位のスマートスライダーよりテンプレートが豊富で
文字や画像を1つ1つ思い通りに設定でき、とても便利。

ですが、デザインによってはスマホ見ると
レイアウトが大幅に崩れるので
調整が必要なので残念ながら2位になりました。。

 

 

Meta Slider メタスライダー

https://www.metaslider.com/

Youtubeは貼れる? 有料版のみ
動画ファイルは使える? 有料版でも×
有料版はいくら? 28ドル
テンプレートはある? レイアウト選択のみ
コメント シンプルで使いやすい、定番プラグイン
英語ですがサポート、マニュアル充実しています。
安心のUpdraft社製。動画を使わないならおすすめ。

 

制作元は「Updraft」と言って、
WordPressの有名なプラグインをたくさん作っている会社なので
将来的にも安心ですね^^

英語で問い合わせたら、すぐに親切な返事が帰ってきましたよ。
(英語ですが・・・)

動画にあまり対応していなかったので、今回使いませんでしたが
安心の定番プラグインです。

 

スライダープラグイン選びの参考になれば幸いです^^

 

Slide Anyting スライドエニシングも使い込んでみたら面白そうです。

「もっとこんなところが知りたい!」などありましたら
わーどぷれす質問箱へ、お気軽にお寄せください^^

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/