スマホ対応の軽量LightBoxプラグイン Swipebox

スポンサーリンク

Welcart対応テーマには3つjQueryのプラグインを入れていますが、その一つがこのjQueryプラグインの「Swipebox」。簡単にモーダルウィンドウ効果(いわゆるLightbox)機能をつけられる、非常に軽いプラグインです。

このSwipeboxは、「現場でかならず使われているWordPressデザインのメソッドレビュー)」で紹介されていたのをきっかけに知りました。

Swipebox公式サイト

WordPressのプラグインでもLightbox系のものは多くありますが、私は断然jQuery派です。

jQueryのプラグインを自分で導入すれば、以下のような利点があります。

  1. 効果が必要ないページでは、スクリプトを読み込ませなくていい
  2. フッターで読み込み指定出来る
  3. いらないファイルやデータベースを勝手に生成される心配がない

つまり、ページの読み込み速度を損なわない使い方が出来ます。WordPressプラグインでは、それがなかなか出来ませんので・・・。

Swipeboxのいい所

  • プラグイン本体が10kB未満と超軽量(minファイルの場合)
  • レスポンシブ・スマホ対応

本家サイトにもデモがありますので、まずは使用感をチェックしてみて下さい。

Swipebox – githab

もくじ

  1. Swipeboxをダウンロード
  2. ファイルを使用中のテーマに設置
  3. Swipeboxを動かすjsファイルを作成
  4. functions.phpでファイルの読み込み
  5. まとめ

1. Swipeboxをダウンロード

Swipeboxのサイトへ行き、ページ最下部の「Download」からダウンロード。

2. ファイルを使用中のテーマに設置

ZIPファイルを解凍すると、いくつかのファイルが入っています。必要なファイルは、srcフォルダに入っています。

Swipeboxの解凍フォルダ

使うのは、そのsrcフォルダに入っている、以下の3つです。

  • src/css/swipebox.min.css(スタイルシート・縮小ファイル)
  • src/img(アイコンなどが入ったフォルダ)
  • src/js/jquery.swipebox.min.js(Swipebox本体・縮小ファイル)

面倒であれば、srcフォルダの中身をまとめてコピーしてしまっても問題ありません。

コピーしたこれらのファイル・フォルダを、使用中のテーマ内に設置(ペースト)します。今回の例では、以下のように設置しました。

Swipeboxを使用中のテーマに設置

設置場所はもちろん自由ですが、css(スタイルシート)でimgフォルダ内のアイコンなどを読み込むため、位置関係には注意して下さい。

3. Swipeboxを動かすjsファイルを作成

次に、Swipeboxをページ内の画像に適用させるためのjQueryを書きます。ここはプラグインを紹介していた先述の「現場でかならず使われているWordPressデザインのメソッド」での方法とほぼ同じです。

今までは</head>直前に書く方法で紹介していましたが、今回はちょっとレベルアップして、jsファイルを別に用意して、それを読み込ませるようにしてみましょう。

テキストエディターの新規ファイル作成で、以下のjQueryを記述します。

jQuery(function($) {
	$('a[href$=jpg]').swipebox();
});

これは<a>リンクがつけられているjpg画像に、swipeboxを適用させるという命令です。

このファイルに「use-swipebox.js」というファイル名(ファイル名は任意)をつけて、テーマフォルダ内のjsフォルダに保存。

※もしこの方法がわかりにくければ、上記のコードを</head>直前に直接書き入れてもOKです。ただしコードを<script></script>で挟んでください。

4. functions.phpでファイルの読み込み

4-1. jQuery本体の読み込み

jQueryはWordPress本体に組み込まれています。テーマ内にwp_headwp_footerが記述されていれば、functions.phpで以下のように書くことによって、スクリプトをwp_headまたはwp_footerで呼び出してくれます。

function my_scripts(){
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

外部ライブラリを使いたい場合は、以下のサイトなどが参考になると思います。

jQueryは、wp_enqueue_scriptのカッコ内の書き方によってはwp_footerで読み込ませることも可能(デフォルトではwp_headで読み込み)ですが、Welcartを利用する場合、jQuery本体をフッターで読み込むとWelcartがうまく動作しなくなるため、ヘッダーで読み込ませるようにしたほうが無難です。

4-2. Swipeboxの読み込み

次に、同様にしてSwipeboxのスタイルシート・本体・動作用ファイルを読み込ませるコードを追加します。

今回は、「投稿ページ(商品ページ)でのみSwipeboxを適用」させたいので、「表示されているページが投稿ページの場合」の条件分岐を使います。

先ほどのコードに、以下のハイライト部分を追加。スタイルシートの読み込みにはwp_enqueue_styleを使います。

function my_scripts(){
	wp_enqueue_script( 'jquery' );
	if( is_single() ){
        	wp_enqueue_style( 'swipebox-style', get_template_directory_uri() .'/css/swipebox.min.css', 'all');
        	wp_enqueue_script( 'swipebox', get_template_directory_uri() . '/js/jquery.swipebox.min.js', array(), '1.2.9', true);
        	wp_enqueue_script( 'use-swipebox', get_template_directory_uri() . '/js/use-swipebox.js', array(), '1.0',  true);
	}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

ちなみに、ここではSwipebox本体と動作用ファイルは、フッターで読み込ませるようにwp_enqueue_scriptのカッコ内の最後のパラメータをtrueにしてあります。

固定ページなどでも読み込ませたい場合は、条件分岐のところ(上記コードの3行目)をif( is_singular())にすればOK。

これで全てのファイルの読み込み設定が完了です。投稿ページ(商品ページ)で動作するか、確認してみて下さい。

5. まとめ

Swipeboxは、とにかく軽量なのが有難いjQueryプラグインです。何よりスマートフォンにも対応されているのはいいですね。WordPress用のLightbox系プラグインにしっくり来ない方は、使ってみては如何でしょう。

他にもLightbox系のjQueryプラグインは色々とあるので、好みのものを同じようにしてWordPressに導入してみてもいいと思います。

One Response to “スマホ対応の軽量LightBoxプラグイン Swipebox”

  1. […] スマホ対応の軽量LightBoxプラグイン Swipebox | Welcart カスタマイズ […]

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.