WordPress 主题函数添加弹窗二维码功能

主题函数添加代码

1. 在主题根目录下的主题函数中添加以下代码:
2. 替换 http://lianluo.dakweb.top/wp-content/uploads/2026/05/48fb2ab67d2bb5d51bd1151c3c2d231f.jpg 为你的图片路径

add_action('wp_footer', function() {
    ?>
    <!-- 二维码弹窗结构 -->
    <div id="qr-modal" class="qr-modal">
        <div class="qr-content">
            <span class="qr-close">×</span>
            <div class="qr-body">
                <img src="http://lianluo.dakweb.top/wp-content/uploads/2026/05/48fb2ab67d2bb5d51bd1151c3c2d231f.jpg" alt="QR Code">
                <p style="font-size:16px"> <i class="ri-qr-scan-2-line"></i> Scan to visit</p>
            </div>
        </div>
    </div>

    <style>
        .qr-modal {
            display: none;
            position: fixed;
            z-index: 99999; /* 提高层级，确保在最前面 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .qr-modal.is-visible {
            display: flex;
            opacity: 1;
        }

        .qr-content {
            background: #fff;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transform: translateY(20px);
            transition: transform 0.3s ease;
            max-width: 90%;
        }

        .qr-modal.is-visible .qr-content {
            transform: translateY(0);
        }

        .qr-body img {
            max-width: 200px;
            height: auto;
            display: block;
            margin: 0 auto 15px;
        }

        .qr-close {
            position: absolute;
            top: 5px;
            right: 12px;
            font-size: 28px;
            cursor: pointer;
            color: #999;
        }
        .qr-close:hover { color: #333; }
    </style>

    <script>
        (function() {
            // 使用更健壮的初始化方式
            const initQrModal = function() {
                const modal = document.getElementById('qr-modal');
                const closeBtn = document.querySelector('.qr-close');

                // 关键点：使用事件委托，防止动态加载或复杂的 HTML 嵌套导致监听失败
                document.addEventListener('click', function(e) {
                    // 查找点击的是否是带有 href="#qr" 的链接，或者是该链接内部的元素
                    const trigger = e.target.closest('a[href="#qr"]');

                    if (trigger) {
                        e.preventDefault();
                        modal.classList.add('is-visible');
                    }

                    // 点击关闭按钮
                    if (e.target === closeBtn) {
                        modal.classList.remove('is-visible');
                    }

                    // 点击背景遮罩
                    if (e.target === modal) {
                        modal.classList.remove('is-visible');
                    }
                });
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initQrModal);
            } else {
                initQrModal();
            }
        })();
    </script>
    <?php
});

前端绑定

在a标签链接为#qr