動画やWebコンテンツをスライドショーにできるWordPressプラグイン《WP SexyLightbox》

Web制作テクニック

WP SexyLightbox》は LightBox のようなスライドショーを実装できる WordPressプラグインなのですが、こちらは動画や Webページまでもスライドショーにしてくれる、万能型のプラグインです。“Sexy”と名付けられている通り、ポップアップのモーションも普通の LightBox とは一味違う、面白い動きをしてくれます。

[adsense]

プラグインの入手と有効化

  • こちらのページから wp-sexylightbox.zip ファイルをダウンロードして解凍する
  • wp-sexylightbox フォルダを wp-content/plugins ディレクトリにアップロードする
  • WordPress 管理画面にログインする
  • ダッシュボードからプラグインメニューに入る
  • WP SexyLightbox の項目で「使用する」をクリックしてプラグインを有効化させる

※プラグインの新規追加でダウンロードした zip ファイルを直接インストール、もしくはプラグインを検索してインストールする事もできます。

スライドショーの設置方法

画像をポップアップさせる

表示させたいコンテンツのリンク属性に rel=”sexylightbox” と付け加えるだけでOKです。複数のコンテンツをスライドショーにする場合は rel=”sexylightbox[グループナンバー]“ と指定すると、同じナンバーのコンテンツを巡回できるようになります。

<a href="コンテンツのURL" rel="sexylightbox[グループナンバー]" title="タイトル">リンク</a>

動画をポップアップさせる

動画をポップアップさせる場合は、下記のような記述でページに貼り付けた動画を非表示にしておく必要があります。id名は適当に付けて構いませんが、リンクを設定する際は同じ id名にする必要があります。サイズの指定も必要となります。

<div id="video" style="display:none;">動画貼付けコード</div>
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=video" rel="sexylightbox" title="タイトル">リンク</a>

Webコンテンツをポップアップさせる

iflame として Webページをポップアップさせることもできます。ページのURLと表示サイズを指定して以下のように記述します。

<a href="http://www.google.co.jp/?TB_iframe=true&height=500&width=900" rel="sexylightbox" title="Google">Google</a>

プラグイン情報とダウンロード

この記事で紹介しているバージョン:0.5.3
WordPress のバージョン:2.6 以降が必要
動作確認した WordPress のバージョン:3.1
ダウンロード先:WP SexyLightbox