福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月17日 タグ:

レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin

レスポンシブなスライダー WordPress Slider Plugin の導入手順をご紹介します。 このスライダープラグインは、余計な装飾がなくて、設置も簡単。
しかも複数設置・テキスト挿入ができるので気に入っています。

おもな特徴と機能
レスポンシブ対応
高さ・幅のレスポンシブ/固定の選択可
キャプションの挿入ができる
複数設置ができる
アニメーションは、スライド・フェードの2種類
スライドの自動/手動の選択可
スライド方向、縦/横の選択可
アニメーション間隔・動作スピードの設定
以下のナビゲーションのON/OFF
  • Pagenation
  • Previous/Next
  • Kysbord navigation
  • Touch swipe
  • Linkable
  • Pause on hover
  • Thumbnail navigation
INDEX
  1. プラグインのインストール
  2. スライダーの作成
  3. スライダーオプション設定
  4. スライダーを表示するショートコード
  5. ショートコードをソースに書く場合
  6. 複数設置について
  7. Custom Field Template カスタムフィールドテンプレートを使っている場合の注意点
  8. 【追記】プラグインの読込みを制御する場合

プラグインのインストール

まずは、WordPress Slider Pluginをインストールして有効化します。
※プラグインのインストール方法については ▶コチラ

有効化すると、ダッシュボードのサイドメニューに WP Sliderというメニューが追加されるので、そちらをクリックします。

WordPress Slider Plugin導入手順1

▲ PAGE TOP

スライダーの作成

スライダーを新規作成します。Add Newをクリックします。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 1

* * *

ADD New Slider画面に切り替わるので、タイトルをいれて、+Add Slideをクリック

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 2

* * *

パネルが開くので、スライダーに挿入したい1枚目の画像を設定します。

Slide Label
スライドさせる一枚目の画像タイトルを入れる箇所ですが、そのままでOKです。
Slide Type
画像かボックス要素を選択できますが、ボックス要素は有料オプションのようなので、IMAGEのままで。
Slide Image
Add Imageをクリックしてスライダーに挿入したい画像を設定します。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 3

* * *

ここで、何もせず最後の赤枠投稿に挿入をクリックして、次に移動しても大丈夫です。
一応簡単に赤枠の入力個所の説明をしておきます。

タイトル
メディアライブラリのタイトルになります。
代替えテキスト
HTML、img要素のalt属性の値になります。
キャプション
オプションでテキストの挿入ができますが、ここに記入したものがそのテキストになります。
リンクURL
オプションで画像にリンクを張る事ができますが、そのリンク先URLになります。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 4

* * *

一枚目の画像の設定が終わったら、ここでこのスライダーを保存しておきます。
ここで保存せず枚目以降の設定もできますが、何かトラブル等があった場合、全てなくなりますので、念のために最初の画像の設定がおわったら、スライダー自体の保存をお勧めします。

保存は、右サイドバー上部のSaveボックスのCreate Sliderをクリッックします。これでとりあえずこのスライダーは保存されました。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 5

* * *

つづけて、1枚目同様2枚目以降を設定していきます。
各画像の編集削除は、下図のEdhit SliderDelete Sliderをクリックします。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 6

* * *

画像の順序変更は、カーソルを移動したい画像パネル部分の左の方にもっていくと、カーソルが十時キーに変わりますので、ドラッグ&ドロップで変更してください。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 7

▲ PAGE TOP

スライダーオプション設定

スライダーのオプションパネルの説明です。項目の説明は下図の次に記載してあります。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 8

Skin
スライダーのデザインを選択。デフォルト以外は有料オプション
Animation
画像の切替りの動作を選択。スライド/フェード
Slideshow
画像の切替りを自動で行うかどうか。Yes/No
Height
スライダー自体の高さの伸縮を選択。レスポンシブ/固定
Width
<スライダー自体の幅の伸縮の選択。レスポンシブ/固定/dd>
Direction
スライドの方向を選択。水平方向/縦方向
Cycle speed
画像の切替り感覚を入力。秒単位
Animation speed
画像の切替りの動きの早さを入力。秒単位
Navegation
ナビゲーションタイプを設定。複数選択可
Pagenation
スライダー下部に表示される、画像枚数に合わせたサークルの出力
Previous/Next
スライダー両端に表示される、次へ/前へボタンの出力
Kysbord navigation
キーボードので操作可能にする
Touch swipe
スマートフォンなどで、スワイプ(タッチによる操作)を可能にする
Linkable
スライダー画像にリンクを貼る
Pause on hover
マウスオーバー時、スライダーの動作を止める
Thumbnail navigation
スライダー下部にサムネイル画像を出力する

一通りの設定が終わったら、右サイトパネル Save boxのUpdate Sliderをクリックして保存/更新します。

▲ PAGE TOP

スライダーを表示するショートコード

スライダーを保存すると、下にShortcodeというボックスが現れますので、[……….]をコピーして、スライダーを表示したい場所に貼付けるだけです。

投稿 レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin 9

▲ PAGE TOP

ショートコードをソースに書く場合

ソースコード中に貼付ける場合は、下のコードを記述します。

▲ PAGE TOP

スライダーを複数作る

WordPress Slider Plugin は、スライダーを複数作成できます。
作成は、スライダーの作成に戻って、新しいスライダーを作成します。
↓のスライダーのように、スライダーごとに画像の大きさを始め、オプション設定を変える事ができます。

  • Monitor
  • Camera

▲ PAGE TOP

Custom Field Template カスタムフィールドテンプレートを使っている場合の注意点

少しマニアックな話ですが、一度はまったことがあったので、注意事項としてご紹介しておきます。

WordPressプラグインで Custom Field Template という、カスタムフィールドをとても使いやすくしてくれる有名なプラグインがあります。
このプラグインと、WordPress Slider Pluginは相性が悪いようで、Custom Field Templateを有効化していると、スライダーの画像の追加ができなくなります。

とても便利な両プラグインなので、どちらかを辞める?ということになるとおもったのですが、画像追加時のみ Custom Field Template を停止することで回避できました。

根本的なところの解決をお伝え出来なくて申し訳ありませんが、参考にしていただければと思います。

この解決方法や、もっといいスライダーあるよ〜という方は、是非おしえてください。

▲ PAGE TOP

【追記】プラグインの読込みを制御する場合

プラグインの多くは全てのページで読み込まれるのが基本です。ですが一カ所でしか使用していないスライダーのスクリプトを全ページで読み込ませるのはページ表示速度などを遅くする一つの原因となります。
そこで、必要なページだけで本プラグインを読み込む方法をご紹介します。

functions.phpに記述
↑の記述では、トップページのみでスライダープラグインを有効にする場合です。
他のページを指定する場合は、4行目の "/"部分を変更します。

▲ PAGE TOP

コメント

「レスポンシブで簡単に複数設置できるWordPress スライダープラグイン WordPress Slider Plugin」への1件のコメント

  1. Pingback:Slider | frogotope

コメントを残す

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

FB Comment 試験中