WordPress にプラグインなしで fancybox4 導入

2022.08.10 Wordpress, プラグイン

はてなブログで運用していた最後のブログをやっと WordPress に移行させました。手間取ったわけではなく、はてなブログの契約が8月10日までありましたので例によって（笑）ギリギリになっただけです。移行させたサイトはこちら。

＠半径とことこ60分

このサイトに fancybox をプラグインなしで直接導入したという話です。ただし、この記事の内容はやや特殊です。WordPress のブロックエディタで書いた記事に fancybox を導入する場合の方法は次の記事にあります。

fancybox4 は jQuery 不要
fancybox4 の導入と使用方法
特殊なケースの導入

01fancybox4 は jQuery 不要

fancybox は画像などをモーダルダイアログで表示する javascript の UI です。現在のバージョンは V4 で jQuery も必要なく単体で動きます。そのためかサイトの url も変わっているようです。上のリンクがそのサイトで、下は記録のために残してある過去のサイトとのことです。

同じような UI で jQuery のライブラリは他にもありますが、fancybox を使うことにしたのはモーダルダイアログで画像を表示した後にそのまま画像を拡大できることです。というのは、今回 WordPress に移行したサイトにはウォーキングで各地に行った際の写真が数多くあり、各記事多くて数十枚の写真をいれています。ですので画質をかなり落とし、画像をクリックすると元画像を表示するようにしています。

はてなブログではもともと Colorbox という同じような jQuery ライブラリが導入されており、それを使っていたのですが、このライブラリは拡大がシームレスに、つまりスマホでのピンチアウトには対応していますがマウスのホイールの拡大縮小には対応していません。

で、この際にといくつか見てみましたらこの fancybox が希望のものにぴったりだったということです。

02fancybox4 の導入と使用方法

Installation

CDN で直接導入する場合は head タグ内でスタイルシートを読み込み、boby 終了タグ直前で javascript を読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

functions.php で読み込む場合は、

function add_fancybox() {
	wp_enqueue_style( 'fancybox-style', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css' );
	wp_enqueue_script( 'fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js' , '', '',true);
}
add_action( 'wp_enqueue_scripts', 'add_fancybox' );

fancybox を使用するには、facybox を利用したい要素に data-fancybox のデータ属性を追加するだけです。また、モーダルダイアログで表示するコンテンツは、href 属性か data-src 属性で指定します。

複数の画像などに data-fancybox=”gallery” を指定すればそれだけでグループ化されカルーセルになります。便利ですね。それに結構軽く感じます。まだ確認していませんがオプション指定もいろいろあり思うようにカスタマイズできそうです。

03特殊なケースの導入

以上が一般的な導入方法ですが、今回はてなブログから移行したデータはちょっと特殊でして、はてなブログに貼り付ける画像は、はてなフォトライフというウェブアルバムサービスに保存されます。その際、事前に縮小するサイズとオリジナル画像を保存するかどうかを設定できます。

今回のケースでは、オリジナル横幅 4032px の画像を 800px に縮小して保存してありますので、800pxの表示画像をクリックしたらオリジナル画像をモーダルダイアログで表示するようにしなくていけません。また、オリジナル画像がない画像もありますのでその選択をする必要があります。

なお、はてなフォトライフの画像のファイル名は、20220619144926.jpg など日付と時間の文字列がつけられており、オリジナル画像は 20220619144926_original.jpg となります。

ということで、次の script で fancybox を導入しています。

document.addEventListener("DOMContentLoaded", () => {
    const fotos = document.getElementsByClassName('hatena-fotolife');
    [].slice.call(fotos).forEach(foto => {
        foto.addEventListener('click', (e) => {
            const checkImage = (url) => {
                var xhr;
                xhr = new XMLHttpRequest();
                xhr.open("HEAD", url, false);
                xhr.send(null);
                return xhr.status;
            };
            const src = e.target.getAttribute('src');
            const orgImageUrl = src.replace(".jpg", "_original.jpg");
            if(checkImage(orgImageUrl) == 200){
                Fancybox.show(
                    [
                        {
                            src: orgImageUrl,
                            type: "image",
                        },
                    ],
                    {
                        dragToClose: false,
                    }
                );
            }else{
                Fancybox.show(
                    [
                        {
                            src: "<div>この画像にはオリジナル画像はありません</div>",
                            type: "html",
                        },
                    ],
                );
            }
        });
    });
});

やっていることは、クラス名 hatena-fotolife を持ったすべての要素にクリックイベントを設定し、その要素がクリックされれば src 属性から画像 url を取り出し、オリジナル画像が存在するかどうかを確認し、存在する場合はその url を fancybox に渡し、存在しなければその旨を html で渡します。

ということで、導入サイトをご覧ください。

シシベラクールネックリング 28℃ 自然凍結 24年80%大増量ネッククーラーアイスクールリング首掛け冷却暑さ対策グッズ繰り返し使用可能冷感無地ライトブルー Lサイズ（大人用）

Amazon

#javascript, #WordPress, #はてなブログ