WordPressでLightboxを簡単に実装する方法

WordPress

画像などを同画面で表示するのに便利な「lightbox」ですが、自分で実装する際に簡単にできないかなと思って WordPressのプラグインを探してました。そして入れたのがLightbox2です。

ダウンロード

こちら元は英語なのですが、日本語版もありますので日本語版をダウンロードしました。

設置方法

設置の方法は他のプラグインと一緒でダウンロードしたファイルを解凍し、/wp-content/pluginsフォルダにアップロードすれば動きます。

オプション

インストールが成功すると、WordPressの設定メニューにLightboxが追加されるのでそちらで以下の設定ができます。

  • 背景色
  • 透過率
  • リサイズ
  • 項目ごとの設定
  • Lightbox自動設定

投稿画面でのLightboxの使う場合と使いたくない場合の設定

この記事はLightboxを使いたくない

記事によってはこのページの画像はLightboxにしたくない場合があると思います。その場合は投稿画面の項目に、 「Lightboxを無効にする」という項目があるのでそこにチェックをします。そうするとこの記事内の画像には「Lightbox」は適用されません。

この画像はLightboxを使いたくない

記事全体ではなく個別の画像を「Lightbox」したくないときもあります。その場合は「アップロード/挿入」で出てくるウインドウのギャラリーで 使いたい画像を選択し「リンク」部分を空にして投稿に挿入します。

こうすると、その画像だけ「Lightbox」が適用されません。

動かない

自分で設置したのですが、なぜか動きませんでした。どうしてだろうと散々悩んだのですがこのプラグインはprototype.jsを使うものでした。

別に使用していたjQueryと干渉して動かなかったのですね。というわけでコンフリクト回避をしたら無事動きました。

<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

上記コードを適切な場所に記述し、jQueryを使ってるJSファイル内の$をj$に変更します。

すごい初歩的なことかと思いますが、このようにすると簡単に「Lightbox」が使えるようになります。