WordPress - 自定义 18+ 弹出警报无法正常工作

Question

我试图制作自定义 18+ 警报（仅在第一次访问时），但它不起作用.. 基本上在自定义 html 模板中它有效，但在 WordPress 上没有网站上的视图在这里，它应该看起来如何，但必须有的是网站的访问者必须看到该网站，这就像模态一样..

第二个必须要做的是，它应该只在第一次访问时显示，当我点击“POKRAČOVAT”按钮后，这个警报应该消失并且不会显示在网站上的任何地方。 我已经尝试了一种 cookie 方式，通过。 仅在第一次访问 Wordpress 时出现启动画面（已接受的答案）

我也尝试过这种方式： 每个用户仅显示一次弹出窗口（也接受了答案），但它对我不起作用..让我在header.php中向您展示下面的代码（第二个选项）：

<script type="text/javascript"> 
        $(document).ready(function() {
            if(localStorage.getItem('age-test') != 'shown'){
                $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
                localStorage.setItem('age-test','shown')
            }

            $('#snippet-ageTest-alertbox-close').click(function(e) // You are clicking the close button
            {
                $('#snippet-ageTest-alertbox').fadeOut(); // Now the pop up is hiden.
            });
            $('#snippet-ageTest-alertbox').click(function(e) 
            {
                $('#snippet-ageTest-alertbox').fadeOut(); 
            });
        }); 
</script>


<div id="snippet-ageTest-alertbox">        
            <div id="age-test" class="main_background" style="display: block;">
                <div class="age-test-square main_background clearfix">
                    <div class="title">
                        <span>    
                            Pokračovaním potvrzuji, že
                            jsem starší 18 let
                        </span>
                    </div>
                    <div>
                        <a class="agree button-conversion" href="#">
                            Pokračovat
                        </a>
                    </div>
                </div>
            </div>

</div>

Answer 1

您需要设置并检查 cookie。 由于这不是 jQuery 所固有的，因此您需要一个 function。 然后就像您尝试的那样，您想在显示弹出窗口之前检查 cookie 是否已设置。

javascript cookies 的示例可以在这里找到https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

jQuery(function($){
    // define your cookie's name.
    let c = getCookie('age-test');
    // check if the cookie is set and if not show modal.
    if (c !== 'shown'){
        $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
        setCookie('age-test', 'shown', '99'); // set number of days expired.
    }
});

Answer 2

WordPress 不是在您的 WordPress web 应用程序中添加自定义代码，而是提供了一种可以高精度执行相同操作的插件，因此我建议您使用插件3方嵌入代码片段而不是使用插件。

这里有一些你可以使用的插件

1. 年龄门 - https://wordpress.org/plugins/age-gate/
2. CPS 年龄验证 - https://wordpress.org/plugins/surbma-yes-no-popup/

在此处阅读有关它们的更多信息https://kinsta.com/blog/wordpress-age-verification/