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/