画像を拡大表示させる、LightboxやFancyBoxというプラグイン。
テーマの構造やカスタマイズによっては正常に動かないことがあります。

そこで、どんな構造のテーマでも問題なく動くとの触れ込みが多い「Responsive Lightbox & Gallery」を試してみましたが、完全にはまってしまいました。

今回は応急処置的ではありますが、なんとか動かせるようにした方法を紹介します。

問題と解決法

画像のリンク先が「メディアファイル」になっているか確認し「Responsive Lightbox & Gallery」プラグインをインストールして有効化 (ON/OFF機能は無いので、有効化させると自動で適用されます)
ですが、画像をクリックしても拡大表示がされません。

そこで、WPから吐き出されているソースを確認すると、本来 aタグに 自動で付与されるはずの、data-rel 属性がありませんでした。

具体的にはこういった状況です。

<!-- 理想 -->
<a href="https://xxx.com/wp/wp-content/uploads/sample.jpg" data-rel="lightbox-image-0">
<img src="https://xxx.com/wp/wp-content/uploads/sample.jpg"/></a>

<!-- 現状 -->
<a href="https://xxx.com/wp/wp-content/uploads/sample.jpg">
<img src="https://xxx.com/wp/wp-content/uploads/sample.jpg"/></a>

そこで、data-rel=”lightbox” というパラメーターを編集画面のテキストエディタで自分で書き加えてみると正常に拡大表示できるようになりました。

※正常に動作している場合、lightbox-image-0という値が付与されますが、プラグインの動作がわからないため lightbox としてみました。(-image-0部分は恐らくギャラリー機能やグループ分けの際に更新されるのでは?と思いますが未検証)

注意点

テストとして他のテーマでこのプラグインを使ってみると、data-rel パラメーターは正常に付与されていました。正常に動くテーマと、今回問題が起こったテーマの差異を切り分けて検証してみましたが、根本的な違いは今の所発見できていません。なのであくまで応急処置的な解決方法として理解していただければと思います。

【追記】
公式フォーラムでパラメータ付与について言及している質問がありましたのでご参考まで。
https://wordpress.org/support/topic/about-using-this-plugin-with-nextgen-gallery/
https://wordpress.org/support/topic/open-single-image-in-lightbox/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です