画像をクリックするとポップアップして拡大表示される Lightbox 系プラグインは WordPress にも多々ありますが、 WP-lightpop は画像だけでなく YouTube などの動画共有サイトの動画、各種動画ファイル、更には WordPress プラグイン VideoPop+ で管理している動画ファイルを lightbox 風に表示するプラグインです。

WP-lightpop の導入・設定

1. WordPress Plugins/JSeries の WP-lightpop のページより ZIP ファイルをダウンロード。
2. ZIPファイルを解凍して wp-lightpop フォルダを plugins フォルダへアップロード。
3. 管理画面より WP-lightpop を有効（使用する）に。

WP-lightpop の設定画面

更に詳細な設定

リンクタイプごとのオプション

導入でちょっとつまずいたのでメモ。

上記手順で設定したのですが、何故か画像がポップアップしないので以下のことを行う。

1. 他のプラグインとの競合を考え、全てプラグインを停止して WP-lightpop を使用　→ ポップアップしない。
2. メニューに使っている jquery プラグイン droppy とのコンフリクトを疑い記述を一時的に削除　→ ポップアップしない。

3. <?php wp_head(); ?>  と <?php wp_footer(); ?> 

   を再確認。　footer がなかったので記述　→ ポップアップしない。

4. <?php echo('< ?xml version="1.0" encoding="utf-8"?>') ?>

   を一時的に削除　→ ポップアップしない。

5. 設定の a[href*=/wp-content/uploads/] を a[href^=http://127.0.0.1/wordpress/wp-content/uploads/] に　→ ポップアップしない。
6. テーマをデフォルトに変更　→ ポップアップした。

デフォルトテーマではポップアップするので、このオリジナルテーマが問題と考え調査。

すごく簡単なことでした。　というかマヌケだ。

header.php 変更前

<?php wp_head(); ?>
<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/fool/js/jquery.js"></script>
<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/fool/js/jquery.droppy.js"></script>
<script type="text/javascript">//<![CDATA[
jQuery.noConflict();
//]]></script>
</head>

header.php 変更後

<?php wp_head(); ?>
<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/fool/js/jquery.droppy.js"></script>
<script type="text/javascript">//<![CDATA[
jQuery.noConflict();
//]]></script>
</head>

droppy 導入時にヘッダに記述したスクリプトがじゃまでした。

<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/fool/js/jquery.js"></script>

これで問題なくポップアップと思ったら、もうひとつ問題が・・・・。

画像を追加する際、リンク URL が投稿の URL になっていた。　これだとその場でポップアップしない。

画像追加時に、リンク URL をファイル URL にするとその場でポップアップするようになります。

これで画像は無事ポップアップ。

YouTube の動画にサムネイルを用意し、クリック後に自動再生させるなんてのもカッコイイと思います。

ちなみに設定したパラメタは以下。

hl=ja&autoplay=1&fmt=22

こんな便利でカッコいいプラグインを作製された作者の をかもとさんに感謝。　別サイトで使ってる VideoPop+、 Head Cleaner も大変重宝しております。

WP-lightpop 作者サイト