【Smart Slider 3】WordPressおすすめプラグインの使い方／投稿内にスライダーをつけてみよう！

この記事では、「Smart Slider 3」の使い方をご紹介します。

Smart Slider 3 インストール

プラグインの新規追加で「Smart Slider 3」と検索。

「今すぐインストール」→「有効化」をしましょう。

WordPressダッシュボードから、
「Smart Slider」→「ダッシュボード」→「Don’t show again」をクリック。

スライダー作成

「NEW PROJECT」をクリック。

「Create a New Project」をクリック。

無料版ではこちらを選択します。

「名前」には、後から自分が管理する時にわかりやすいスライダーの名前を任意でつけておきます。
カスタマーには表示されません。

画像を追加

「スライドを追加」→「画像」をクリック。

画像を保存したら、一旦保存しましょう。

右下にある「保存」をクリック。（なぜかグレーがかってるけどクリックできます。笑）

この個所を設定していきます。

一般設定のタブ内にあるショートコードを、
スライダーを設置したい箇所に「ショートコードブロック」を呼び出し
コードをコピペします。

サイズ

幅や高さはお好みで設定してください。
下の方にある「全幅を強制」をOFFにする。（デフォルトだとここがONになっています。）

※全幅を矯正がonになったままだとこのように画面全体に表示されてしまって大きすぎる。

操作

ここの好きなように設定してください。

矢印の色や不透明度、ホバーした時の設定も無料版でも細かく設定できます。
またHide On　という欄では
PCでは矢印を表示させるけど、スマホでは矢印を表示しない。
などのデバイスごとの設定もできます。

今回は、スライダーにどんな画像があるのかわかりやすいよう、サムネイルをつけます。

サムネイルは、この部分のことです。

「サムネイル」をON。
すると、「Hide ON」という欄がでてきます。
こちらはデフォルトでは「モバイル」にチェックがついています。
どういうことかというと、「スマホではサムネイルを表示しない」という意味です。

スマホでもサムネイルを載せたい場合は、ここのチェックを外します。

その他

あとは、「アニメーション」・「自動再生」・をお好みでカスタマイズしてください。

アニメーションにある「Duration」はどれくらいの速度で画面を変えるかを設定するものです。

自動再生はデフォルトではオフになっているので、
自動で切り替えたい方はオンにしてください。
すると、何もクリックしなくても、スライドが自動で切り替わるようになります。

「最適化」・「スライド」・「開発者」は特にいじらなくてOKです。

設定が完了したら「保存」をクリック。

ブロックエディタでの使い方

「＋」をクリック。

「Smart Slider 3」をクリック。

検索で「slider」と打ったら出てきます。

「Select Slider」をクリック。

先ほどSmart Slider 3のダッシュボードで作成したスライダーが表示されますので、
載せたいスライダーをクリックし、「INSERT」ボタンをクリック。

すると、スライダーが簡単に挿入されました。

スライダーの画像を変更・追加したい場合は、Smart Slider3のダッシュボードで編集すると自動的に反映されます。

　

以上です。お疲れ様でした！