lightboxを導入して画像をポップアップ表示させる

まず、前提としてデフォルトでwordpressが導入しているjQueryを捨てる。
理由はバージョンが古いからと無駄に(モダンブラウザでは必要ないから)migrateなどを行っているため。
また、手作業でブログの画像をlightbox化するのも手間なので自動でimgをlightbox化する。
wordpressプラグインを使えばできるのかもしれない。
だがしかしwordpressプラグインの多くはソースを読んでみないとわからないような罠が潜んでたり無駄な事をしていたりするため、
車輪の再開発という誹りを受けても自前でやろうと思う。
そのため当ブログはよほど面倒な動作を目的としない限りwordpressプラグインはなるべく導入しない方向で勧めたいと考えている。

まず必要なのはwordpress自前のjqueryの廃止。
wp-includes/functions.phpに下記を追加してデフォルトのjqueryを無効化し、
CNDから新しめのjQueryを読み込む。
なお、この時is_adminで管理画面は対象外にしないと管理画面が動かなくなる危険性がある。

function load_google_cdn() {
 //jQueryを登録解除
 if(!is_admin()) {
   wp_deregister_script( 'jquery' );
   wp_enqueue_script('jquery','https://code.jquery.com/jquery-2.2.4.min.js',array(),'2.2.4', true);
 }
}
add_action( 'init', 'load_google_cdn' );

上記でjQueryが2.2.4になる。執筆時点での最新2.x系の最新バージョンを利用する。
https://code.jquery.com/
そしてlightboxを適用するために
wp-content/themes/{使ってるテーマ}/header.php
の</header>
あたりに下記を追加する。
念のためすでにaタグでwrapされているimg要素は何もしないようにしている。

<script type="text/javascript">
$(function(){
  $('article').find('img').each(function(){
    var $img = $(this);
    if($img.parent().is('a')) {
      return true;
    }
    var href = $img.attr('src');
    var a = $('<a />')
    a.attr({
      'href': href,
      'data-lightbox': 'groups'
    });
    $img.wrap(a);
  });
})
</script>

element.data()メソッドでlightboxを指定してもいけるかもしれないがそうするとDOMには書き込まれない属性となるためあえてattrでDOMに書き込んでいる。

コメントを残す