效果展示

服务器上找到 WordPress 站点目录，如笔者的是 /www/wwwroot/[站点文件名]

在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/footer.php

在 </body> 之前添加这些代码

<script type="text/javascript">
// 快速点击不显示蓄力提示的按压特效
jQuery(document).ready(function($) {
    var pressStartTime;
    var maxPressTime = 800; // 最大按压时间
    var isPressing = false;
    var pressIndicator;
    var indicatorTimeout; // 用于延迟显示提示的计时器
    
    // 鼠标按下时记录开始时间
    $("body").mousedown(function(e) {
        isPressing = true;
        pressStartTime = Date.now();
        var $this = $(this);
        
        // 延迟显示"按住蓄力"提示（只有按压超过一定时间才显示）
        indicatorTimeout = setTimeout(function() {
            pressIndicator = $("<div class='press-indicator'>按住蓄力...</div>");
            pressIndicator.css({
                "position": "absolute",
                "top": e.pageY + 20 + "px",
                "left": e.pageX + "px",
                "transform": "translate(-50%, 0)",
                "color": "#666",
                "font-size": "12px",
                "pointer-events": "none",
                "z-index": 9999
            });
            $("body").append(pressIndicator);
            $this.data("pressIndicator", pressIndicator);
        }, 150); // 按压超过150ms才显示提示
    });
    
    // 鼠标松开时触发特效
    $("body").mouseup(function(e) {
        if (!isPressing) return;
        isPressing = false;
        
        // 清除延迟计时器（如果还没显示提示）
        clearTimeout(indicatorTimeout);
        
        // 移除按压指示器（如果已显示）
        var pressIndicator = $(this).data("pressIndicator");
        if (pressIndicator) {
            pressIndicator.remove();
            $(this).removeData("pressIndicator");
        }
        
        // 计算按压时间
        var pressEndTime = Date.now();
        var pressDuration = pressEndTime - pressStartTime;
        pressDuration = Math.min(pressDuration, maxPressTime);
        
        // 扩散系数计算
        var scaleFactor = 0.5 + (pressDuration / maxPressTime) * 1;
        
        // 创建元素
        var ring = $("<div class='click-ring'></div>");
        var particles = $("<div class='particles-container'></div>");
        var x = e.pageX, y = e.pageY;
        var finalRingSize = 150 * scaleFactor;
        
        // 圆环样式
        ring.css({
            "position": "absolute",
            "top": y + "px",
            "left": x + "px",
            "width": "15px",
            "height": "15px",
            "border-radius": "50%",
            "background": "rgba(150, 150, 150, 0.2)",
            "border": "3px solid #999",
            "transform": "translate(-50%, -50%)",
            "z-index": 9998,
            "pointer-events": "none",
            "opacity": 1
        });
        
        // 粒子容器样式
        particles.css({
            "position": "absolute",
            "top": y + "px",
            "left": x + "px",
            "transform": "translate(-50%, -50%)",
            "z-index": 9999,
            "pointer-events": "none"
        });
        
        $("body").append(ring).append(particles);
        
        // 粒子创建
        for (var i = 0; i < 20; i++) {
            var particle = $("<span class='particle'></span>");
            var angle = Math.random() * Math.PI * 2;
            var size = 5 + Math.random() * 8;
            var originalSize = size;
            var rangeFactor = 0.3 + Math.random() * 0.8;
            var lightness = 30 + Math.random() * 50;
            
            particle.css({
                "position": "absolute",
                "width": size + "px",
                "height": size + "px",
                "border-radius": "50%",
                "background": "hsl(340, 100%, " + lightness + "%)",
                "top": "0px",
                "left": "0px",
                "opacity": 0.7 + Math.random() * 0.3,
                "transform": "translate(-50%, -50%)"
            });
            
            particles.append(particle);
            
            // 粒子动画
            setTimeout(function(p, a, rf, os) {
                return function() {
                    var animateParticle = function(progress) {
                        var ringRadius = 15 + (finalRingSize - 15) * progress;
                        var particleRadius = ringRadius * rf;
                        var xPos = Math.cos(a) * particleRadius;
                        var yPos = -Math.sin(a) * particleRadius;
                        var currentSize = os * (1 - progress);
                        
                        p.css({
                            "left": xPos + "px",
                            "top": yPos + "px",
                            "width": currentSize + "px",
                            "height": currentSize + "px",
                            "opacity": 0.9 - (progress * 1.5)
                        });
                    };
                    
                    var duration = 400;
                    var start = Date.now();
                    
                    var timer = setInterval(function() {
                        var timePassed = Date.now() - start;
                        var progress = timePassed / duration;
                        
                        if (progress >= 1) {
                            progress = 1;
                            clearInterval(timer);
                            p.remove();
                        }
                        
                        animateParticle(progress);
                    }, 16);
                };
            }(particle, angle, rangeFactor, originalSize), Math.random() * 30);
        }
        
        // 圆环动画
        ring.animate({
            "width": finalRingSize + "px",
            "height": finalRingSize + "px",
            "opacity": 0,
            "border-width": "2px",
            "border-color": "rgba(170, 170, 170, 0)"
        }, 400, function() {
            ring.remove();
            setTimeout(function() {
                particles.remove();
            }, 50);
        });
    });
    
    // 鼠标离开页面时取消按压状态
    $("body").mouseleave(function() {
        isPressing = false;
        clearTimeout(indicatorTimeout);
        var pressIndicator = $(this).data("pressIndicator");
        if (pressIndicator) {
            pressIndicator.remove();
            $(this).removeData("pressIndicator");
        }
    });
});
</script>
<!--mouse effects show end-->