WP jQuery Lightbox:Lightbox2が使える
Lightbox として Lightbox2 が使える WordPress 用プラグインの紹介です。
それは「WP jQuery Lightbox」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
WP jQuery Lightbox
WP jQuery Lightbox は、Lightbox として Lightbox2 が使えます。
- 画像間をフリックするためのスワイプジェスチャーにも対応。
- ブラウザウィンドウとスマホの向きのライブ調整可。
- キーボード操作にも対応。
日本語化対応もされています。
記事を作成もしくは更新時点でののバージョン:1.4.8.1
マルチサイトでの利用:可
WP jQuery Lightbox のインストール手順
WP jQuery Lightbox をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
WP jQuery Lightbox – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「WP jQuery Lightbox」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
WP jQuery Lightbox の日本語化
WP jQuery Lightbox は、日本語化対応がされているので、有効化するだけで日本語化されます。
日本語化されない場合には、日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「設定」メニューの中に追加されています。
WP jQuery Lightbox の使い方
WordPress 標準の画像ギャラリーを使用して、自動的にライトボックスの効果を適用できます。
下記のように link 属性に[file]を指定する必要があります。
gallery link="file"
group 属性を使用して、ギャラリーを別々のスライドショーとして分割できます。
gallery link="file" ids="1,2,3″ group="mon"
gallery link="file" ids="4,5,6″ group="tue"
また、任意のリンクタグに rel="lightbox" 属性を追加して、
ライトボックスをアクティブにすることもできます。
title キャプションを表示する場合は、title 属性を使用します。
<a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>
グループ化する関連画像のセットがある場合は、rel 属性にグループ名を含めます。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
ページあたりの画像セットの数や各セットで許可される画像の数に制限はありません。
画像リンクのライトボックス化を無効にするには、rel 属性に nobox を指定します。
data-download 属性を使用すると、カスタムダウンロードリンクを設定できます。
<a href="image-medium.jpg" rel="lightbox" data-download="image-superlarge.jpg"> […] </a>
WP jQuery Lightbox の設定(Settings)
表示例
実際に表示させると上のような感じで表示されます。
代替プラグイン
WP jQuery Lightbox にほしい機能が無かった場合には、
WP jQuery Lightbox 以外にも画像やギャラリーでライトボックスが使えるプラグインを記事にしています。
以下では、WP jQuery Lightbox を含めて 13 個を簡単に紹介しています。
画像やギャラリーでライトボックスが使えるWordPressプラグイン一覧