スマホ対応の軽量LightBoxプラグイン Swipebox
スポンサーリンク
Welcart対応テーマには3つjQueryのプラグインを入れていますが、その一つがこのjQueryプラグインの「Swipebox」。簡単にモーダルウィンドウ効果(いわゆるLightbox)機能をつけられる、非常に軽いプラグインです。
このSwipeboxは、「現場でかならず使われているWordPressデザインのメソッド(レビュー)」で紹介されていたのをきっかけに知りました。
WordPressのプラグインでもLightbox系のものは多くありますが、私は断然jQuery派です。
jQueryのプラグインを自分で導入すれば、以下のような利点があります。
- 効果が必要ないページでは、スクリプトを読み込ませなくていい
- フッターで読み込み指定出来る
- いらないファイルやデータベースを勝手に生成される心配がない
つまり、ページの読み込み速度を損なわない使い方が出来ます。WordPressプラグインでは、それがなかなか出来ませんので・・・。
Swipeboxのいい所
- プラグイン本体が10kB未満と超軽量(minファイルの場合)
- レスポンシブ・スマホ対応
本家サイトにもデモがありますので、まずは使用感をチェックしてみて下さい。
Swipebox – githab
もくじ
1. Swipeboxをダウンロード
Swipeboxのサイトへ行き、ページ最下部の「Download」からダウンロード。
2. ファイルを使用中のテーマに設置
ZIPファイルを解凍すると、いくつかのファイルが入っています。必要なファイルは、srcフォルダに入っています。
使うのは、そのsrcフォルダに入っている、以下の3つです。
- src/css/swipebox.min.css(スタイルシート・縮小ファイル)
- src/img(アイコンなどが入ったフォルダ)
- src/js/jquery.swipebox.min.js(Swipebox本体・縮小ファイル)
面倒であれば、srcフォルダの中身をまとめてコピーしてしまっても問題ありません。
コピーしたこれらのファイル・フォルダを、使用中のテーマ内に設置(ペースト)します。今回の例では、以下のように設置しました。
設置場所はもちろん自由ですが、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_headとwp_footerが記述されていれば、functions.phpで以下のように書くことによって、スクリプトをwp_headまたはwp_footerで呼び出してくれます。
function my_scripts(){ wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_scripts');
外部ライブラリを使いたい場合は、以下のサイトなどが参考になると思います。
- WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと.net
- WordPress 同梱の jQuery 以外を使う方法 - dogmap.jp
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に導入してみてもいいと思います。
[…] スマホ対応の軽量LightBoxプラグイン Swipebox | Welcart カスタマイズ […]