WordPressプラグイン「Ultimate Slider」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介します。
目次
サムネイル付きスライドの完成イメージ
メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。
サムネイルをクリックすると、メインスライドも切り替わります。
Ultimate Sliderの設定方法
Ultimate Sliderのインストール・有効化
サムネイル付きスライドを表示したいWordPressにUltimate Sliderをインストールして有効化します。
スライダーを作成
Ultimate Sliderを有効化するとWordPress管理画面左側のメニューに「UR Image Slider」が表示されます。
「UR Image Slider」の「Add New Slider」をクリックします。
スライド画像の設定
Ultimate Sliderのスライド作成画面から「Add New Slide」をクリックします。
メディアライブラリからスライドに設定する画像を選択します。
選択した画像がスライドに設定されます。
サムネイルスライドの設定
「Configure Settings」の「Show Thumbnail」をチェックONとします。
自動再生の設定
「Configure Settings」の「Auto Play Slide Show」をYesとします。
スライダーを保存する
「公開」をクリックします。
スライダーを確認する
スライドを表示したいWEBページに、Ultimate Sliderのショートコードを設定すると、自動で切り替わるサムネイル付きスライドが表示されます。
他のWordPressプラグインでサムネイル付きスライドを表示する方法
WordPressサイトの場合は他にもサムネイル付きスライドを表示することができるプラグインがあります。
プラグインを使わずにサムネイル付きスライドを表示する方法
JavaScriptのスライダーライブラリを使うとプラグインを使わずに自動で切り替わるサムネイル付きスライドを表示させることができます。
- Slick.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Splide.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法
- Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法
サムネイル付きスライドのWEBサイト制作事例
今回のようなサムネイル付きスライドを表示したWEBサイトの制作事例をご紹介します。
まとめ
今回はWordPressプラグイン「Ultimate Slider」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介しました。
プラグインを活用することで、複雑な設定なしでスライドを作ることができます。
WEBサイトに動きのある要素を取り入れたい方は、ぜひこの方法を試してみてください。
WEBサイトの制作や保守についてお困りのことがあれば、お気軽にご相談ください。
