WordPress の thickbox のグループ利用でハマったこと。バグなのか私の使い方に問題があるのか不明。
きっと皆さん問題になってるのだろうと検索したのですが見当たらないってことは、私の環境または使い方に問題があるのかもしれませんが、一応解決したので同じ問題に当たった方はご参考にしてください。ちなみに、有名な(?)「thickbox.js から @マークを取り除く」ってのではないです。これはもちろん対処済みでした。
(なお余談ですが、WordPress は管理画面で jQuery を多用していて、そのライブラリの thickbox も一般の表示でしっかりと利用できるようにサポートされています。スクリプトとスタイルのハンドルを用意するのみならず、それを一度で呼び出してなおかつマルチサイトでも利用できるような関数として add_thickbox という関数まであります。これをヘッダでコールすれば、wp_head, wp_footer の呼び出し時に必要なスタイルシートとスクリプトが呼び出されます。)
単体表示では”ほぼ”問題なく表示されたのですが、グループ化を行った場合に正常に動作しませんでした。
WordPressのバージョンは 3.1.4 ja
この問題を確認できたブラウザは Firefox 5.0、Chrome 12.0.742.112 m
一方でなんと、 IE9 では動作しました。
ブラウザによって異なるってことは結構微妙な問題なのでしょうか。
まず、あまり重要でない箇所の修正を一点
これはグループ化に関わらない問題で、ブラウザ間の解釈の相違もない単純なものです。
thickboxのラッパー部分で使用する画像(「ロード中」のloadingAnimation.gifと、「閉じるボタン」のtb-close.png)のパスが、相対パス指定になってしまってるので、ページによっては正しくロードされません。(サブディレクトリの下にあるページのみ問題が生じます。)
if ( typeof tb_pathToImage != 'string' ) {
var tb_pathToImage = "../wp-includes/js/thickbox/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' ) {
var tb_closeImage = "../wp-includes/js/thickbox/tb-close.png";
}
これはWordPressをデフォルトで使用する場合には問題ないですがパーマリンクをカスタマイズしてURLの階層をひとつでも増やすとNGです。なのでこれは絶対パスに変更せざるを得ないのですが、ここで javascript を用いてURLを決定するコードをあえて書かずに、テンプレートのヘッダに
<script type='text/javascript'>
var siteRootUrl = '<?php echo site_url(); ?>';
</script>
このように記述して、
先ほどの箇所を
if ( typeof tb_pathToImage != 'string' ) {
var tb_pathToImage = siteRootUrl + "/wp-includes/js/thickbox/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' ) {
var tb_closeImage = siteRootUrl + "/wp-includes/js/thickbox/tb-close.png";
}
このように修正。このほうが楽だと思います。siteRootUrl という値をほかのスクリプトでも使えますし。というよりも、たぶんWPのバージョンを変更するたびに修正しなくてはならない部類なので、なるべく変更の量を減らしたほうが良いという考えです。
本題
さて話がそれました。肝心の問題はこれではなく、thickbox を rel 属性でグループ化した場合に正しく表示されないということ。
これは修正箇所は3箇所ありまして、この何が不具合を引き起こしているのかは不勉強なため不明です。また、ブラウザによって挙動が異なるようなので、ブラウザの実装に問題があるのかもしれません。どなたか理由がお分かりの方はお教えくださればありがたいです。
いずれにしても上記の環境では画像は一枚も表示されませんでした。スクリプトをalertなどを使って調べた結果、3点に問題が見つかったという次第です。
まず、1箇所目と2箇所目は同じような修正。
93行目と97行目にある を全て削除。これはデザイン的な空白なのでスタイルシートで余白を取る方向で。なぜこれが不具合を引き起こすのか不明ですが、とにかくこれを削る。(たぶん、’&’が問題。)
つぎに、97行目の <a href=’#'>”+thickboxL10n.prev+”</a> を <a href=’#'>≶前へ</a> に変更。
つまり 97行目は最終的に
TB_PrevHTML = “<span id=’TB_prev’><a href=’#'><前へ</a></span>”;
になります。
これで動くはずですが、気になるので同じように thickboxL10n.next の箇所も変更しておきます。
まとめると次のようになります。
変更前
TB_NextHTML = "<span id='TB_next'> <a href='#'>"+thickboxL10n.next+"</a></span>";
(…略…)
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>"+thickboxL10n.prev+"</a></span>";
変更後
TB_NextHTML = '<span id="TB_next"><a href="#">次へ></span>';
(…略…)
TB_PrevHTML = '<span id="TB_prev"><a href="#"><前へ</a></span>';
[tsuiki]このあと、インライン表示のコードも大幅に書き換えてカスタマイズした結果、半分近くがリライトされたことになってしまい、何がなにやら。。。jQuery の trim 関数が IE8では非サポートだったってことも知ったり。[/tsuiki]
余談ですが、管理画面で呼び出している thickbox はこれとは別です。上記の操作は管理画面には影響しませんので念のため。