【WPプラグイン】ギャラリー画像をカルーセルスライダーで表示させる【MetaSlider Lightbox】

WordPress
スポンサーリンク

WPプラグイン「MetaSlider」

画像をカルーセルスライダーで表示させられるとっても便利なプラグインです。
Elementorでは画像をカルーセルスライダーで表示させられる機能がありますが、Elementorを使っていないテーマではプラグインを入れるか自作するかになると思います。
今回はプラグインでさっと簡単に綺麗なカルーセルスライダーを作れる、「MetaSlider」をご紹介します。

「MetaSlider」でカルーセルスライダーを作ることができますが、今回は「MetaSlider Lightbox」をご紹介したいと思います。
「MetaSlider Lightbox」は、画像をクリックしたときにふわっと浮き出るLightbox表示で画像を表示させることができます。

 

必要プラグインをインストール

早速プラグインをインストールしていきます。
「MetaSlider Lightbox」を使うには、「MetaSlider Lightbox」だけではなく「MetaSlider」の両方のインストールが必要です。

 

また、Lightboxを使うためLightboxプラグインのインストールも必要となります。
Lightboxのプラグインは色々ありますが、以下のどれでもOKなようです。

対応しているLightboxプラグイン(一部)

  • Easy FancyBox
  • Simple Lightbox
  • FooBox Image Lightbox
  • WP Featherlight
  • WP Colorbox Lightbox
  • ARI Fancy Lightbox
  • Gallery Manage

上記のどれでもいいですが、今回はEasy FancyBoxをインストールして使用してました。

 

使い方

プラグインをインストールするとダッシュボード左のメニューに「MetaSlider」が追加されますので、こちらを選択します。

 

画像を追加

左上の「スライドを追加」から画像を追加していきます。
画像はShiftを押しながら選択すると複数選択することができます。

 

画像の選択が終わると、追加した画像が表示されます。

 

表示の設定

画面の右サイドバーのメニューから色々と設定することができます。
幅・高さや効果、矢印・ナビゲーション(画面下のドット)を表示するなどがこちらで設定できます。

Slideshow Theme

Slideshow Themeでスライドショーのテーマを変更することができます。
それぞれ矢印やナビゲーションの形が違うものが用意されているので、こちらから好きなものを選ぶことができます。

 

「高度な設定」

「高度な設定」を開くとその他の細かい設定を選ぶことができます。
色々と好みの設定にできますが、「カルーセル・モード」と「Open in lightbox?」にチェックを入れてください。
ここへチェックを入れないとカルーセルスライダーにならず、画像クリックでlightbox表示ができません。

 

設定は以上で完了です。
画面右上の「Preview」で確認することができます。

 

ショートコードをコピペ

あとはショートコードを、スライダーを表示させたい場所へ貼り付けるだけでOKです。

ショートコードは右サイドバーメニューの「使い方」の下に書いてあるコードが書いてありますので、こちらをコピーして任意のページなどに貼り付けましょう。
固定ページなどに表示させる場合はオレンジ色の部分だけでOKです。([metaslider id=”238″]の部分)

 

作ったカルーセルスライダーはこんな感じです。

 

以上、「MetaSlider Lightbox」のご紹介でした。
少しでも参考になれば幸いです。

コメント

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