レスポンシブWebデザイン対応のWordPressスライドショープラグイン《WP Slider Plugin》

Web制作テクニック
WP Slider Plugin

WP Slider Plugin》はレスポンシブWebデザインに対応した、ウィンドウ幅に合わせてサイズが可変するスライドショーを実装できるWordPressプラグインです。

今のところ、他のスライドショー系のプラグインでレスポンシブWebデザインに対応し、且つ使い勝手良いものは少ないと思うのですが、こちらは比較的使い易く感じます。

[adsense]

プラグインの入手と有効化

  • こちらのページから simple-slider-ssp.zip ファイルをダウンロードする。
  • プラグインメニューの新規追加で zipファイルをアップロードして有効化する。
  • プラグインを有効化するとメニューに WP Slider が追加されます。

WP Slider Plugin の使い方

WP Slider Plugin

スライダー(スライドショー)の作成

  • メニューから WP Slider 設定画面に入り Add New をクリックして New Slider を作成します。
  • 任意のスライダー名を入力して、Slide Order エリアの + Add Slide をクリックしてスライドコンテンツを作成します。
  • Add Image でスライドさせたい画像をアップロード、もしくはメディアライブラリから選択します。
  • スライドコンテンツを増やす場合は、再び + Add Slide で追加します。
  • 完了したら右サイド Save エリアの Create Slider をクリックしてスライダーを保存します。

スライダー(スライドショー)の設置

スライダーを保存すると Shortcode エリアに下記のようなショートコードが作成されるので、これを固定ページや投稿編集画面に記述します。

[slider id='605' name='スライドショー']

テーマ(php)ファイルに直接書き込みたい場合は、下記のように記述します。

<?php muneeb_ssp_slider( 605 );?>

605の部分は、スライダーを作成したときに割り当てられるIDです。

オプション設定でカスタマイズ

Options エリアの各項目で、スライダーをカスタマイズすることができます。

  • Animation
    スライドの表示方法を選択
  • Slideshow
    自動でスライドさせるか否かを選択
  • Height
    スライダーの高さをレスポンシブにするか固定にするかを選択
  • Width
    スライダーの幅をレスポンシブにするか固定にするかを選択
  • Direction
    スライドさせる方向(水平/垂直)を選択
  • Cycle speed
    スライドの切り替わるまでの時間(秒)を設定
  • Animation speed
    スライドの切り替え速度(秒)を設定
  • Navigation
    各種ナビゲーションの表示を設定

このプラグインの情報

  • この記事で紹介しているバージョン:0.5
  • WordPress のバージョン:3.0 以上が必要
  • 動作確認した WordPress のバージョン:3.4.2
  • ダウンロード先:WP Slider Plugin

この記事を書いた人

2 件のコメント

  1. はじめまして。
    こちらを参考に「WP Slider Plugin」を導入しようと考えています。
    インストールしてテンプレートに追加し、スライドショーが表示されるべき「枠」は表示されているのですが、肝心のスライド画像を追加することができません。
    管理画面の「Add image」でメディアライブラリから画像を追加しようとしているのですが、該当の画像を「表示」⇒「挿入」してもファイル名が追加されないのです。
    私はFirefoxで実行しているのですが、ブラウザの問題でしょうか?因みにIEで同じようにやってもやはりうまくいきません。
    どうかご指導お願い致します。

    • お返事遅くなりました。
      すでに解決済みでしたらすみません。

      お使いのWordPressのバージョンは3.0以上でしょうか?
      もしそれ以下のバージョンの場合は、プラグインが正しく動かない可能性があります。
      またブラウザに関しては、chrome25.0、Firefox15.0、IE8.0でも確認しましたが、正常に動作いたしました。
      もしかすると、各ブラウザでバージョンが古いものは、対応してないのかも知れません。

      以上をご確認の上、再度お試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です