手軽に WordPress にスライダーを追加できる Master Slider

シェアする

masterslider

ブログや Web サイトで画像を表示する手法の一つにスライダーがあります。自動/手動で画像が横にスライドしていくアレです。良く見かけると思います。

これを WordPress 上で簡単に実装する事ができるプラグインが Master Slider です。

スライダーの種類は以下の設定の組み合わせしだいです。

  • サムネイルの有無
  • サムネイルの表示方向
  • テキストの有無
  • 横幅の長さ調節

例えば以下のようなスライダーが作成できます。

Master Slider Template - 3D Wave Carousel

設定項目は細かいので好みのスライダーが作れると思います。多分。

Sponsored Links

Master Slider のインストール

WordPress の管理画面にあるプラグインの新規追加画面より Master Slider で検索すると出てくるのでインストール -> 今すぐ有効化としましょう。

もしくは上記 URL よりダウンロードし、plugins ディレクトリへアップロード、管理画面より有効化しましょう。

Master Slider の使い方

管理画面に Master Slider の項目が出てくるのでそこからスライダーを作成する事ができます。

masterslider-list

一覧画面の左下に作成ボタンがあります。

スライダー作成画面で画像や動画、各スライドの情報などの指定やスライド自体の設定を行う事ができます。

masterslider-create

画像はメディアライブラリより選び、サイズが合わない祭の表示方法(クロップするかなど)を指定できます。

一番左の Slider Settings ではスライダー自体の設定が行えます。

スライダーの名前、横幅、縦幅、自動クロップ/リサイズ、スライダーの動く方向、スピード、スライドショーの挙動、見た目(スキン等)の指定を行う事ができます。

masterslider-settings

設定とは別になってますがスライダーのコントロール方法も設定可能です。

masterslider-control

作成したスライダーは一覧画面にあるショートコードにより記事に貼り付ける事ができます。

masterslider-shortcode

レスポンシブにも対応していてGUIだけでカッコイイスライダーが簡単につくれるのは良いですね。

Sponsored Link

シェアする

フォローする

コメント

  1. SANO より:

    サイト拝見させていただきました!非常に良い印象をうけ、自分のサイトにもmaster sliderを使いたいと持っています。実際にプレビューできるところまでできたのですが、ショートコードを貼り付けても反映されません。ちなみにテーマは自作のものをつかっています。何か考えられる原因がありますでしょうか?まだまだ初心者なので、必要な情報があれば教えていただきたいです。よろしくお願いいたします。

    • ryomatsu より:

      原因がわからないのでショートコードを記述したところに正常に HTML が変換されているか、Chrome 等のコンソールに何かしらエラーが出てないか確認すると良いと思います。

  2. SANO より:

    ryomatsuさん、ありがとうございます。
    サイトには無事スライドショーが表示されたんですが、そのすぐ上に
    表示できない小さい画像みたいなものがでてきてしまったんですが何か原因は
    考えられるでしょうか?

  3. ryomatsu より:

    その現象を見たことがないのでなんとも言えませんね…。

    ブラウザのインスペクターより何を表示しようとしているのか確認すると良いと思います。

  4. SANO より:

    説明不足ですみません。
    ブラウザではこうなっているんですが・・・

    この部分が不要なところを出力しているみたいです。
    なにか方法はありますでしょうか?

    • ryomatsu より:

      普通にブラウザから見ただけではわかりませんね…。Developer tool や Firebug などで確認してみてください。

    • ryomatsu より:

      master slider を設置した直前に閉じられてない img タグがあるようですがそれがどこから出てきたのかを確認したほうが良いでしょう。

  5. SANO より:

    なんとか解決できました。
    <?php master- の前に、<img=src のタグが貼ってあったのが原因みたいでした。
    大変助かりました。
    ありがとうございました。