超多機能!スライドショープラグイン「Smart Slider3」(WordPress/Cocoon環境)

超多機能!スライドショープラグイン「Smart Slider3」(Wordpress/Cocoon環境)Cocoon(コクーン)
スポンサーリンク

ワードプレス記事内の好きな場所にスライドショーを入れる良い方法がないか調べて「Smart Slider3」を試してみたので記事投稿します。

旅行ブログとういう特性上、どうしても記事内の写真が多くなります。読者の方が読み疲れしないようにテキストについては多少なりとも工夫しているのですが、写真を多くすると「縦スクロール」でゴールが遠くなります。これだと途中離脱されないか不安です。

記事投稿するうえで「情報の引き算」は大切な考え方だと認識しつつ、現地に行って撮影してきた貴重な写真だ。なんとか詰め込みたい(要するにワガママ

当ブログでは、ワードプレスのテーマとしてCocoon(コクーン)を使っています。この記事投稿時点では、記事内の任意場所でのスライドショーは使えません。Gutenbergにそれっぽいものはあるのですが使い勝手はイマイチ。

いくつか探して「Smart Slider3」が使えそうだったのでご紹介します。ほかのワードプレステーマでも使えると思います。

コクーンの質問スレッドから来られる方が少なからずいると思います。スレッドに記載していたテストページからこのページへ301転送しました。

結論としては、JetPack拡張のスライドショーを使うことは諦め、プラグインを入れました。現在では、Cocoon側にもギャラリー(Spotlight.js)が備わっているようです。

当ブログではいずれかを使い分けますが、この記事で紹介しているプラグインはCTAなどにも使えるので用途に分けて使い分ける予定です。

スポンサーリンク

Cocoonテーマでのスライドショー機能

カルーセルは用途が絞られる

Cocoonテーマでもスライドショー機能は備わっています。

ただ、投稿/固定/インデックスの各ページ最上部に設置する仕様です。それとこの機能は記事一覧を表示するためのものです。記事内の任意な場所に入れたり、好きな写真を表示したりはできない。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(コクーンのカルーセル機能)
コクーンのカルーセル機能

JetPackにスライドショー機能があるが…

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(ブロックエディタ で使えるJetpackのスライドショー機能)
ブロックエディタ で使えるJetpackのスライドショー機能

最初、Gutenbergの標準機能だと勘違いしていましたが、JetPackにスライドショー機能が付いていました。これを使えば任意の場所に画像スライドショーを入れることが可能でした。

ただ、Cocoonテーマの高速化設定を外す必要がありました。当然のことながら、外したくないです。

サイト表示を高速化する設定です。

CocoonテーマではGoogleのPageSpeed Insightsに最適化したページ作りが可能になっています。当ブログでも当然のことながらこの機能は有効にしています。

  1. ブラウザキャッシュの有効化
  2. HTML, CSS, JSの縮小化
  3. Lazy Load設定(画像の遅延表示)
  4. スクリプト読込設定

上記のうち、「3. HTML, CSS, JSの縮小化」でJetPackスライドショーで使っているJSライブラリを外せば、スライドショーが有効になるようです。しかしながら、ライブラリの量は膨大でとてもピンポイントに外すことは厳しい状況でした。

ちなみに、この件はCocoonフォーラムでもスレッドを立てました。

Gutenbergにあるギャラリー機能

Gutenbergといえば、まだ取り入れていない人もいるでしょうが、当ブログではすでに完全移行しました。

慣れるとこっちのほうが記事投稿はしやすいし、表現力が豊かです。で、Gutenbergにスライドショーに近い「ギャラリー機能」が備わっています。この機能も使いつつ、縦スクロールを減らす努力はしつつもやや不満でした。

Gutenbergのギャラリー機能は複数の写真を選択して、指定した枚数でまとめて表示する機能です。スライドショーも可能で、画像自体へのリンクを貼るとスライドショーとして使えます。

利用例)Gutenbergギャラリー機能

▲ 画像をクリックすると、スライドショーになります。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー機能のここがダメ)

▲ 但し、記事内で複数のギャラリー(スライドショー付き)を使うと、スライドショーが立て続けに表示されてしまいます。伝えたいことのストーリーを区切れない。

スライドショープラグイン「Smart Slider3」

ということでプラグインを探してきました。似たようなものはいくつかあるのですが、とりあえず使いやすかったのが「Smart Slider3」プラグインでした。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」

プラグイン概要

プラグイン名称Smart Slider 3
作者Nextend
最終更新頻繁な模様
有効インストール数500,000+
WordPressバージョン4.6 またはそれ以上
評価5

主な機能

かなり多機能、私が求めていた以上のことが出来ます。カスタマイズ要素が豊富なので最初は少し困惑するかも。

