wordpress 代码分享（图片点击弹出)

网站上写文章插入图片是很常见的操作，如果插入的图片太大，在文章区域图片可能小于原始尺寸。这样就会变得模糊看不清，如果图片上是文字，情况就会变得更糟糕。所有点击图片放大就是一个很常见的功能，这里分享一段代码实现这个功能。

弹出的效果

<?php

/**
 * 点击图片也能还原 + 强制加载jQuery + 独立加载CSS/JS
 */
function wpzhan_image_zoom_script() {
    // 1. 强制加载jQuery（WordPress内置版本）
    wp_enqueue_script( 'jquery' );

    // 2. 单独注册并加载放大功能的CSS
    $zoom_css = '
        /* 图片放大遮罩层 */
        .wpzhan-image-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 99999 !important;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        /* 放大后的图片容器 */
        .wpzhan-zoom-image {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
            border: 5px solid #fff;
            border-radius: 4px;
        }
        /* 文章内图片添加点击指针 */
        .entry-content img {
            cursor: zoom-in;
            transition: all 0.2s ease;
        }
        .entry-content img:hover {
            opacity: 0.9;
        }
    ';
    wp_register_style( 'wpzhan-image-zoom-css', false );
    wp_enqueue_style( 'wpzhan-image-zoom-css' );
    wp_add_inline_style( 'wpzhan-image-zoom-css', $zoom_css );

    // 3. 单独注册并加载放大功能的JS（原生JS版本，无依赖）
    $zoom_js = '
        document.addEventListener("DOMContentLoaded", function() {
            // 创建遮罩层和图片容器
            const overlay = document.createElement("div");
            overlay.className = "wpzhan-image-overlay";
            const zoomImg = document.createElement("img");
            zoomImg.className = "wpzhan-zoom-image";
            zoomImg.src = "";
            overlay.appendChild(zoomImg);
            document.body.appendChild(overlay);

            // 获取所有文章内的图片
            const postImages = document.querySelectorAll(".entry-content img");
            postImages.forEach(img => {
                img.addEventListener("click", function(e) {
                    e.preventDefault();
                    const imgSrc = this.getAttribute("src");
                    const imgAlt = this.getAttribute("alt") || "放大图片";
                    zoomImg.setAttribute("src", imgSrc);
                    zoomImg.setAttribute("alt", imgAlt);
                    overlay.style.display = "flex";
                    document.body.style.overflow = "hidden";
                });
            });

            // 点击遮罩层任意位置（包括图片）关闭弹窗 ← 核心修复
            overlay.addEventListener("click", function() {
                overlay.style.display = "none";
                document.body.style.overflow = "auto";
            });

            // ===== 已删除：阻止图片点击事件冒泡的代码 =====
            // 移除这行后，点击图片会触发父元素（遮罩层）的点击事件，从而关闭弹窗
        });
    ';
    // 注册并加载JS，依赖jQuery（纯原生JS可删除 array('jquery')）
    wp_register_script( 'wpzhan-image-zoom-js', false, array('jquery'), false, true );
    wp_enqueue_script( 'wpzhan-image-zoom-js' );
    wp_add_inline_script( 'wpzhan-image-zoom-js', $zoom_js );
}
// 优先级设为100，确保在所有脚本后加载
add_action( 'wp_enqueue_scripts', 'wpzhan_image_zoom_script', 100 );