SWELLには画像のポップアップ（投稿画像をクリックで拡大表示する）機能が実装されていますが、ポップアップ画像のギャラリー機能はありません。そこで、ポップアップ画像をギャラリーできる「baguetteBox.js」を実装してみました。
手動インストールになるので少し手間ですが、必要最低限の機能でサクサク動き、実装難易度低めでおすすめです。実装方法を紹介するので、興味のある方は導入を検討してみて下さい。
baguetteBox.jsの実装方法
SWELLの画像ポップアップ機能はluminous.jsというスクリプトを使って実装されています。このluminous.jsにはギャラリー機能（LuminousGallery）が別に用意されていますが、SWELLではオンになっていません。ゴニョゴニョしてLuminousGalleryを動かせば解決、と思ったのですが、スマホのスワイプに対応していませんでした。
Cocoon（無料テーマ）ではポップアップ機能を4種類のスクリプトから選べるようになっていますが、その内の一つ baguetteBox.js がスマホスワイプにも対応、動作もサクサクでお気に入りなので、これを実装してみました。
baguetteBox.jsの特徴
- ポップアップ画像がスライドできる（ギャラリー機能）
- 画像遷移はアニメーション（スライド・フェードイン）
- スマホはスワイプで遷移
- 動作が軽快
- jQuery非依存
今回はファイルを自サーバーに置いてそこから読み込む方法と、CDNから読み込む方法の2通りを紹介します。基本的にはCDNから読み込む方法で問題ありませんが、一応デメリットも存在します。詳細は割愛しますが好きな方法を選択してください。
自分のサーバーにファイルを置いてそこから読み込む方法
ZIPファイルを解凍し、distフォルダの中からbaguetteBox.cssとbaguetteBox.jsを削除して下さい。必要なのは圧縮されたminファイルだけです。
FTPクライアントかサーバー管理画面から、サーバー子テーマ直下にdistフォルダをアップロードします。既に同名のフォルダが存在する場合はbaguetteBox.min.cssとbaguetteBox.min.jsを distの中にアップロードしてください。
編集する内容はCocoon開発者さんのブログに紹介されていたものを参考にしました。
子テーマを編集します。Wordpressメニュー外観→テーマエディターから子テーマ編集画面へ移り、SWELL CHILD:functions.phpの最下部に以下のコードを貼り付けて下さい。
function call_baguettebox_script() {
wp_enqueue_style( 'baguettebox-style', get_stylesheet_directory_uri() . '/dist/baguetteBox.min.css' );
wp_enqueue_script( 'baguettebox-js', get_stylesheet_directory_uri() . '/dist/baguetteBox.min.js', array(), false, true );
$data = "
window.onload = function() {
baguetteBox.run('.post_content' , {
//遷移アニメーションをスライドからフェードインに変更
animation: 'fadeIn',
//キャプションにaltタグを挿入
captions: function(element) {
return element.getElementsByTagName('img')[0].alt;
}
});
};
";
wp_add_inline_script( 'baguettebox-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_baguettebox_script' );8,10～12行目は公式デモサイト に紹介されているオプションを付与してみました。
- キャプション（画像見出し）にaltタグ（代替テキスト）を自動挿入
- 画像遷移するときのアニメーションをフェードインに変更…デフォルトではスライド
不要なら削除してください（}の処理に注意）。
オプションのキャプション自動挿入を付与した場合、デフォルトのままではキャプションが読みにくいのでCSSで調整しました。子テーマstyle.cssの最下部に次のコードを貼り付けてください。
#baguetteBox-overlay .full-image figcaption {
color: #fff;
background-color: rgba(0,0,0,0.6);
font-family: inherit;
font-weight: bold;
font-size: 1.5em;
line-height: 3.5;
}お好みの状態になるよう、適宜調整してください。
CDNから読み込む方法
子テーマを編集します。Wordpressメニュー外観→テーマエディターから子テーマ編集画面へ移り、SWELL CHILD:functions.phpの最下部に以下のコードを貼り付けて下さい。
////baguettebox_CDN読み込み////////////////////////////////////////////////
function call_baguettebox_script() {
wp_enqueue_style( 'baguettebox-style', 'https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css' , array(), '1.11.1',false );
wp_enqueue_script( 'baguettebox-js', 'https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js', array(), '1.11.1', true );
$data = "
window.onload = function() {
baguetteBox.run('.post_content' , {
//遷移アニメーションをスライドからフェードインに変更
animation: 'fadeIn',
//キャプションにaltタグを挿入
//captions: function(element) {
//return element.getElementsByTagName('img')[0].alt;
//}
});
};
";
wp_add_inline_script( 'baguettebox-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_baguettebox_script' );ファイルの読み込み先が変わるだけです。オプション設定やCSS調整は「自分のサーバーから読み込む」を参照してください。作業としてはこっちの方が圧倒的に楽ですね。
baguetteBox.jsを有効にする方法
baguetteBox.jsを有効にするには、画像にリンクを挿入します。メディアファイルからリンクを張ります。
リンクを挿入→メディアファイルを選択すれば完了です。
これでリンクを挿入した画像は全てポップアップ、ギャラリー機能が働きます。
リンクを挿入しない場合、SWELLデフォルトのポップアップ機能が有効になります。ギャラリーで見せたい画像のみリンクを挿入することで使い分けが可能です。SWELLデフォルトのポップアップを無効にしたい場合は、SWELL設定→機能停止で「投稿画像をクリックで拡大表示する機能を停止する」にチェックを入れてください。
このページは、アイキャッチはSWELLデフォルトのポップアップ機能、それ以外の画像はbaguetteBox.jsを有効にしています。
この手のプラグイン（Lightbox系）は何種類かありますが、他はもっさりしたものが多いです。baguetteBox.js、軽くてオススメです。
- アップデート頻度…文句なし。機能も順調に拡張し続けている。不具合対応も早い。
- サポート…フォーラム形式で活発。開発者と回答者がフォーラムのいい雰囲気を作っている。
- ライセンス数…制限なし。好きなだけブログを量産できる。
- ブロックエディタ対応…完全対応。記事執筆が超快適。
- 機能性…他テーマと比較してもトップクラス。比較記事はこちら
- デザイン性…基調はシンプルですが、カスタムする環境は整っています。色々な方向性でデザインすることが可能。
- 価格…17,600円（税込み）
＼ ブログ運営が楽しくなる／