1.「Smart Slider 3」のダウンロード
①左のメニューバーから「プラグイン」→「新規追加」をクリック

②プラグイン検索で「Smart Slider 3」と入力し「ENTER」

③「Smart Slider 3」というプラグインが表示されるので、「今すぐインストール」をクリック

しばらくすると有効化ボタンに変化します。
④「有効化」ボタンをクリック

これで、「Smart Slider 3」のダウンロードとインストールが終了です。
左メニューバーに「Smart Slider 3」という項目が追加されます。
2.Smart Slider 3の設定
①左のメニューバー「Smart Slider 3」→「Dashboard」をクリック

Smart Slider 3の設定画面に移行します。
②「GO TO DASHBOARD」をクリック

③「NEW PROJECT」をクリック

「What do you want to create today?」という表示がでる。
④新規で作成するのか、テンプレートから選び作成するのかを選ぶ

※「Create a New Project」=新規作成(1から作る事)
※「Start with a Template」=テンプレートから選んで作成ができる
[btn href=”#newsm” class=”flat2″ yoko]Create a New Projectを選択の場合[/btn][btn href=”#startsm” class=”flat2″ yoko]Start with a Templateを選択の場合[/btn]
3.「Create a New Project」を選択した場合

①「Create a New Project」の設定説明

(1)Project Type:Slider(スライダー)かBlock(ブロック)を選択できます
(2)Slider Type:Simple(シンプル)のみ選択が可能です
※有料版(Pro)の場合、他も選択可能です。
(3)Settings:Name(スライダー名)、Width(横幅)、Height(高さ)、Layout(レイアウト)
※レイアウトは「Boxed」「Full width」の二つから選択できます。
「Full page(Pro)」は、有料版のみ選択可能です。

②設定が完了したら、「CREATE」をクリック

My Projectページに移行する。
③画像追加をする(赤い枠の中にある4つのボタンのうち、どれかをクリックして下さい)

※どれをクリックしても一緒です
④「Image」をクリックする

メディアライブラリーが表示されます。
⑤メディアライブラリーから画像を選択する

メディアライブラリーにある場合はクリックし、レ点つけて選択する。
メディアライブラリーにない場合はファイルをアップロードタブをクリックし、ファイル(画像)を選択してください。
⑥「選択」ボタンをクリック

画像を選択し終えたら、忘れずに選択ボタンをクリックしてください。
選択ボタンをクリックすると、以下のように画像が追加されます。

画像の追加が終了したら、スライダーの設定をしていきます。
以下のボタンをクリックして下さい。
[btn href=”#smartsl” class=”flat6″]スライダーの設定説明(共通)[/btn]
4.「Start with a Template」を選択した場合
①「Start with a Template」を選択

以下の画面が表示されます。
FREEと書いたリボンがされたもののみ選択が可能です。
FREEという表示がないものは有料版です。

②テンプレートを選択する「IMPORT」ボタンをクリック
使いたいテンプレートにマウスオーバーをすると「IMPORT」と表示が出ます。
※IMPORTボタン以外をクリックすると、テンプレートのデモページを確認できます。

IMPORTボタンをクリックすると以下の画面が表示されます。
(テンプレートがFree MarketPlaceの場合)

写真や言葉などデフォルトで入力されています。
5.スライダーの設定説明(共通)
赤枠で囲んだタブの説明をしていきます。

①Generalの設定
(1)Publish

・作成したスライダーを表示させるショートコードまたはPHPコード
※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。
(2)Genral

・Name:スライダーの名前設定
・Thumnail:サムネイルの画面の設定
・ARIA Label:ARIAラベルの名前設定
(3)Alias
・div要素にid名をつける
(4)Slider Design
・Align:配置
・Margin:余白の設定

②Sizeの設定
(1)Slider Size

Width:スライダーの横幅
Height:スライダーの縦幅
Limit Slide Width:デバイスごとの横幅設定
(2)Breakpoints

・ブレイクポイントの変更設定
(3)Layout

・ボックス表示するかフルサイズ表示するかの選択
③Controlsの設定
(1)General

・Drag:Hoizontal,Disabled,Verticlaから選択できる
・Mouse Whell:ON/OFFが選択できる
・Keyboard:ON/OFFが選択できる
(2)Arrow

・スライダーに表示される矢印のデザインを選択できる
・色や位置の設定
等の設定ができます。
(3)Bullet
※デフォルトはオフになっています。

・ページネーションの表示と位置、色の変更設定
・ページネーションにマウスオーバーした際にサムネイルの画像を表示させるかの設定
・ページネーションをマウスオーバーした際に表示させるかの設定
(4)Text Bar
※デフォルトはオフになっています。

・文字を表示させるかどうか、デザイン選択
・Position:文字表示の位置
・Slide Count:スライド画像のカウント表示設定
・Shows On Hover:マウスオーバーした時の表示設定
(5)Thumbnails
※デフォルトはオフになっています。

・サムネイルのサイズ
・サムネイルの表示位置
・サムネイルのテキスト表示
・サムネイルが縦の配置のときに何個表示させる高さにするか
・マウスオーバーした際にサムネイルを表示させるかどうか
(6)Shadow
※デフォルトはオフになっています。

・Shadow:スライダーの下に影をつけるかの設定
※ONにすると、影の種類を選択できます。
・Hide On:表示しない端末の選択設定
③Animations
(1)Main Animation

・Main Animation:アニメーションのパターンを選択
・Duration:秒数指定
(2)Background Animation

・Background Animation:アニメーションの背景設定
④Autoplay
(1)Autoplay
※デフォルトはオフになっています。

・Autoplay:自動的にスライドが切り替わるかの設定
・Slide Duration:スライドが切り替わる秒数設定
・Stop On Click:クリックしたらスライドが止まるかの設定
・Resume On Click:クリックしたら自動的にスライドが再開するかの設定
(2)Button
※デフォルトはオフになっています。

・Button:停止か再開かを選択できる設定
・Play:プレイマークのイメージ変更
・Color:プレイマークの色設定
・Style:プレイマークの高度な設定
・Position:ボタンを配置している位置設定
・Shows On Hover:マウスオーバーした際にボタンを表示させるかの設定
・Hide On:表示しない端末の選択設定
⑤Optimize
※デフォルトはオフになっています。
(1)Optimize Slide Images

・Quality:品質の調整(%)
・Thumbnail Width:サムネイルの横幅設定
・Thumbnail Height:サムネイルの縦幅設定
・Resize Background:背景のサイズ変更
⑥Loading
(1)Loading

・Loading Type:画像のロードタイプの選択設定
・Play When Visible:表示された時に再生するかどうかの設定
・Delayed:遅延の設定
⑦Slides
(1)Slides Design

・Slide Background Image Fill:スライド背景の選択設定
⑧Developer

⑨設定を変更したら「SAVE」ボタンをクリック

6.Smart Slider 3を表示する
①GeneralタブのPublish

・作成したスライダーを表示させるショートコードまたはPHPコード
※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。
②固定ページ、投稿ページの場合
(1)ブロックの追加⊕をクリックし、ウィジェット項目にある「ショートコード」をクリック

(2)先ほどコピーしたショートコードを貼り付ける

(3)右上にある「プレビュー」をクリックし表示の確認

下のように表示されます。

7.Smart Slider 3のまとめ
無料プランでも十分すぎる機能をもったプラグインです。
色んな形にデザインできるので、使ってて楽しいスライダーです。
ぜひ使ってみて下さい。
[myspeech src=”https://wordpress.oita.fun/wp-content/uploads/2020/09/turu.png” name=”ツル”]wordpressのスライダーと言えば、「Smart Slider 3」というほど、凄く使っている方が多いプラグインです。[/myspeech]
コメント