盛りだくさんなSmart Slider3機能
  • 洗練されたスライドショーの見た目
  • サイズはお好みで
  • デザインに関するオプションが豊富
  • スマホ、タブレット、PCどれでも簡単にスライドできる
  • サムネイルやブレットで写真枚数が視認できる
  • オートプレイ対応
  • ドラッグ&ドロップで簡単にスライド順序を変更できる
  • ショートコードでどこでもスライドショー表示ができる
  • PHPプログラム内にもショートコードを埋め込める
  • クラシックエディタでもブロックエディタでも使える

記載していること以外にも多くのことができます。

サンプル・スライドショー

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー画像の例)
ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー画像の例)
ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー画像の例)
ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー画像の例)
ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(Gutenbergギャラリー画像の例)
previous arrow
next arrow
previous arrownext arrow
Shadow
Slider

インストール方法

ワードプレスの管理画面から「プラグイン」→「新規追加」→「Smart Slider 3」で検索、有効化すればインストールは完了です。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(インストールはWP管理画面からサクッと)
インストールはWP管理画面からサクッと

「Smart Slider3」プラグインの使い方

多機能なのですべてを網羅するのは一つの記事では大変です。ということでポイントを押さえます。

やりたいこと
  1. 記事内の任意場所にスライドショーを入れたい
  2. スライドショーであることをわかりやすくしたい
  3. Captionで読者に説明を入れる
  4. SEOに大切なALT属性はしっかり入れたい

2番目は、スライドショーに見えず単一の写真と勘違いされると意味がないのである程度目立たせて読者にスライドさせようという意図です。当ブログでスマホ流入が70%程度あるので、スマホでしっかり見た目を見ておく必要があります。

画像のALT属性を指定できることは必須条件です。これがないと採用できない、というくらい大事なものです。

押さえておくべき概念

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーとスライドの概念図)

ひとつひとつの写真を「スライド (Slide)」と呼び、それをまとめあがる機能を「スライドショー (Slide Show)」と呼ぶようです。

Smart Slider画面構成

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(ワードプレス内の上部とサイドバーにメニューが出来上がる)
上部とサイドバーのメニュー

プラグインをインストールすると、ワードプレス管理画面の上部とサイドバーにメニューが出来上がります。

どちらかを選んでSmart Slider3の管理画面に入ります。上部メニューいらんのだけど(主張しすぎ

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画面構成)
画面構成

▲ Smart Slider3管理画面のトップページです。「Setting」はよほど慣れてから触った方が良さそうです。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドの一覧)
スライド(画像)の一覧

▲ インストールするとサンプルのスライダーが一つあるので選ぶとスライドショー設定画面に入ります。表示されている画像が個々のスライドということになります。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーの設定項目)
スライドショーの設定項目

▲ スライドの下にスライドショーの設定画面があります。細かいオプション設定をここで行います。

スライドショーの作り方

スライドショー作成の流れ
  • ステップ1
    新規スライドショーを作成する

    まずは写真を入れる入れ物を作ります。伝えたいことをひとまとめにした方がいいでしょう。

  • ステップ2
    スライドショーに写真を入れる

    スライドショーに放り込む写真を選びます。

  • ステップ3
    写真の説明文章を入れる

    画像のキャプションやALT属性を入れます。めんどくさがらずにちゃんとやると検索表示にも良い影響があります。

  • ステップ4
    保存してパブリッシュ

    ショートコードが生成されるのでそれを使えば好きな場所に表示できます。

新規スライドショーを作成する

それではテストに作ってみます。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(新しいスライドショーを作る)
新しいスライドショーを作る

▲ ダッシュボードから「New Slider」を選びます。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーの名前、サイズを指定)
スライドショーの名前、サイズを指定

▲ 名前が必須項目になるのでわかりやすい名前を入れましょう。私はサイズも指定しました。投稿記事の横幅を800pxに設定しているのでそれ以上は不要なので800pxに。縦はとりあえず4:3になるようにしました。

スライドショーに写真を入れる

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーに含める画像を選ぶ)
スライドショーに含める画像を選ぶ

▲ 「ADD SLIDER(スライドを追加する)」を押して、「Image(画像)」をクリックします。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(いつものメディアライブラリ)
いつものメディアライブラリ

▲ 見慣れたワードプレスのメディアライブラリが表示されるので、使いたい写真を複数選びます。

写真の説明文章を入れる

説明文章は入れなくともOKですが、ALT属性を入れておくと検索エンジンの表示上有利になります。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(写真を選ぶ)
写真を選ぶ

▲ 写真を選びましょう。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(ALT属性を指定する)
ALT属性を指定する

▲ 「Background」に「SEO-Alt tag」があります。ここでALT属性の指定をします。この文章は読者の目には触れませんが、グーグルへのアピールになります。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像キャプションの設定)
画像キャプションの設定

▲ 「Description」が画像キャプションの設定で読者の目に触れるテキスト文章となります。

こちらは検索エンジンの評価には影響しないのでメンドウであれば飛ばすのも良し。画像キャプションについては一括で行うことも可能です。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像キャプションの表示例)
画像キャプションの表示例

