1)Lightboxが動かない!

今回、1からテンプレートを作成したため、物の見事にプラグインの競合問題により、プラグインを使っての、Lightbox設置が上手くいかず、結局1からゴリゴリ動かす羽目になりました。

恐らく、テンプレートによっては自分で読み込んでいる各種モジュールと競合して、上手くいかない可能性が考えられます。そこで、今回こんな方法で対処しました。

試したプラグイン

  • Easy FancyBox
  • Easy FancyBox for WordPress
  • Lightbox Plus Colorbox

2)そもそも、Lightboxって?

最近…といっても、かなり前から浸透していますが、画像をクリックするとぽーんと開くやつありますよね? あれです。ほんのりオシャレということもありますが、アクセシビリティの観点からもオススメです。

一昔前(といっても、10年以上前ですが……)よく、流動を避けるために新しいブラウザウインドウを開いて、画像表示をさせたりコンテンツ表示をさせていましたが、最近は敬遠されがち。そこで登場したのがこのプラグインです。

3)さて、今回の事例の前提

そもそも、ゴリゴリ思いのままに(いろいろな案件の合間に、半ば遊びながらやっていたため、設計もせずに、あえて行き当たりばったりでやっていました)。ソースを書いていたため、正確な原因はわかりませんが、恐らく次が原因と推定

bootstrapをベースにしたため、具合の悪いところを直した

具体的には、function.phpに、メディアライブラリからの画像挿入について、クラスを付加しています。

さらに、キャプションを入力した際、WordPressが自動的に吐き出す divタグの生成を回避

サイズ指定をdivタグ側でされることにより、表示が完全に狂ってしまいました。そのため、サイズ調整をimgタグのクラスに預けるために、これを取っ払っています。

4)原因はこの辺? それとも……

本来であれば、原因を探らなくてはいけないのですが、あくまで自社サイトなので、そんなのは完全無視です。(というより、いろいろ特殊な組み方した上に、遊びながら書いたコードなので、追っていくのが面倒くさいとも……)

また、同じような事例で苦しまれている方が居るとすれば、「そもそも導入したテンプレートをデバッグして直す」事に抵抗があると思われますので、この方法でさっくりと解消してしまいましょう。

5)ということで、対処方法

  1. 本家からfancyboxのソースを入手
  2. header.phpに記述

wp_header()より前に記述する必要があります。

<link rel="stylesheet" href="fancyboxのcssパス" type="text/css" media="screen" />
	<script src="fancyboxのjsパス" type="text/javascript"></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery("a.single_image").fancybox();
			jQuery("a.group_images").fancybox({
				'transitionIn' : 'elastic',
				'transitionOut' : 'elastic',
				'speedIn' : 600,
				'speedOut' : 200,
				'overlayShow' : true
			});

		});
    </script>

ということで、とてもシンプルな、ただふわーっと浮いて表示させるだけの、Lightboxの完成です。プラグインを導入した場合、プラグインのソースコードをあさって、jQueryとprototype.jsの干渉を回避させるのも難儀ですので、環境によってはこの方法がサクっと解消できるかもしれません。また、プラグインを導入する場合、動作速度などにも懸念を払う時があるので、ともすると、安い・簡単・早いの3拍子そろった、この方法が良いかも知れませんね。あまり、凝ったことをしないのであれば……。
しかしながら、凝ったことをしたいわけです。imgタグをフィルタで捕まえるのはともかく、aタグを捕まえて、せめてキャプションだけでも入れなければ……。と思っていたところ、ふとしたことに気がつきました。Easy FancyBox for WordPress が、jQueryの競合回避もあり、上手くいかないときのセオリー的に出てくるのですが、ひょっとすると今この状態で、こいつを有効にしてやれば動くのではないか? と。

原因としては、Easy FancyBox for WordPressが、正しくfancyboxのcssとjsファイルを読み込んでいない模様。それであれば、プラグインのコードを直すより、暫定案で読み込ませた、fancyboxをそのまま生かしてやればいいじゃないか。

ということで、さっそく Easy FancyBox for WordPressを有効に。テストで画像を挿入したところ……。

無事に動きました。かなり力技ではありますが。

また、本来であればインストールされた Easy Fancybox for WordPressが、正しくimgタグのtitleに追加してくれれば良いのですが、この辺りも上手く動作していなかったので、imgタグにタイトル属性を追加するフィルタで対応。

function my_add_title_attr_image($html, $id, $caption, $title, $align, $url, $size, $alt ){

$attr = 'title="'.$alt.'"';
return str_replace( '<img', '<img '.$attr, $html );

}
add_filter('image_send_to_editor','my_add_title_attr_image',10,8);

 

これで、メディアの「代替テキスト(上級者向け設定の画像タイトル属性)」に入力された内容が、エトキとして表示されるようになりました。どのテキストを表示させるかは、フィルタでケースに応じて変更すると、良いかも知れません。

ただし、かなり特殊な例ですので、全ての環境で正しく動くわけでは無いと思われます。あくまで、このようなアプローチもあるという一例程度にお考え下さい。