WordPressテーマ THE THORに画像拡大&ギャラリー機能「baguetteBox.js」を実装

THE THORには画像のポップアップ機能がありません。画像に直リンクを挿入する事でフルサイズ表示はできますがブラウザバックで戻らないといけないのでユーザビリティがイマイチです。

プラグインで対応するしかないのでLightbox系プラグイン、baguetteBox.jsを実装しました。

手動インストールになるので少し手間ではありますが、必要最低限の機能でサクサク動き、実装難易度低めでオススメです。

実装方法を紹介するので、興味のある方は導入を検討してみて下さい。

baguetteBox.jsを実装する

ダウンロード

baguetteBox.jsをダウンロードして下さい。[ Code ]ボタンを押すとダイアログが現れるので[ Download ZIP ]を選択して下さい。

フォルダ解凍

ZIPファイルを解凍し、[ dist ]フォルダの中から[ baguetteBox.css ]と[ baguetteBox.js ]を削除して下さい。必要なのは圧縮されたminファイルだけです。

アップロード

サーバー子テーマ直下に[ dist ]フォルダをアップロードして下さい。

function.php編集

編集する内容は次のサイトに紹介されていたものを参考にしました。

寝ログ | 寝ながら出来るコトや使えるモノを紹介

コンテンツ内の画像のポップアップ(ズーム)表示や、ギャラリー表示を手軽に行えるピュアJavaScriptライブラリの「b…

子テーマの「テーマのための関数(function.php)」に以下のコードを貼り付けて下さい。

function.php編集

function call_baguettebox_scrips_demo() {
  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('.postContents' , {
			animation: 'fadeIn',
    		noScrollbars: true
			});
  		};
  ";
  wp_add_inline_script( 'baguettebox-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_baguetteBox_scrips_demo' );

7-8行目は公式デモサイトに紹介されているオプションを付与してみました。次の画像に遷移するとき、デフォルトではスライドですが、このコードだとフェードします。

スマホユーザーには、スライドの方がユーザビリティ良さそうです。7-8行目を削除すればデフォルトのスライドに戻ります(” { ”の処理に注意)。

画像にキャプションを付けたい方は5番目に紹介されているオプションがいいかも知れません(Altテキストをそのままキャプションにしてくれるっぽい)。

これで実装は完了です。

画像の貼り付け方

ポップアップさせたい画像にリンクを挿入すれば準備完了です。

[ リンクを挿入 ]→[ メディアファイル ]を選択すれば完了です。

これでリンクを挿入した画像は全てポップアップ、ギャラリー機能が働きます。

あとがき

この手のプラグインは何種類かありますが、他はもっさり系が多いです。baguetteBox、軽くてオススメです。

私の場合は拡大表示が目的ですが、ギャラリー機能はきっと需要が多いと思います。

それでは最後までご高覧いただきありがとうございました。