レスポンシブWEBデザイン対応で複数設置することができるWordPressのスライダープラグイン「WordPress Slider Plugin」

2014年07月11日
follow us in feedly

WEBサイト制作ではメインビジュアルにスライダーを利用することがあります。

今回はWordPressの便利なスライダープラグイン「WordPress Slider Plugin」のご紹介です。

大きな特長は以下の通りです。

・レスポンシブWEBデザイン対応
・スマートフォンでのスワイプ操作に対応
・複数設置可能
・画像上にキャプション表示が可能

それではスライダーの作成から設置までの説明をします。

「WordPress Slider Plugin」の利用の流れ

「WordPress Slider Plugin」をインストール後、ダッシュボードの「WP Slider」をクリックします。

表示された画面にある「Add New」ボタンをクリックして作成を開始します。

wp slider plugin1

次に表示された画面でタイトルを入力します。

タイトルを入力したら「Add Slide」をクリックします。

wp slider plugin2

続いて「Add Image」をクリックします。

wp slider plugin3

「Add Image」のポップアップ画面が表示されます。

画像をアップロードするかメディアライブラリから画像を選択して[投稿に挿入]ボタンをクリックします。画像を挿入する際、キャプションやリンクURLの設定が可能です。

wp slider plugin4

2枚目以降の画像を挿入するためには「Add Slide」をクリックします。

wp slider plugin5

スライドで使用する画像の挿入が完了したら「Create Slider」をクリックします。

wp slider plugin6

作成するスライダーにはいくつかのオプションが設定できます。

この設定はいつでも変更可能です。Animationはスライドとフェードの2種類です。NavegationあるCaption Boxをチェックすると画像挿入時に設定したキャプションを画像上に表示されます。Linkableはスライダー画像にリンクを貼られます。Thumbnail navigationはスライダー下部にサムネイル画像が表示されます。

wp slider plugin8

スライダーを作成するとShortcodeが出力されます。

wp slider plugin7

出力されたShortcodeをソースに記述する場合には以下のように書きます。

<?php echo( do_shortcode( "[slider id='2563' name='Sample Slide']" ) ); ?>

スライド表示を確認します。

デフォルトで白いボーダーが入ります。気に入らない場合はCSSをいじってください。ボーダーが指定されているclassは「.flexslider」です。

wp slider plugin9

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