友人の美容室のサイトで画面いっぱいに背景画像を表示してくれるjQueryのプラグイン、MaxImageを使用していたのですが、突然表示されなくなってしまいました。
ま、突然ではなく、WordPress3.8.1の更新と各種プラグインの更新をした後にですけど。。。
原因とその後の対応をメモ。
原因はやはりプラグインだった！？
まず、初めに疑ったのが、各種プラグイン。
少し楽しようとプラグインをいくつかのプラグインを使用していました。で、1つずつ停止して検証していくと、ヒットしました。
Easy FancyBoxのバージョン1.5.6
あまり設定せずに簡単にLightbox的な動きが魅力的なプラグイン。
WordPress › Easy FancyBox « WordPress Plugins
このプラグインを外すと、正常に動作しました。
（あくまでも私の環境の場合）
原因がわかったのはいいのですが、これからが大変。。。
いままで投稿したブログの画像にLightbox的な何かを適用しなくては。。。
他の似たようなプラグインでその場をしのぐこともできたのですが、この際、せっかくなので、プラグインなしでやろうかと。。。
まずは、WordPressのプラグインではなく、通常のFancyboxを用意！
Fancybox – Fancy jQuery lightbox alternative
各ファイルを読み込ませて、準備完了。
Fancyboxの設定方法は下記サイトを参考にしてください。わかりやすく説明しています！
で、通常の静的サイトならこれでOKかもしれませんが、
今回はWordPressを導入しているサイトなので、いろいろ弄らなきゃいけません。
次にやったのは、公開済みの投稿の画像の<a>要素にclassを追加
これは、プラグインを使用しました。
WordPress › Search Regex « WordPress Plugins
こちらの使用方法は下記サイトを参照しました。ありがとうございます。
過去の投稿の「Post content」の<a を <a class=”fancybox” に置き換えました。
これで、過去の投稿分はOK。
続いて、これからの投稿に自動的にclass=”fancybox”を追加する設定。
functions.php に下記コードを追加。
投稿時のエディタから画像を投稿し、<a>要素があれば<a class=”fancybox” にするコードです。
//画像にclass
add_filter( 'image_send_to_editor', 'mytheme_image_send_to_editor' );
function mytheme_image_send_to_editor( $html ) {
$class = 'fancybox';
return str_replace( '<a ', '<a class="'. $class. '" ', $html );
}
これで、今後の投稿時の画像についた<a>要素には自動的にclass=”fancybox”が追加されるようになりました。
最後にWordPressのギャラリー機能の分には上記の置き換えプラグインでは対応できなかったので、そちらの対処を
JavaScriptで下記のコードを追加。
$(function(){
$(".gallery-icon a").addClass('fancybox');
$(".gallery-icon a").attr('rel', 'group');
});
.gallery-iconの<a>要素にclass=”fancybox”とrel=”group”を追加する設定にしました。
これで、ようやく動作がおかしくなる前と変わらない環境になりました。
今回感じたこと
やはり、簡単にプラグインに頼るのもどうかなと。。。
運用面だけでなく、セキュリティ面などからもあまり頼りすぎるのもよくないですね。
で、各種バージョンアップの際は慎重かつ、バックアップ後に行うべし。