保存してパブリッシュ

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(一通り作業したら保存する)
一通り作業したら保存する

▲ 一通りの写真に説明を入れたら保存します。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(融通のきくショートコード)
融通のきくショートコード

▲ スライドショーの設定画面の「PUBLISH(発行)」を選ぶとショートコードが表示されています。これをコピペすれば記事内の好きな場所やウィジットにスライドショーを表示できます。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(ブロックエディタ での使用例)
ブロックエディタ での使用例

クラシックエディタ、GutenbergともにSmart Slider3用のメニューが用意されているのでショートコードがわからなくてもスライドショーを選ぶことができます。

オプション設定

基本的に入れ物となるスライドショーを作って写真を放り込めばOKです。オプション設定を使うと細かい動作や見た目を制御することができます。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(設定変更したらプレビューで確認しよう)
設定変更したらプレビューで確認しよう

▲ 設定をいじったらとりあえずプレビューすることをオススメします。

前後スライドへ「ARROWS」

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像の左右スライドの設定)

▲ 画像の左右スライドの表示方法の設定です。ご覧の通り細かい設定ができます。

写真の枚数を示す「BULLET」「THUMBNAIL」

読者に写真の枚数を視認しにんさせる方法は二つ。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(BULLET表示の指定)

▲ まずは「BULLET(鉄砲の玉)」画像に丸いポチを表示します。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(サムネイル表示設定)

▲ 続けて「THUMBNAILS(画像サムネイル)」です。メインの画像下に他の画像をサムネイルとして表示することができます。スライドショーとしてアピールするのに効果があるかなぁと思います。

写真の説明表示「TEXT BAR」

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像キャプションの設定)

▲ 画像キャプションの表示設定です。表示する場所やフォントが指定できます。

スライドショーをおしゃれに「SHADOW」

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーの陰影をつけられる設定)

▲ スライドショーの下に陰影をつけて浮かび上がらせることができます。おしゃれ効果+これもスライドショーであることを目立たせるのに良いと思います。

便利なTips

ここからは知っておくと作業が楽になるTipsです。

クイック編集

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像の一括編集ボタン)

▲ 画像のキャプション程度になりますが、一括編集ができます。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(画像キャプションやリンクの一括編集)

▲ 画像キャプションやリンクを付ける場合は写真一覧画面から一括して行えます。

エクスポート機能

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(HTMLやファイルとしてエクスポートできる)

▲ 共同でメディア管理している場合に使えそうなエクスポート機能です。HTMLのコードか、Smart Slider3独自の「.ss」という拡張子がついたファイルでエクスポートすることができます。

スライドショー複製

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(スライドショーは複製できる)

▲ 既存のスライドショーを複製することができます。細かいスライド動作などを指定した場合に、同じ設定で別のスライドショーを作りたいという時に便利そうです。

管理画面上部のメニューを消す

便利なTipsかどうかは微妙ですが、インストールした後にWP管理画面上部に出てくるSmart Slider3のメニューがジャマなので消しました(笑

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(管理画面上部のメニューがジャマです)

▲ なんでこんなに主張してくるw

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(消去する設定はSettingより)

▲ Smart Slider3上部の「Setting」に入ります。

ワードプレス - Cocoonテーマ環境で使えるスライドショープラグイン「Smart Slider3」(容赦なく消し去る)
容赦なく消し去る

▲ 「Show in WordPress admin bar」のチェックをオフにしたら消えました(良かった

まとめ

こんな感じで超高機能なスライドショー・プラグインの紹介でした。

正直なところプラグインは入れたくないです。更新が止まると嫌だし、Cocoonのアップデートが早いのでそのうち実装されそうな気がします。いや、たぶんいつかw

ひとまずホテル記事で写真が多くなりがちなので用途を選びながら使うつもりです。

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
このブログを購読してみる
スポンサーリンク
スポンサーリンク
ブログの購読はこちら

バジェットな旅行記ロク、主に東南アジアを中心とした旅行ブログです。

ブログ投稿は週に2, 3回です。写真多め、見やすい記事をお届けします。

cocoon-affiliate-tag-bannerblog-icon-banner
バジェットな旅行記ロク

コメント

  1. ほし より:

    いつも更新楽しみにしてます!今回も参考になる記事ありがとうございます!
    これ読んで勉強して実装してみようかと思いました!

    • チャンビア より:

      ありがとうございます。

      びっくりするくらい高機能ですね。サンプルのスライドショー見ながら使い道を考えています ^^

  2. ほし より:

    こういう機能とかは、全てご自身で見つけてくるんでしょうか?

    • チャンビア より:

      「ワードプレス スライドショー おすすめ」とかで検索すると、すぐに見つかりますね。MetaSlider, Smart Slider3はどのサイトもおすすめしたので使ってみて自分に合っていた方だけ入れました。

      プラグインは入れすぎると遅くなるのでよっぽどでないと入れません。

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