[WordPress]メディアファイルへリンクしている画像をLightbox対応する

概要

本文内に挿入した画像のうちリンク先が「メディアファイル」になっているものをすべてLightboxを用いて拡大する必要があったのでその方法の備忘録。

参考URL

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法（memocarilog）

フィルターの内容は上記で紹介してくれているソースを使用。正規表現詳しくなくて……
調整して、下記のソースにした。

add_filter( 'image_send_to_editor', 'addClass' );
add_filter( 'the_content', 'addClass' );
function addClass( $html ) {
  if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
      $html = str_replace( '<a ', '<a data-lightbox="gallery" ', $html );
  }
  return $html;
}

追加点

1行目を追加。
フック「image_send_to_editor」はその名の通り「メディアライブラリから画像をエディタ内に追加するタイミングで」働くので、画像を挿入した後に編集してリンクを追加した場合には働かない。

もしも「メディアを追加」から追加するタイミングで設定を忘れたら対応できないということになるので、「the_content」にもフィルタリングして、本文がそもそも書き出される時に付加してくれるように調整。
これを使用した案件では特定のポストタイプのシングルページでのみ動作させれば良く、Lightboxのファイルの読み込みは条件付きにしたのであまり影響がなさそうだったのでここで落とし所とした。

ギャラリー機能への対応

post_galleryというフィルターフックがあったが出力されるHTMLの変数名などチラと見ただけでわからず、面倒だったのでjQueryで操作しました。
やってることは、似たようなもんです。
「.gallery-item内のaを全部調べて、hrefの中身に画像の拡張子があった場合data-lightbox属性をつける」という内容ですが、ちょっとif文甘い？ギャラリーの中だけだしイレギュラーはない気がするんですけど……

$(".gallery-item a").each( function(){
  var link = $(this).attr('href');
  if( link.match(/(?:png|jpg|jpeg|gif)/g) ){
    $(this).attr('data-lightbox','gallery');
  }
});

以上でございます。