今回は、WordPressテーマ：賢威7サイトにLightboxを入れる方法を紹介したいと思います。
Lightboxって何？という方もいるかもしれませんが、画像をクリックするとクリックした画像が中央に移動して周囲が暗くなるものです。Lightboxという名前を聞いたことがなくても、実際に使ってみると「これ知っている！」という方は多いんじゃないでしょうか。
ちなみに今回はFluidboxというプラグインを使用していきます。WordPressのプラグインではなくjQueryのプラグインなので、インストール→有効化というだけでは終わりませんが、通常のLightbox系プラグインよりも軽量で高速です。
公式サイト：
http://terrymun.github.io/Fluidbox/demo/index.html#content
目次
カスタマイズ後
完成1
↓ 画像をクリックすると画像の周囲が白くなります（プラグインをそのまま使用した状態）
完成2
↓ CSSを調整して背景を暗転
[ad]
※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。
※ また、今回は賢威の子テーマを作って進めていきます。子テーマを作っておくと「カスタマイズがしやすい、カスタマイズ前の状態に戻しやすい」などのメリットがあるので、子テーマを作っておくのがオススメです。
1. まずは本体をダウンロード
まずはプラグイン本体と throttle plugin をダウンロードします。
下の「ダウンロード2」についてはリンク先に移動せずに、そのまま下のリンク上で右クリック→「リンク先を別名で保存」を選択してダウンロードして下さい。名前はそのまま jquery.ba-throttle-debounce.min.js という名前にしておきます。
- ダウンロード1：https://github.com/terrymun/Fluidbox
- ダウンロード2：http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js
2. ダウンロードしたファイルをアップロード
Fluidbox をダウンロードできたら、dist というフォルダの中に入っている必要なファイルをアップロードします。
※ できるだけ FileZillaのようなFTPクライアントを使ってアップロードして下さい。
2-1. jquery.fluidbox.min.js をjsフォルダにアップロード
ダウンロードした dist フォルダの中に入っている jquery.fluidbox.min.js を、賢威子テーマの js フォルダにアップロードします。js フォルダが無い場合は作成して下さい。
2-2. fluidbox.min.css をcssフォルダにアップロード
dist フォルダに入っている fluidbox.min.css を、子テーマの css フォルダにアップロードします。こちらもjsフォルダと同じように、これまでに css フォルダを作っていなければ新規作成して下さい。
2-3. jquery.ba-throttle-debounce.min.js を jsフォルダにアップロード
「ダウンロード2」でダウンロードした jquery.ba-throttle-debounce.min.js というファイルを js フォルダにアップロードします。
このファイルは Fluidbox 本体を動かすのに必須ではありませんが、できるだけ使うよう推奨されているので、これも一緒に js ファイルにアップロードします。
3. ライブラリを動かすためのJSファイルを作成
Fluidboxをアップロードしても、アップロードしただけでは動かないので、以下のコードを書き込んだ js ファイルを作成します。ここでは custom.js というファイル名にしておきます。
jQuery(function( $ ){
$('.single .main-conts a').fluidbox();
});
これも js フォルダにアップロードします。
4. functions.php から必要なファイルを読み込み
JSファイルやCSSファイルなどの必要なファイルのアップロードが出来たので、先ほどアップロードしたファイルの読み込みをしていきます。
子テーマの functions.php に以下のコードを追加します。
// Fluidbox の読み込み
add_action( 'wp_enqueue_scripts', 'wcl_enqueue_fluidbox' );
function wcl_enqueue_fluidbox() {
wp_enqueue_style( 'fluidbox-css', get_stylesheet_directory_uri() . '/css/fluidbox.min.css' );
wp_enqueue_script( 'throttle', get_stylesheet_directory_uri() . '/js/jquery.ba-throttle-debounce.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'fluidbox', get_stylesheet_directory_uri() . '/js/jquery.fluidbox.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array( 'fluidbox', 'throttle' ), '', true );
}
4-1. 記事を編集してLightboxに対応させる
必要なファイルが読み込めたら、あとは画像に画像のURLへのリンクが設定されているか確認すれば完成です。
投稿の編集画面から下のように「リンク先」という項目が表示されるので、このリンク先を「画像のURL」にします。
カスタマイズ前の状態では、リンクを設定した画像をクリックすると画像だけが別のページで表示されます。
でも、、、Fluidbox を使うと白いオーバーレイと一緒に画像が中央に配置されるようになります。これでLightboxの完成です！
5. オーバーレイの色を変更する
Lightboxは完成しましたが、Fluidboxは画像の周囲が白くなるというオリジナリティのあるライブラリなので、少し手を加えて画像の周囲を暗くする方法も紹介しておきます。画像の周囲が白くなると、バグったと思う人もいるかもしれませんし。。。
子テーマの style.css に以下のCSSコードを追加すると、、、
.fluxbox .fluidbox__overlay {
background-color: rgba(0,0,0,.8);
}
画像が拡大されながら周囲が暗転しました。これで完成です！
コメントを残す