WEB

WordPressのページにスライダーを追加してみよう「Smart Slider 3」

ワードプレスでスライダーを導入したい場合、プラグイン「Smart Slider 3」を使うことで直感的な操作で簡単にスタイリッシュなスライダーを導入することが出来ます。

Smart Slider 3とは

Smart Slider 3はノーコードでトップページやページ途中など、好きなところに簡単にスライダーを設置できるプラグインです。

  • トップページのメイン画像をスライダーにしたい
  • 固定ページや記事の任意の場所にスライダーを設置したい
  • サムネイル付きのスライダーにしたい

などが簡単に出来ます。

Smart Slider 3の公式ページ

Smart Slider 3をインストール

WordPress管理画面から、プラグインの新規追加で「Smart Slider 3」と検索をしてインストール、有効化します。

新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。

Smart Slider 3を使ってみる

有効化できるとワードプレスの管理画面に「Smart Slider」のメニューができ、選択すると「GO TO DASHBOARD」を選択していきましょう。

「NEW PROJECT」を選択します。

「Create a New Project」（新規作成）を選択します。

※右側のStart with a Templateは、テンプレートから作成する場合になります。

Project Typeで「スライダー」を選択します。

※ブロックは単体の画像選択になりますので、今回は使用しません。

Slider Typeでシンプルを選択します。
※カルーセルスライダーとショーケースについては有料版で使用が可能となります。

設定で
・プロジェクトの名前
・サイズ
の設定をし、「作成」を選択します。

「スライドを追加」を選択します。

今回は画像のスライダーを作ることが目的ですので、「画像」を選択していきます。
「画像」を選択するとメディアライブラリが開きますので、好きな画像を選択して見ましょう。

※今回はこのサイトの過去のブログのアイキャッチ画像をサンプルとして使ってみます。

同じ要領で画像を選択していくと図のようになります。
図例では3つの画像を選択してみました。

それぞれの画像の右上を選択するとメニューが出現し、画像の削除等が出来ます。

プロジェクトは自動保存されるので、そのまま閉じても問題ありません。

スライダーを記事に入れてみよう

クラシックエディターの場合

「Smart Slider 3」のアイコンを選択してみましょう。

作ったプロジェクトを選択し、右上のINSERTを選択します。

挿入されるとショートコードが自動的に入ります。
これで記事や固定ページに挿入されたことになります。

Gutengerg(ブロックエディター)の場合

プラスボタンから「Smart Slider 3」を選択します。

「Select Slider」を選択します。

作ったプロジェクトを選択し、右上のINSERTを選択します。

挿入されると、Gutengerg(ブロックエディター)の場合は、ビジュアルで挿入されていることが分かります。

ショートコードで挿入する

SiteOriginやテーマ依存のページビルダーを使用している場合、Smart Slider 3のアイコンやメニューが存在しない場合があります。そのような場合は、ショートコードを使うことで簡単に挿入することが出来ます。

ワードプレスの管理画面のSmart Sliderからダッシュボードに移動し、作成したスライダーを選択します。

左下にある「ショートコード」からショートコードをコピーして、対象の記事や固定ページの入れたい箇所に挿入しましょう。

実際の表示例

クラシックエディター、Gutengerg(ブロックエディター)、ショートコードであっても、以下の様に挿入することが出来ます。

カスタマイズしてみる

ここからのカスタマイズは、「ワードプレスの管理画面＞Smart Slider＞ダッシュボード＞対象のスライド」を選択している状態から中央より下部の操作をします。

一般設定

プロジェクトの名前などの設定変更が出来ます。

Size

スライダーサイズ ・縦横比を考慮し適切な設定をしましょう。
・スライド幅の制限を、デスクトップ・タブレット・モバイルでのON/OFF設定が出来ます。
Breakpoints ブレークポイントの任意設定が可能です。
レイアウト 「Boxed」「全幅」から設定ができます。
※全幅にして全幅を強制をONにすると、対象箇所の幅設定に関係なく、全幅表示させることも可能です。

操作

一般設定 ・ドラッグ方法「無効」「水平」「垂直」から選択できます。
※水平が一般的です。
・Mouse Wheel
マウスのホイール操作に連動させるかです。
・キーボード
キーボード操作を有効にするかです。
矢印 有無を設定し、矢印の色やサイズの調整が可能です。

その他にもページコントロールやテキストバー、サムネイル、影の設定が可能です。

アニメーション

Main Animation アニメーションの方法と切替速度の設定が可能です。

バックグランドのアニメーション設定も可能です。

自動再生

自動再生のON/OFF
自動再生の細かな設定が可能で、再生ボタンの設定も可能です。

最適化

ロードタイプやスライドの背景設定が可能です。

スライド

スライドの画像の表示方法を設定できます。

開発者

開発者向けの設定が可能です。
基本はデフォルトのままで大丈夫です。

画像のカスタマイズをしてみる

カスタマイズしたい画像を選択します。

左側のメニューから
「見出し、テキスト、画像、ボタン、カラム」の挿入をすることが出来ます。

「スライド＞コンテンツ」からはリンクの設定をすることも可能です。

「スライド＞スタイル」からはSEO対策として画像にaltやtitleの設定することも可能です。

さいごに

機能がかなり多いため、説明を割愛した部分はありますが、今回の説明に至る部分は全て無償範囲で使える機能になります。
様々なスライダーのプラグインが存在していますが、ここまで細かい設定をできるスライダーのプラグインは中々ないかと思います。

見出しやテキストなんかも入れてみて色々とカスタマイズしてサイト似合うようなものを作ってみてください。
少しガチャガチャといじってみたサンプルを以下に入れてみましたので、こんなことが出来るんだなぁと参考にしてもらえたらと思います。

応用して使えばブランクの背景を作って、好きな画像をいれて画像ごとにリンクを掛けたりなんてことも出来てしまいます。
どこでも簡単に柔軟に入れらますし、無償で使える範囲だけでも十分すぎるとっても便利なプラグインです。

関連記事

TOP