ワードプレスやブログ運営に役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

Smart Slider 3 - 高機能で使いやすいコンテンツスライダーのWordPressプラグイン

このエントリーをはてなブックマークに追加

記事公開 2016.04.18

最終更新 2017.01.07

Smart Slider 3 は、WordPressにコンテンツスライダー機能を拡張できるプラグインです。バージョンアップして更に使いやすくなりました。スライダーにバナー画像・テキスト・リンクなどを配置して一定間隔で切り替え表示ができます。スライダーの上に複数のレイヤーを重ねてレイアウトを自由に編集することもできます。

管理画面の機能が非常に高機能になっており、スライダーを柔軟にカスタマイズ可能です。スマートフォンやタブレット端末に表示内容を自動的に最適化できるレスポンシブWebデザインにも対応しています。スライダーの表示位置はショートコードまたはPHPコードを記述して指定します。

このプラグインは無料版と有料版があります。無料版だけても十分過ぎるほど高機能で使いやすいです。非常に役に立つプラグインなので活用しましょう。

ちなみに、管理画面は全て英語表記です。非常に便利なプラグインですが、使いこなすにはそれなりに英語力が必要です。

はじめに

このプラグインが優れている点

  1. コンテンツスライダーを簡単に作成・管理できる。
  2. スライダーの上に複数のレイヤーを重ねて自由にレイアウトを編集できる。
  3. プラグインの管理画面が高機能で使いやすい。
  4. コンテンツスライダーを表示させる位置はショートコード又はPHPコードで指定できる。
  5. プラグインの管理画面は英語表記ですが、日本語の文言を登録して利用することもできる。
  6. 無料版には機能制限がありますが、十分過ぎるほど高機能で使いやすい。プラグインの有料版も用意されています。本格的に運用する場合は活用しても良いかもしれません。

プラグインの利用イメージ(英語)

動作見本

Smart Slider 3 動作見本

Smart Slider 3 をテストサーバーに設置してみました。実際に動くスライダーをご覧ください。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Smart Slider 3」で検索
  2. WordPress.org からダウンロード

コンテンツスライダーとは?

コンテンツスライダーは、大きなバナー画像をスライド表示させ、Webサイトの訪問者に見てもらいたい記事や情報をアピールする際に用いられます。訪問者を特集記事やおすすめ記事に誘導する役割があります。Webサイトのトップページなどでよく利用されています。

ちなみに、コンテンツスライダーの名称は「スライダー」「カルーセル」とも呼ばれます。基本的に同じものとお考え下さい。

プラグインの使い方

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 > Smart Slider

サンプルデータ

見本として初期状態から1つのスライダー(Sample Slider #1)が用意されています。初めての方は、そのサンプルを編集して利用するとプラグインの使い方に慣れるのに役立ちます。

Smart Slider

スライダーの新規作成

新規作成ボタン

スライダーを新規作成する場合は「CREATE SLIDER」をクリックします。(上記画像参照)

スライダー生成

スライダーの名前やサイズを指定し、予め用意されたデザインパターンの中からデザインを指定します。「CREATE」をクリックするとスライダーが生成されます。

スライダーの作成

管理画面の使い方

プラグインの使い方を簡単に説明すると、左側にある「ADD IMAGE SLIDE」ボタンからスライダーに登録する画像を登録します。

その次に、スライダーにレイヤーを追加してテキストやボタンなどを配置します。デザインやアニメーション効果なども細かくカスタマイズできます。自分の好みに合わせて設定をカスタマイズしましょう。

とりあえず、いろいろ自分で設定を触ってみて慣れましょう。

管理画面の使い方

レイヤーを自由に編集できる

スライダーのスライドを選択すると、新しいレイヤー(階層)を追加・編集できます。

追加したレイヤーの中に画像(Image)やテキスト(Heading, Text , Button)を自由に配置できます。サイズやカラーなども細かく指定できます。

レイヤーを自由に編集できる

表示位置の指定

設定を保存すると、スライダーを表示させる為のショートコードが表示されます。それを表示させたい記事に貼り付けて利用します。

テンプレートに表示位置を指定する場合は、PHPコードを利用します。PHPコードを利用してテンプレートに直接コードを記述すれば、トップページなどにスライダーを表示させることもできます。

ショートコード

ショートコード

ショートコードの挿入

作成したスライダーは、ビジュアルエディタとテキストエディタから記事にショートコードを簡単に挿入できます。

ビジュアルエディタ

ショートコードの挿入方法

まとめ

Smart Slider 3 は、WordPressにコンテンツスライダー機能を拡張できるプラグインです。バージョンアップして更に使いやすくなりました。スライダーにバナー画像・テキスト・リンクなどを配置して一定間隔で切り替え表示ができます。スライダーの上に複数のレイヤーを重ねてレイアウトを自由に編集することもできます。

このプラグインは無料版と有料版があります。無料版だけても十分過ぎるほど高機能で使いやすいです。トップページにコンテンツスライダーを配置したい場合に活用すると役に立ちます。非常に便利で役立つプラグインなので活用しましょう。

スポンサーリンク

最後までお読み頂きありがとうございます

ネタワンは皆様の善意に支えられています。
この記事の内容が役に立ったと思ったら、記事をソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

    • はるか
    • 2016年 7月 06日

    こんにちは。

    私はホームページ作成が初めてで、どのサイトを見ても難しく手こずっていたのですが、こちらのさいとはわかりやすく丁寧でいつも助けていただいています。

    Smart slider3について1つ質問なのですが、サイトのテンプレートに直接貼り付ける方法、トップページとなるところにスライドを貼り付ける方法として、PHPコードの紹介をされていたのですが、なにせ初心者なものでコードの貼り付け方、貼り付け場所が全く分かりません。もう少し詳しく教えていただけないでしょうか。

    お忙しいところ申し訳ありませんが、よろしくお願いいたします。

      • ネタワン管理人
      • 2016年 7月 06日

      こんにちは。
      PHPコードを利用してテンプレートに直接記述する方法は、初心者には難しいですよ。
      WPテーマごとに仕様が異なるので、手順を説明するのが難しいです。

      どうしてもやりたい場合は、WordPressテーマのカスタマイズ方法を解説した入門書を購入し、WordPressテーマの仕組みを勉強しましょう。

CAPTCHA


ネタワンを購読する

  • Twitter
  • Facebook
  • Google Plus
  • Feedly
  • RSS
  • Push7

初心者向け

WordPress使い方ガイド
WordPress入門

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

CORE(TCD027)

WordPressテーマ「CORE (TCD027)」

マガジンスタイルのメディアサイト(ポータルサイト)を構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら