WordPressのプラグインを眺めるのが楽しいです、網干です。

WordPressのプラグインは優秀なモノが多いので、何かを実装する前にまずはプラグインを検索するのがクセになっています。
細かいギミックはプログラムを組む必要がありますが、大きな仕掛けはプラグインでなんとかなったりすることが多いですね。

さて、今回はそんな便利プラグインの一つ「Smart Slider 3」を使って簡単にコンテンツスライダーを作る方法を記載します。
なんと、このコンテンツスライダーは標準でレスポンシブ対応していますので、別途CSSの設定をする必要がない素晴らしいプラグインなのです！

参考記事は下記になります。
Smart Slider 3 – 高機能で使いやすいコンテンツスライダーのWordPressプラグイン

「Smart Slider 3」のインストール方法

WordPressのプラグイン検索で「Smart Slider 3」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。

インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。

プラグインが有効になると、WordPressのメニューに「Smart Slider」が追加されます。

以上で「Smart Slider 3」のインストールは完了になります。

コンテンツスライダーの設定方法

プラグインをインストールするとサンプルもついてきますので、そこからいじるのが一番早いのですが…。
こういった機能はいじらないと身につかないので、新規作成からコンテンツスライダーを作っていきましょう！

WordPressのメニューの「Smart Slider」をクリックするとダッシュボードが表示されます。
左側のアイコンの「NEW SLIDER」をクリックします。

今回は画面の下部にサムネイルのついたスライダーを作ります。
そのため、新規作成時のスライダーの選択画面でサムネイル付きのスライダーを選択します。

スライダーを作成すると下図のような画面が表示されます。
画像を一つ以上登録しないとスライダーの設定ができないので、とりあえず「Slide #1」をクリックして画像を設定します。

画像を設定したら右上に下図のようなウインドウが表示されるので「GOT IT!」をクリックします。
※このウインドウは設定の成功/失敗等のメッセージが表示される箇所になりますので、基本的には「GOT IT!」を押して大丈夫です。

次に、スライダーの設定をしていきます。

メニューの「GENERAL」をクリックしてスライダーの概要を設定します。
ここでは「Name」の欄にスライダーの名前を入力します。

次に「AUTOPLAY」の項目でスライダーの自動スライドの設定を行います。
ここでは自動スライドの間隔を二秒に設定します。

次に「ARROWS」の項目でスライダーの左右に表示される矢印マークのボタンを設定します。
今回は下図のような矢印を設定します。

矢印マークを強調するために、背景に色を設定することもできます。
ここでは透明度のあるグレーを選択します。

次に「TEXT BAR」の項目で画像のタイトルと概要が表示されるように設定します。

タイトルと概要の区切りの仕様を「Separator」の項目にて設定します。
今回はタイトルと概要の区切りを改行にします。

上記の設定が全て完了したら、ウインドウ右上の「SAVE」ボタンで保存を行います。

以上で、スライダーの設定は完了になります。

スライダーに表示する画像の設定

次に、スライダーに表示する画像を設定します。
現状で設定されている画像にマウスカーソルを合わせると「EDIT」という文字が表示されます。
画像をクリックすることで画像の設定画面が表示されます。

はじめに「Settings」ボタンを押して画像の設定画面を開きます。

「Name」に画像のタイトル、「Description」に画像の説明を入力します。
※ここで設定したタイトルと説明がスライダーの下部に表示されます。

画像のタイトルと説明を入力したら、SAVEボタンを押して設定を保存します。

次の画像を設定するために「SLIDES」ボタンを押して画像の一覧画面に戻ります。
※画像のタイトルや説明を変更しても、表示が更新されないことに注意してください。
　保存が実行されていれば問題ないのでそのまま作業を進めてください。

「NEW SLIDE」を押して新しいスライドを作成するのも良いのですが、ここでは初めに設定した画像の複製を作ります。
画像右上の「…」をクリックしてメニューを表示させて「Duplicate」を押します。

画像が複製されますので、複製した画像をクリックして画像の設定を行います。

複製した画像を変更するために「Background」ボタンを押して画像を変更します。
「Background」の「image」の項目を押して、一枚目とは別の画像を選択します。
※画像を設定しても表示が更新されないことに注意してください。

次に「Settings」ボタンを押して、画像のタイトル、説明、サムネイル画像を設定します。
※サムネイル画像は「Background」で設定した画像を設定してOKです

設定が終わったら「SAVE」ボタンを押して設定を完了します。

設定が正しいか確認をするために、WordPressのメニューの「Smart Slider」を押して、先ほどまで編集していたスライダーを選択して設定の再読み込みを行います。

設定中は画像イメージが変わりませんでしたが、再読み込みをすることで設定した画像が正常に表示されます。

画像が二枚では寂しいので、同じ設定の画像を複数作成します。

画像を複数作成したら、画面左上の「PREVIEW」ボタンを押してスライダーの確認を行います。

ディスプレイで見た場合は下図になります。

上のアイコンを変更することで、ipadのような画面で見た場合やスマホで見た場合のプレビューも表示されます。

以上で、画像の設定は完了になります。

ショートコードを使って投稿記事にコンテンツスライダーを表示する

設定が全て完了したら、スライダー設定画面の「PUBLISH」の項目でショートコードを確認します。

投稿画面でショートコードを入力します。

記事を投稿すると「Smart Slider」のプレビュー画面でみたようなコンテンツスライダーが表示されます。

もちろん、レスポンシブに対応していますので画面を小さくしてもスライダーは正常に表示されます。

今回は以上になります

プラグインをうまく使って魅力あるコンテンツを短時間で作りましょう！

いかがでしたか？

コンテンツスライダーのような大掛かりなギミックは、一から組もうとすると非常に多くの時間を割くことになってしまいます。
こういった部分をプラグインで時間短縮できれば、別の場所に力を注ぎ込むことでより素晴らしいWebサイトを作成することができます。

WordPressを使用したWebサイト制作を行う際は、まずはプラグインを探す事から始めるといろいろと捗りそうですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。