今回はWordPressプラグイン「Master Slider」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介します。

サムネイル付きスライドの完成イメージ

メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。

サムネイルをクリックすると、メインスライドも切り替わります。

Master Sliderの設定方法

Master Sliderのインストール・有効化

サムネイル付きスライドを表示したいWordPressにMaster Sliderをインストールして有効化します。

スライダーを作成

Master Sliderを有効化するとWordPress管理画面左側のメニューに「Master Slider」が表示されるので、それをクリックします。

Master Sliderのダッシュボードから、「Create New Slider」をクリックします。

「Slider Types」の「Coustom Slider」を選択し、「CREATE」をクリックします。

スライド画像の設定

「Add Slide」をクリックします。

メディアライブラリからスライドに設定する画像を選択します。

選択した画像が設定されます。

サムネイルスライドの設定

「SLIDER CONTROLS」のタブをクリックします。

「Add new contorol」のプルダウンで「Thumblist/Tabs」を選択し、「＋」ボタンをクリックします。

「Thumblist/Tabs」の設定値が表示されるので編集します（サンプルでは初期値のままとしています）。

自動再生の設定

「SLIDER SETTINGS」のタブをクリックします。

「Navigation」セクションにある「Autoplay（Slideshow）」のスイッチをONとします。

スライダーを保存する

「Save Changes」をクリックします。

スライダーを確認する

スライドを表示したいWEBページに、Master Sliderのショートコードを設定すると、自動で切り替わるサムネイル付きスライドが表示されます。

他のWordPressプラグインでサムネイル付きスライドを表示する方法

WordPressサイトの場合は他にもサムネイル付きスライドを表示することができるプラグインがあります。

• Smart Slider3で自動で切り替わるサムネイル付きスライドを実装する方法

プラグインを使わずにサムネイル付きスライドを表示する方法

JavaScriptのスライダーライブラリを使うとプラグインを使わずに自動で切り替わるサムネイル付きスライドを表示させることができます。

• Slick.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Splide.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法
• Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法

サムネイル付きスライドのWEBサイト制作事例

今回のようなサムネイル付きスライドを表示したWEBサイトの制作事例をご紹介します。

• 新相武株式会社様のWEBサイトを制作しました

まとめ

今回はWordPressプラグイン「Master Slider」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介しました。

プラグインを活用することで、複雑な設定なしでスライドを作ることができます。

WEBサイトに動きのある要素を取り入れたい方は、ぜひこの方法を試してみてください。

WEBサイトの制作や保守についてお困りのことがあれば、お気軽にご相談ください。