「WordPress Colorbox Lightbox」を使ってみる

WordPressの投稿でライトボックスを簡単に設定できるようになるプラグイン「WordPress Colorbox Lightbox」を使ってみます。

インストール

プラグインの新規追加から「WordPress Colorbox Lightbox」を検索して、インストールを行います。

インストール後、有効化して準備完了です。

使用方法

今回は画像、YouTube、外部ページ、インラインHTMLの4種類を試してみます。
埋め込みにはショートコードを使用して、基本的なフォーマットは以下のようになります。

[wp_colorbox_media url="【ライトボックスで開く内容】" type="【表示する種類】" hyperlink="【リンクを設定するテキストor画像URL】"]

urlにはライトボックスで開くファイル・ページ・要素、typeにはimageやyoutubeなど埋め込む種類、hyperlinkにはライトボックスを開くリンクのテキストや画像のURLを指定します。

画像

まずは画像を埋め込んでみます。
投稿前にメディアで画像をアップロードしておいて、URLをコピーしておきます。

新規投稿画面を開き、ウィジェット > ショートコードを選択します。

先ほど取得しておいたURLを使用して、ショートコードを入力します。

[wp_colorbox_media url="https://xxxxx/wp-content/uploads/xxxxx.jpg" type="image" hyperlink="ライトボックステキスト"]

実際に投稿してリンクをクリックすると、画像のライトボックスを表示できました。

YouTube

YouTubeを試してみます。
typeにyoutubeを指定して、URLに埋め込み用のYouTube URLを指定します。

[wp_colorbox_media url="https://www.youtube.com/embed/Ywq4XR0G4Qk" type="youtube" hyperlink="ライトボックステキスト"]

サイトのURL(watch入りのもの)ではなく埋め込み用のURL(embed入りのもの)なので注意してください。
実際に投稿して試してみると、以下のように表示できました。

別ページ

次に別ページの埋め込みを試してみます。
typeにiframeを指定して、URLに表示するページURLを指定します。

[wp_colorbox_media url="http://endro.jp/" type="iframe" hyperlink="ライトボックステキスト"]

ライトボックスで以下のように表示できました。

インラインHTML

最後にインラインHTMLを試してみます。
インラインHTMLの場合は同一ページ内にライトボックス内の要素を入れておく必要があります。
投稿画面でフォーマット > カスタムHTMLを選択します。

HTML入力エリアに以下を入力します。

<div style="display: none;">
	<div id="inline_content" style="background: red;">
		<p>インラインの中身</p>
	</div>
</div>

次にショートコードの入力を選択します。
typeにinlineを指定して、URLに先ほどの要素を指定します。

[wp_colorbox_media url="#inline_content" type="inline" hyperlink="ライトボックステキスト"]

投稿して試してみると、用意したHTMLの内容で表示できました。

【参考サイト】

• WordPress Colorbox Lightbox – WordPress プラグイン | WordPress.org