Wordpress 既存の Thickbox を使ってModalBox を設置
新しいテーマ変更に伴って、Modalbox を設置することにしました。画面の遷移なしに今見ている画面の上に窓を出すやつです。画像においてはLightboxが公開されてからいろいろなスクリプトが公開されていて、いまやどんなサイトでも見ることのできるごく一般的なものになってきましたが、今回はページを呼び出すことにしてみました。
Wordpress の場合、デフォルトでｊQueryとthickboxが備わっているので、テーマファイルの中でそれを呼び出すことで機能を流用することが可能です。このサイトの場合、e-commerce のプラグイン導入の際に、これがスクリプトを書き出してくれるので、そこはカスタマイズなしで thickbox の機能を使っています。thickbox はページやコンテンツだけを抽出して呼び出してボックス内に表示させることもできます。
Modalbox
設置方法は簡単。リンクの設定時に呼び出したいページ名に下記のスクリプトとクラス指定（class=”thickbox”）を追記するだけです。
?KeepThis=true&TB_iframe=true&height=400&width=600
heightとwidthは表示させたい窓の大きさなので、自由に変更できます。
※コンタクトフォームは送信後にそれ自身が画面遷移するため、iFramed Content として呼び出すことにしました。
ModalBox を使うことの利点
画面の遷移がないので、どのページにいてもユーザーが迷うことがないし、読んでおいて欲しいサイトポリシーとか使用上の注意などを読んでもらいやすくなる。
ブラウザの戻るボタンやその他のリンクボタンで元のページ戻った場合、ページ自体が重いと再ロードに時間がかかってストレスがたまる。
とくにショッピングサイトなどの特定商取引法であったり、使用上の注意なんていう項目はページの遷移なしに見れる方がいいような気がします。私の場合、買い物気分満開でカートにポチポチ入れてからこれらのページを見に行った場合、必ずその日のお買い物は保留にすることが多いです。ポップアップウィンドウでもいいんですが、これだと裏で開いてしまったりした場合、閉じ忘れがあったり、タブブラウザだと別タブが開くので面倒です。
ModalBox のちょっとまずい点
元ページのロードが十分出ない場合に飛ばれると素のページが開いてしまい、ブラウザボタンで戻っていただくことになります。。。
Wordpress 既存の Thickbox を使うときの注意点
管理画面用に設置されているのものなので、テーマファイルで利用する場合は
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
というようなスクリプトをheader.php か functions.php に記述します。詳しくは『管理画面のthickBoxを流用する』で紹介されています。
Thickbox の本家サイトでスクリプトをダウンロードして、直接header.phpに呼出しコードを記述してもOKです。
気をつけておきたいのが jQuery 。最近は jQuery ベースのプラグインが多く配布されているので、ページを生成したさいにかぶってないか確認する必要があります。jQuery ファイルは2重に呼び出されると動作しなくなったりします。
またWordpress 既存の jQuery はプロトタイプとの干渉をさけるため、$() を使えないので jQuery() で呼び出す形となります。
せっかくの Thickbox なので画像のポップアップだけでなく、いろんな形で使ってみてはどうでしょうか＾＾
追記：呼び出されるページの方ですが、Analytics とかトラッキングようのスクリプトなどが記述されている場合、ボックスが開いた後いきなりジャンプさせられてしまうという妙な不具合が出たため、これらのページは別にテンプレートを作って呼び出すようにしています。
Leave a Reply