サイトにスライダーを設置するプラグイン「Smart Slider 3」

サイトにスライダーを設置

サイト内にレスポンシブ可能なスライドショーを設置 Smart Slider 3

レスポンシブなスライダーを作成することができ、あらゆる端末に適応しています。また画像だけではなく、アニメーションはYouTube動画をスライダーにすることができます。

サイトにスライダーを設置 見え方

スライダーの設置位置は。コンテンツの上でもでも、メニューの上でも下でも簡単に設置できます。

サイトにスライダーを設置 PCの場合の見え方

スライダー設置した時のPCでの見え方です。

①メニューの上に設置②メニューの下に設置・影なし③メニューの下に設置・影あり

サイトにスライダーを設置 スマートフォンでの見え方

スライダー設置した時のスマートフォンでの見え方です。

Smart Slider をインストール/サイトにスライダーを設置

Smart Slider 3をインストールし、有効化します。インストールすると左側の項目に「Smart Slider」という項目ができています。

Smart Slider の設定/サイトにスライダーを設置

左側の項目から「Smart Slider」→「Dashboard」を開きます。チュートリアルの動画があります。

1. 「Smart Slider」→「Dashboard」
2. 「GO TO Dashboard」をクリックする

NEW PROJECT へ

NEW PROJECTをクリックすると次の2つから選べます。

• Create new project（新しいプロジェクトを作る）
• Template Sliders（テンプレートを使う）

Smart Slider 無料で利用できるテンプレート

利用したいテンプレートをクリックします。

1. 利用するテンプレートの「IMPPORT」クリック
2. メールアドレスを入力する画面が表示されるがそのまま✖で閉じる
3. 下の画像のようなテンプレートが表示される
4. Slide1をクリック

テンプレートのSlide1を編集する

Slide1の画像を変更する

Slide1をクリックすると次のように「Slide Backgroud」と表示されます。

1. +で画像を選ぶ

Smart Slider 文字の編集とリンクを貼る

Slide1の文字を編集し、文字にリンクを貼ります。文字をクリックすると文字をの編集ができます。

1. Textの文字を編集する
2. LinkにURLを入力するか、+で入力するページを選ぶ
3. Styleタブでフォントの指定ができる
4. リンク先を別ウィンドウで開くか否か（Target Window）選ぶ
5. SAVEをクリックする

テンプレートのすべての文字を編集でき、ボタンのリンクの変更もできます。

STYLEタブでフォント、文字の色、サイズなど指定できます。

リンク先の説明文（長文）はタブレットやモバイルで表示するか否か（ON/OFF）を選べます。

Smart Slider 自動再生の設定

スライダーの編集画面の下方のタブで「Autoplay」を開き、AutoplayをONにし保存します。

プレビュー

右上のプレビューボタンをクリックしプレビューで確認できます。

Smart Slider スライダーを表示する

ショートコード、PHPコード、または投稿記事や固定ページの編集画面でスライダーを追加できます。

• Shortcode（ショートコード）
• Page Builder
• PHP code（PHPコード）

PHPコード

<?php
echo do_shortcode('[smartslider3 slider="番号"]');
?>

番号にはスライダーの番号が入ります。上の画像の場合は２です。

Cocoon にスライダーを設置する

サイトにスライダーを設置するにはいくつかの方法があります。

• テーマエディッタでテーマファイルにPHPコードを貼る
• ウィジェットを利用する
• ショートコードで挿入する
• ブロックエディッタで挿入する

ウィジェットでスライダーを設置する/サイトにスライダーを設置

コンテンツ上部とインデックスリストトップにスライダーを設置した例です。

コンテンツ上部にスライダーを設置

Smart Slider 3 テーマファイルにPHPコードを記述/サイトにスライダーを設置

外観→テーマエディッター→子テーマの表示する部分にPHPコードを貼ります。

• head-insert.php
• main-before.php

どちらかにPHPコードを貼ります。

head-insert.php にPHPコードを記述した場合

main-before.php にPHPコードを記述した場合

「main-before」にPHPコードを貼った場合とウィジェットでコンテンツ上部に設置した場合は少し表示のされ方が違います。

TOPページ・ホームページのみにスライダーを表示させる

TOPページ・ホームページのみにスライダーを設置する場合

<?php
if( is_home() || is_front_page() ){
echo do_shortcode('[smartslider3 slider="番号"]');
}
?>

番号にはスライダーの番号が入ります。

Smart Slider その他の設定

General /サイトにスライダーを設置

• ショートコード・PHPコードの表示
• スライダーの名前の変更
• スライダーのデザインの変更

Size /サイトにスライダーを設置

• スライダーのサイズ
• レイアウトの変更

Controls /サイトにスライダーを設置

• スライダーの矢印やボタンなどのデザインの変更
• バーを表示する
• 影を付ける

Animations /サイトにスライダーを設置

アニメーションを設定する

Autoplay /サイトにスライダーを設置

自動再生の設定

OptimizeとLoading /サイトにスライダーを設置

最適化や遅延の設定

Slides /サイトにスライダーを設置

スライダーの画像のサイズが同一ではない場合の処理の仕方を指定

Smart Slider 3 のインポート・エクスポート

Smart Slider 3 にはインポート・エクスポートがあるので、サイト移転の時も便利です。

Smart Slider 3 のエクスポート

1. ダッシュボード→エクスポートするスライダーを開く
2. 右下のアクションをクリック
3. エクスポートをクリック

Smart Slider 3 のインポート

1. ダッシュボード
2. New Project を追加をクリック
3. import your own files をクリック
4. Upload file の+をクリック
5. ファイルを選ぶ
6. インポートをクリック

MetaSlider /サイトにスライダーを設置

「Smart Slider」よりも簡素なスライダーで設置も簡単です。

• https://wordpress.news-vouge.com/metaslider/

MetaSlider サイトにスライダーを設置する - WordPress

MetaSlider はWebサイトにシンプルで簡単なスライダー・スライドショーを設置できるプラグインです。見え方と設置方法を説明。

wordpress.news-vouge.com

プラグイン公式 Smart Slider 3