WordPress 画像クリックで拡大する（モーダルライトボックス効果）

Newspaper 一部のテーマでは、本文内の画像をクリックすると画像を拡大して表示するモーダルライトボックス画像機能を有効/無効にする機能を提供しています。 これらの機能が提供されていない場合は、モーダルプラグインを使用できます。 この記事では、JavaScriptを使用して WordPress ブログの本文に挿入された画像をクリックしたときに画像が拡大表示されるようにする方法を見てみましょう。

2023年11月9日アップデート： WordPressがバージョン6.4にアップデートされ、画像ブロックとギャラリーブロックに画像ライトボックスオプションが追加されました。 画像のライトボックススタイルを調整する方法は、以下の記事で確認できます。

• WordPress イメージライトボックススタイルを変更する

WordPress 画像クリックで拡大する（モーダルライトボックス効果）

テーマでモーダル画像機能を提供していない場合 FooBoxのようなライトボックス＆モーダルポップアップ WordPress プラグイン（Lightbox & Modal Popup WordPress Plugin）をインストールして、必要に応じて機能していることを確認してください。

この記事では、ブロックエディタ（Gutenberg）の画像ブロックを使用して、挿入した画像をユーザーがクリックしたときにモーダルポップアップとして表示されるようにする方法を見てみましょう。

ユーザーが画像をクリックしたときに画像にリンクがある場合はそのリンクに移動し、リンクがない場合はモーダルポップアップとして表示する場合を考えてみましょう。

ブロックエディタで画像ブロックを挿入すると、XNUMXつの形式でHTMLコードが追加されるようです。

<figure class="wp-block-image size-large"><img ...></figure>

- または -

<div class="wp-block-image"><figure ...><img ...></figure></div>

私のブログは現在、XNUMX番目の形式で画像ブロックが追加されています。 同じ GeneratePress テーマを使用している場合でも、一部のサイトでは最初の形式で画像が挿入されることもあるようです。

上記のように画像ブロックが追加されている場合は、次のJavaScriptコードを使用して、リンクされていない画像を訪問者がクリックしたときにモーダルポップアップとして表示することができます。

/*
This script enhances the image viewing experience within WordPress posts by enabling a modal popup functionality. 
When a user clicks on an image that isn't contained within a hyperlink, the image is displayed in a full-screen 
overlay, or 'modal', thus focusing the user's attention solely on the image. The modal can be closed either by 
clicking on the 'X' button positioned in the top right corner, or by clicking outside the image. This provides 
an engaging and user-friendly way to view images in WordPress posts.
*/

<script>
// get all the images
var images = document.querySelectorAll(".wp-block-image img, .wp-block-image figure img");

// iterate over each image
for(let img of images) {
    // check if parent is not a link and device is not mobile
    if(img.parentElement.tagName !== 'A' && window.matchMedia("(min-width: 768px)").matches) {
        // create modal div
        var modal = document.createElement("div");
        modal.style.display = "none";
        modal.style.position = "fixed";
        modal.style.zIndex = "1";
        modal.style.paddingTop = "100px";
        modal.style.left = "0";
        modal.style.top = "0";
        modal.style.width = "100%";
        modal.style.height = "100%";
        modal.style.overflow = "auto";
        modal.style.backgroundColor = "rgba(0,0,0,0.9)";
        modal.id = "myModal";

        // create close button
        var closeBtn = document.createElement("span");
        closeBtn.innerHTML = "&times;";
        closeBtn.style.position = "absolute";
        closeBtn.style.top = "15px";
        closeBtn.style.right = "35px";
        closeBtn.style.color = "#f1f1f1";
        closeBtn.style.fontSize = "40px";
        closeBtn.style.fontWeight = "bold";
        closeBtn.style.transition = "0.3s";
        closeBtn.style.cursor = "pointer";
        closeBtn.onclick = function() { 
            modal.style.display = "none";
        };

        // create modal img
        var modalImg = document.createElement("img");
        modalImg.style.margin = "auto";
        modalImg.style.display = "block";
        modalImg.style.width = "80%";
        modalImg.style.maxWidth = "700px";
        modalImg.id = "img01";

        // append elements to modal
        modal.appendChild(closeBtn);
        modal.appendChild(modalImg);

        // append modal to body
        document.body.appendChild(modal);

        // add click event to the image
        img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src;
        }

        // add close event to the modal
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
}
</script>

