記事の詳細

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

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

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

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

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

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

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

プラグインが有効になると、WordPressのメニューに「Smart Slider」が追加されます。
03_スマートスライダーインストールチェック

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

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

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

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

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

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

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

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

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

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

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

矢印マークを強調するために、背景に色を設定することもできます。
ここでは透明度のあるグレーを選択します。
11_スライダーのページめくりのボタン設定_矢印の背景色設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設定が終わったら「SAVE」ボタンを押して設定を完了します。
24_画像の設定を保存

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

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

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

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

ディスプレイで見た場合は下図になります。
29_デスクトップ表示

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

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

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

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

投稿画面でショートコードを入力します。
33_ショートコード貼り付け

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

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

今回は以上になります

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

いかがでしたか?

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

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

ではまた!

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

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


ほかの投稿も読んでみませんか?

  1. アバター
    • k
    • 2018年 4月 04日

    とてもわかりやすい方法を書いてくださり、参考にさせていただいております。ありがとうございます。

    質問なのですが、
    スマホ(iPhone se)で見たときに、「サムネイル」のみ、サイズが極小になって表示されます。(横幅3mmほど)
    (スマホのみ、ローカル環境でプレビューで確認したものとは違うサイズになります。PC、iPadはプレビュー全く同じで綺麗に表示されます)

    スマホだけサムネイルのみ、マージンサイズ(パディング)を無視して極小で表示されます。

    スマホで見たときにも、適切なサイズになるよう、
    解決方法をご教授お願いいたします。

  2. インクループ株式会社
    • インクループ株式会社
    • 2018年 4月 04日

    コメントをいただき、ありがとうございます。
    弊社社員のスマホ二台で確認しましたが、ご質問としていただいた現象は確認できませんでした。
    確実な解決策をお伝えする事は出来ないのですが、可能性のある要因と対処方法を下記に記載します。

    ①キャッシュのデータが参照されてスタイル崩れを起こしている。
    対処方法:お使いのブラウザのキャッシュを削除して再表示をしてください。

    ②お使いのWordPressのテーマに、スマホサイズの際に特殊な処理をするプログラム(あるいはCSSの設定)が入っている。
    対処方法:CSSで”!important”を活用してスマホサイズの際のスタイルを調整する。

    上記に関して、確認をしてみてください。

  3. アバター
    • k
    • 2018年 4月 04日

    早速ご返信をいただき、ありがとうございます。
    ①を試して見ましたが、変わりませんでした。また、再アップロードしてみましたが、変わりませんでした。

    やはり、iPhone(se)で確認した場合のみ、サムネイルが極小に表示されます。

    お手すきの時に、実際のサイトをご覧いただくことは可能でしょうか。
    http://〇〇/kingsroad/hole2/

    〇〇をメールアドレスの@以下から.co.jpの直前までをコピーしていただき、
    ご覧いただいてよろしいでしょうか。

    お忙しいところ、恐縮ですが、よろしくお願いいたします。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る