WordPress站点如何实现仅首次访问时运行首页Logo动画，返回不再重播

方案1：纯前端JS实现（改造成本最低，推荐） #

核心逻辑是通过浏览器本地存储记录用户是否已观看过动画，首页加载时先判断该标记，再决定是否播放动画。
将以下代码添加到WordPress后台「自定义-额外CSS/JS」的JS输入框，或者首页模板文件的底部即可：

document.addEventListener('DOMContentLoaded', function() {
    // 本地存储标记，永久有效，如需关闭浏览器就失效可以换成sessionStorage
    const hasSeenAnim = localStorage.getItem('seen_logo_anim');
    // 替换下方三个选择器为你站点对应元素的实际CSS选择器
    const popup = document.querySelector('#logo-popup');
    const siteContent = document.querySelector('#site-wrapper');
    const logoBtn = document.querySelector('#popup-logo');

    if(hasSeenAnim) {
        // 已观看过，直接隐藏弹窗、显示站点内容
        popup.style.display = 'none';
        siteContent.style.display = 'block';
    } else {
        // 未观看，正常显示弹窗播放动画
        popup.style.display = 'flex';
        // 点击Logo后存储标记
        logoBtn.addEventListener('click', function() {
            localStorage.setItem('seen_logo_anim', '1');
            // 这里保留你原有的点击Logo后的跳转/隐藏逻辑
        });
        // 如果你设置了动画自动播完后进入站点，也在对应逻辑里加上上面的存标记代码
    }
});

注意事项：

• 代码内的元素选择器需要和你站点实际的弹窗、内容容器、Logo元素的CSS选择器保持一致
• 如需限制动画7天内只出现一次，可将localStorage替换为Cookie存储，设置对应过期时间即可

方案2：WordPress PHP+Cookie实现（性能更好） #

核心逻辑是后端直接判断用户是否已看过动画，决定是否输出动画相关的代码，避免不必要的资源加载。

第一步：添加Cookie判断逻辑 #

将以下代码添加到你当前使用的WordPress主题的functions.php文件末尾：

add_action('init', function() {
    global $show_logo_anim;
    // 已看过动画的话标记为false
    if(isset($_COOKIE['seen_logo_anim'])) {
        $show_logo_anim = false;
        return;
    }
    $show_logo_anim = true;
});

第二步：修改首页模板 #

找到你站点的首页模板文件（通常为front-page.php或home.php），将原有的Logo动画弹窗代码用判断语句包裹：

<?php 
global $show_logo_anim;
if($show_logo_anim): 
?>
<!-- 这里替换成你原有的Logo动画弹窗的所有HTML代码 -->
<div id="logo-popup">
    <!-- 动画相关代码 -->
</div>
<?php endif; ?>

第三步：添加点击存Cookie逻辑 #

在首页的JS逻辑里，给Logo点击事件加上存Cookie的代码：

document.querySelector('#popup-logo').addEventListener('click', function() {
    // Cookie有效期设为7天，可自行修改后面的数字调整有效期
    document.cookie = "seen_logo_anim=1; max-age=" + 7*24*60*60 + "; path=/";
    // 保留原有点击逻辑
});

内容的提问来源于stack exchange，提问作者vanoevelenstef