【プラグインなし】投稿内の画像をクリックで拡大する機能を作る【WordPress】

BableTechの記事といったらとにかく画像が多いです。しかもほとんどの画像が拡大しないと見にくかったりします。そこで、画像自体をタップしたら詳細画面が出てきて、画像の説明を読むことができたりもっと拡大してみることができる機能を作ろうと考えました。　そういう機能を実現できるプラグインもあるわけなのですが、プラグインを使うほどのものでもないので自分で作ってしまおうと試みた感じですね。

画像をクリックできるようにする

まず最初に、画像をクリックできるようにする必要があります。ただ、今回jQueryを使って実装していくと思っているので、JavaScriptに対応していない場合に「クリックして拡大」という説明が表示されないようにする必要があります。　そこで、ページを読み込んだ後にJavaScriptで記事本文から画像を検出して、その下に自動的に「クリックして拡大」という文を表示するようなスタイルにしましょう。

jQuery(function(){
    //投稿中の画像の下に「クリックして拡大」を表示
    jQuery(".wp-block-image img").after("<p>クリックして拡大</p>");
});

投稿のテンプレートにスクリプトを埋め込んでこれを記述するだけですね。注意点として、WordPressでは基本的にjQueryのことを「$」と略すことはできません。他の関数と衝突するのを防ぐためですね。ブロックエディターで追加した画像は「figure」という「wp-block-image」というクラスを持ったタグで括られます。それを利用して、投稿内の画像の要素を取得して、その下に「after」メソッドで「クリックして拡大」という文字列を挿入するようにしています。わずか1行ですね。　これだからjQueryはやめられないです…

そしたら次に、投稿内の画像をクリックできる風にするためにちょっとCSSを書き換えます。

.wp-block-image img{
	border-radius: 20px;
    box-shadow: 0 0 20px #a69d9d91;
	transition:.5s;
}
.wp-block-image img:hover{
    box-shadow: 0 0 50px #a69d9d57;
	cursor:pointer;
}

ポイントは「cursor:pointer」です。これはその要素にカーソルを合わせたときにカーソルがどのようなマークになるのか指定できるプロパティで、pointerはリンクにカーソルを合わせたときに出る人の手みたいなマークです。　そしてhover疑似クラスにそのプロパティを付与します。

また、スクリプトもちょっと付け加えましょう。

    //投稿中の画像の下に「クリックして拡大」を表示
    jQuery(".wp-block-image img").after("<p>クリックして拡大</p>")
    .on('click',function(){
        console.log("画像がクリックされました");
    });

先ほどの続きって感じですが、onメソッドでクリックイベントに反応して実行する関数を定義しています。これで画像をクリックすることでコンソールに「画像がクリックされました」と出力されるようになりました。

拡大画像を表示するフィールドを作る

後はクリックされたときに表示するフィールドを作ります。

<div id="image_detail"><p></p><img src=""></div>
<div style="position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 15;backdrop-filter: blur(10px);display:none;" id="image_background"></div>	

本当に適当ですが、こういうのを投稿テンプレート（single.php）のarticleタグの下とかに適当に挿入します（なるべく浅い階層に入れた方がいいです）

div#image_detail {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 20;
    box-shadow: 0 0 50px #00000091;
	width:70vw;
	display:none;
}
div#image_detail img{
	    width: 100%;
}
div#image_detail p {
    position: absolute;
    top: -50px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Rounded Mplus 1c';
}

そして上のようなCSSをあてて、実際にdisplay:noneを外した状態で確認してみると…

仮のデザインにはなってしまいますが、良い感じですね。もしも背景がうまくぼやけてなかったらz-indexを調節したりしましょう。

画像をクリックしたときの処理を書く

ここまできたらあとは簡単です。

jQuery(function(){    
    //投稿中の画像の下に「クリックして拡大」を表示
    const detail_image_field = jQuery("div#image_detail");
    const image_background = jQuery("div#image_background");

    jQuery(".wp-block-image img").after("<p>クリックして拡大</p>")
    .on('click',function(){
        const src = jQuery(this).attr("src");
        const alt = jQuery(this).attr("alt");
        detail_image_field.find("img").attr("src",src)
        .parent().find("p").text(alt);

        detail_image_field.fadeIn();
        image_background.fadeIn();

        image_background.on('click',function(){kill_detail_image();});
    });

    //拡大画像表示を消す関数
    const kill_detail_image = () => {
        detail_image_field.fadeOut();
        image_background.fadeOut();
    }


    jQuery(window).scroll(function () {//スクロールした時
        //拡大画像表示をやめる
        kill_detail_image();
    });
});

全体のコードとしてはこんな感じになりますかね。クリックされたときにその画像のURLとaltプロパティの値を取得して、その情報に基づいて拡大画像表示フィールドに画像を表示しつつ、タイトル的な感じでaltの値を入れます。　つまりaltの中には画像を説明する文字列をあらかじめ入れておく必要があるということですね。　現状BableTechではあまり入れれてないのですが、実は画像タグのaltプロパティをちゃんと入力するとSEO的にも良かったりするし視覚障害を持つ人にとって記事が読みやすくなったりするみたいなので、これを機にしっかりaltの値も入れていこうと思います。

そして拡大画像表示をした後に、背景をクリックしたりスクロールしたときに拡大画像表示をやめる関数を実行することで記事を再び読み進めることができるようになっています。ここでjQueryのfadeIn,fadeOutメソッドが大いに活躍していますね。これだからjQueryはやめられないです…

とこんな感じで感覚的には30分もかからずにそこそこ便利な機能を作ることができました。

こうやって機能ばかり増やしていくとページのロード時間が長くなってSEO的に良くないんじゃないかと思われるかもしれませんが、これらのJSの機能は基本的にページがロードした後に非同期的に実行されているのと、画像の拡大機能に関しては閲覧者の任意のタイミングで実行するものなのでロード時間が長くする原因にはほとんどなりません。　しかも、ちょっと工夫して記事内の画像は低画質にして拡大ボタンをクリックしたら高画質な画像が表示されるようにすれば、最初のページロード時間をさらに短縮することができるようになるでしょう。

まぁJavaScriptを無効にしている利用者がいたとしたら逆に使いにくくなってしまうかもしれませんが、正直今の時代でそれはほとんど気にしなくてよくなってきている気がします。JavaScriptだけでレンダリングをしているサイトもあるくらいですから…

さて、BableTechではこんな感じで、パソコンの情報などハードウェア的な記事から、サイトのカスタマイズや機械学習などのソフトウェア的な記事もじゃんじゃんと作ろうと考えていますので、これからもよろしくお願いします。