シンプルで軽い画像拡大jQueryライブラリ「Lity.js」をWordPressで利用するカスタマイズ方法

僕はこれまで、画像拡大するjQueryライブラリはLightboxを使っていました。

ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordPressで使う方法

今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用...

nelog.jp

2015-01-02 16:20

Lightboxは、手軽に使えて、画像リンクをいい感じで拡大表示してくれます。

ただ昨日、以下の記事で「Lity.js」を知りました。

http://iritec.jp/web_service/11134/

iritec.jp

これがまた、機能が限られている分、シンプルで軽く、設置も簡単そうな素晴らしいjQueryプラグインでした。

なので、Wordpressテーマをカスタマイズして手軽に利用できればと、コードを書いてみたのでその方法の紹介です。

Lity.jsとは

Lityは、とにかく軽い、レスポンシブのライトボックス（画像拡大）jQueryプラグインです。

言葉で説明するよりも、実際のものを見た方がわかりやすいので、以下の画像クリックしてライトボックス動作を確認してみてください。

こんな感じに、小さめの画像をブラウザの画面幅いっぱいに拡大表示してくれるjQueryのライブラリです。

加えて、Lityは「YouTube動画」、「Viemo動画」、「Googleマップ」のページ内表示にも対応しています。

以下のようなリンクをクリックすると、動画や、マップなどがライトボックス表示されます。

以下では、このLityのWordpressでの設置方法を紹介したいと思います。

Lityを設置する主な手順

Lityを、Wordpressテーマ内で利用するには、主に以下のような手順が必要です。

Lityファイルのダウンロード＆設置
Lityファイルの呼び出し
Lity呼び出し用のHTMLタグを書く

主な手順で言えば、たった3手順です。

しかも、ほとんどコピペでできてしまうので、かなり簡単に設置できます。

Lityファイルのダウンロード＆設置

まずは、Lityの「Download」ボタンからファイルをダウンロードします。

GitHubサイトになるので、環境に合わせてダウンロードするファイルを選びます。

僕はWindowsなので、ZIPファイルを選択し、「lity-x.x.x.zip」といった感じのファイルをダウンロードしました。

あとは、ファイルを解凍し中にある以下の2つのファイルを取り出します。

dist/lity.min.css
dist/lity.min.js

上記の2つのファイルを、Wordpressテーマ（子テーマ）内に以下のようにコピペなどで設置します。

css/lity.min.css
js/lity.min.js

「css」、「js」フォルダがない場合はテーマフォルダ内に作成する必要があります。

これで設置は完了です。

Lityファイルの呼び出し

あとは、Wordpressテーマ内でLityのCSSファイルとJSファイルを呼び出します。

CSSファイルの呼び出し

CSSファイルは、<head></head>内で以下のように呼び出します。

<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/lity.min.css" rel="stylesheet">

JSファイルの呼び出し

JSファイルは、</body>タグ手前で以下のように呼び出してください。

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/lity.min.js"></script>

大抵のWordpressなら既にjQueryが呼ばれているので、必要ないと思いますが、jQueryを使用していないテーマなどでは、jQueryの呼び出し部分のコメントを外してください。

既に、テーマからjQueryが呼び出されている場合は、コメント部分は削除してもOKです。

子テーマでの呼び出し、親テーマでの呼び出し

今回は、子テーマをカスタマイズすることを前提として、テーマディレクトリの呼び出し関数として以下を使用しました。

<?php echo get_stylesheet_directory_uri(); ?>

ただ、親テーマを作成していたり、直接カスタマイズしている場合は、以下の関数を利用してください。

<?php echo get_get_template_directory_uri(); ?>

Lity呼び出し用のHTMLタグを書く

最後に、Aタグの中に、「data-lity=””」という属性を加えるだけでLityのライトボックスを利用することができます。（※「data-lity」のみでもOKです）

手入力で書き加える時

WordPressの投稿欄などからHTMLを書いて利用するときは以下のように書きます。

<!--外部サーバーからでも呼び出せる-->
<a href="//wp-simplicity.com/wp-content/uploads/2015/09/HNCK7829.jpg" data-lity="">外部の画像</a>
<!--YouTube動画をiframeで呼び出せる-->
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity="">iFrame Youtube</a>
<!--Vimeo動画をiframeで呼び出せる-->
<a href="//vimeo.com/1084537" data-lity="">iFrame Vimeo</a>
<!-- Googleマップを呼び出せる -->
<a href="//www.google.co.jp/maps?q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%8B%E8%B0%B7%E9%A7%85" data-lity="">Google Maps</a>

※Googleマップは、「//www.google.co.jp/maps?q=東京駅」とか「//maps.google.com/maps?q=1600+Amphitheatre」などのような形式で呼び出すタイプでしか利用できないようです。

詳しいコードの書き方は以下。

Google Mapsを使ってみよう

www.shurey.com

関数から自動で書き加える時（functions.phpの編集）

ただ毎回投稿で、手入力でAタグに「data-lity=””」を付け加えるのは面倒くさいかもしれません。

そういった場合は、functions.phpに以下のようなコードを記述することでLityでライトボックス表示できるAタグに「data-lity=””」を自動で付加してくれます。

//画像リンクのAタグをlityに対応するように付け替え
//http://sorgalla.com/lity/
function add_lity_property( $content ) {
  //プレビューやフィードで表示しない
  if( is_feed() || is_preview() || wp_is_mobile() )
    return $content;

  //既に適用させているところは処理しない
  if ( false !== strpos( $content, 'data-lity=""' ) )
    return $content;

  //画像用の正規表現
  $img_reg = '\.jpe?g|\.png|\.gif|\.gif';
  //YouTube用の正規表現
  $youtube_reg = '\/\/www\.youtube\.com\/watch\?v=[^"]+';
  //Viemo用の正規表現
  $viemo_reg = '\/\/vimeo\.com\/[^"]+';
  //Googleマップ用の正規表現
  $google_map_reg = '\\/\/[mapsw]+\.google\.[^\/]+?\/maps\?q=[^"]+';
  //Aタグを正規表現で置換
  $content = preg_replace(
    '/<a([^>]+?('.$img_reg.'|'.$youtube_reg.'|'.$viemo_reg.'|'.$google_map_reg.')[\'\"][^>]*?)>\s*(.+?)\s*<\/a>/i',//Aタグの正規表現
    '<a${1} data-lity="">${3}</a>',//置換する
    $content );//投稿本文（置換する文章）
  return $content;
}
add_filter( 'the_content', 'add_lity_property', 10 );

このようにすることで、本文呼び出し時に、Lityの設定を自動で行ってくれます。