WordPressでレスポンシブでスマホ対応なlity.jsをギャラリーや画像に使って綺麗に表示させるコードをfunctions.phpに書く!

lity.jsいいよー

クリックで画像が拡大されるJavascriptライブラリは、代表的なlightboxなど数多くあります。
その中でもカッコよくシンプルに画像拡大表示するjQueryライブラリが「lity.js」です。

lity.jsはレスポンシブにも対応しており、コードもとても軽いのでなかなか良いです。
スマホ環境でもおすすめ。

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.

そんなlity.jsをWordpressで使う手段として、手軽に実装できる方法は下記のWordpressプラグインを使うことです。

ご提供いただき大感謝!

WordPressで投稿画像とかギャラリーとかで使いたい!

一方で、何らかの事情でプラグイン使えないとか、テーマファイルに直で書いてある!って方もいると思います。
そんな、Wordpressでlity.jsをギャラリーや画像に使って綺麗に表示させるためのコードをメモしておきます。

lity.jsのダウンロード&設置は済ませておき、
Wordpressテーマファイルのfunctions.phpに書きます。

一般投稿画像用

// lityカスタムタグを挿入 一般投稿画像用
add_filter( 'image_send_to_editor', 'image_lity', 10 );
function image_lity( $html ){
$html = preg_replace( '/a href=/', 'a data-lity href=', $html );
return $html;
}

ギャラリー用

// lityカスタムタグを挿入 ギャラリー用
add_filter( 'wp_get_attachment_link', 'image_lity2', 10 );
function image_lity2( $html ){
$html = preg_replace( '/a href=/', 'a data-lity href=', $html );
return $html;
}

画像リンクのaタグを書き換えて「data-lity」をぶっこむ感じです。
一般用とギャラリー用一緒でもいいんですが、分けて書いておきました。

実行は自己責任でお願いします!

caay
最後まで読んでいただきありがとうございました!
こんな感じであまり気張らず、ダラダラと、楽しんでやっています。
どうぞよろしくお願いいたします。

もしちょっとでも!ほんのちょっとでも興味を持っていただけたなら!
下のボタンよりフォローお願い致します。
小躍りしながら喜びます!