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

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

ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordpressで使う方法
今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用する...

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

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

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

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

スポンサーリンク
レクタングル(大)広告

Lity.jsとは

Lity - Lightweight responsive lightbox

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

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

Lityテスト

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

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

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

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

Lityを設置する主な手順

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

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

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

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

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

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

Lityのダウンロード

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

GitHubからLityのダウンロードするファイルを選ぶ

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

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

  1. dist/lity.min.css
  2. dist/lity.min.js

Lityの呼び出しに必要なファイル

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

  1. css/lity.min.css
  2. js/lity.min.js

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

これで設置は完了です。

Lityファイルの呼び出し

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

CSSファイルの呼び出し

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

JSファイルの呼び出し

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

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

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

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

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

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

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

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

手入力で書き加える時

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

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

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

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

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

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

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

動作確認

このように設定することで、以下のように画像や動画をライトボックス表示することができます。

Lityの動作確認1

Lityの動作確認2

テキストリンクからも呼び出せます。

まとめ

Lityは、ライブラリファイルを呼び出して、Aタグに属性を追加するだけなので、Wordpressからも手軽に利用することができます。

画像リンクを、自動でLity対応させるには、functions.phpにコードを記述する必要があります。コードを1から書くのは面倒かもしれませんが、上の方で紹介したコードをコピペでいけるかと思います。

Lityは、Lightboxライブラリとは違って、ページ内の画像を一度に見るような機能はありませんが、とてもシンプルで軽快です。

なので、「軽い画像拡大ライブラリを探している」とか「画像さえページ内で拡大できれば良い」なんて場合には、結構使い勝手の良いjQueryプラグインではないかと思います。