上記のコードを適用すると、デスクトップデバイス（768ピクセル以上の解像度）でのみモーダルポップアップが機能します。 モバイルデバイスを含むすべてのデバイスに適用するには、上記のコードから window.matchMedia("(min-width: 768px)").matches 部分を削除するだけです。

スクリプトの更新：

画像がYoast-SEO-Update-768x378.jpgなどのフルサイズではなくサムネイルサイズで挿入されている場合、上記のコードを使用して画像をクリックするとサムネイルがモーダルとして表示されます。 サムネイルサイズで画像が挿入されても、モーダルポップアップで全体の画像サイズで表示されるようにスクリプトを修正しました。

// get all the images
var images = document.querySelectorAll(".wp-block-image img, .wp-block-image figure img");

// iterate over each image
for(let img of images) {
    // check if parent is not a link and device is not mobile
    if(img.parentElement.tagName !== 'A' && window.matchMedia("(min-width: 768px)").matches) {
        // create modal div
        var modal = document.createElement("div");
        modal.style.display = "none";
        modal.style.position = "fixed";
        modal.style.zIndex = "1";
        modal.style.paddingTop = "100px";
        modal.style.left = "0";
        modal.style.top = "0";
        modal.style.width = "100%";
        modal.style.height = "100%";
        modal.style.overflow = "auto";
        modal.style.backgroundColor = "rgba(0,0,0,0.9)";
        modal.id = "myModal";

        // create close button
        var closeBtn = document.createElement("span");
        closeBtn.innerHTML = "×";
        closeBtn.style.position = "absolute";
        closeBtn.style.top = "15px";
        closeBtn.style.right = "35px";
        closeBtn.style.color = "#f1f1f1";
        closeBtn.style.fontSize = "40px";
        closeBtn.style.fontWeight = "bold";
        closeBtn.style.transition = "0.3s";
        closeBtn.style.cursor = "pointer";
        closeBtn.onclick = function() { 
            modal.style.display = "none";
        };

        // create modal img
        var modalImg = document.createElement("img");
        modalImg.style.margin = "auto";
        modalImg.style.display = "block";
        modalImg.style.width = "80%";
        modalImg.style.maxWidth = "700px";
        modalImg.id = "img01";

        // append elements to modal
        modal.appendChild(closeBtn);
        modal.appendChild(modalImg);

        // append modal to body
        document.body.appendChild(modal);

        // add click event to the image
        img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src.replace(/-\d+x\d+(?=.jpg$|.jpeg$|.png$|.webp$)/, '');
        }

        // add close event to the modal
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
}

モーダルポップアップの例：

モーダル画像のポップアップ時に画像の外側の領域をマウスでクリックするか、閉じるボタン（Xボタン）を押すとポップアップが消えます。

上記のコードが機能しない場合

上記のコードが機能しない場合は、画像部分のHTMLタグを確認してください。 たとえば、次のようなHTML形式で画像が挿入される場合もあるようです。

<figure class="wp-caption"><img...></figure>

この場合、ジャスコードの次の部分

var images = document.querySelectorAll(".wp-block-image img, .wp-block-image figure img");

次のように修正してテストしてください。

var images = document.querySelectorAll(".wp-block-image img, .wp-block-image figure img, .wp-caption img");

JavaScriptを追加する方法

上記のJavaScriptコードは、次の記事で紹介する方法でロードできます。

• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

上記の方法でロードするのが望ましいですが、この方法が難しい場合 WPコードをインストールしてフーター領域に追加することもできます。

GeneratePress テーマを使用している場合は、フック（HooK）を使用して、すべての記事にジャスコードをフッタ領域にロードすることができます。

• フック： wp_footer
• Display Rules » Location: <文 - All 文>を指定

参照

• WordPress Bloomプラグインをポップアッププラグインとして使用する方法
• GeneratePress テーマ：ページごとに異なるヘッダー/サイドバー/フッターを使用する
• エレメンタプロプラグインとクラウドウェブサイト商品の違い