html - 是否可以？隐藏基于 cookie 的 div(创建欧盟 Cookie 法横幅)

Question

我正在尝试在我们的网站上获得“美观”的欧盟 cookie 法横幅。

对于那些不知道的人。在英国和欧洲，使用 cookie 的网站必须告知用户。我看过几个 WP 插件，但它们都对设计有很大的干扰。

我正在使用我自己的 WP Boostrap 主题。导航栏上方有一个容器 div 和一个子行 div。

目前，当用户使用数据切换数据目标单击按钮时，我会隐藏子行 div。

这显示在此处的代码中(因为它位于导航上方，因此该代码出现在每个页面上。

<div id="container-topline" class="container-fluid bg-moderateblue" style="min-height:2px;">
    <div id="row-cookie" class="row" style="padding-top:10px; padding-bottom:10px;">
        <div class="col-md-1 col-xs-hidden"></div>
        <div class="col-md-10 col-sm-12">
            <div class="col-sm-10 col-xs-12">
                <ul class="fa-ul" style="color:#FFF; font-size:small;">
                <li>
                <i class="fa fa-exclamation-triangle fa-li fa-2x" aria-hidden="true"></i>
                <strong>Privacy &amp; Cookies:</strong> This website uses cookies to improve your experience and to provide essential functionality. By continuing to use this website your consent is implied. To view our privacy policy <a href="#" style="font-weight:bold; color:#FFF;"> click here</a>.
                </li>
                </ul>
            </div>
            <div class="col-sm-2 col-xs-12" style="text-align:center;">           
                <button class="btn btn-default col-md-pull-right" data-toggle="collapse" data-target="#row-cookie">
                <i class="fa fa-times" aria-hidden="true"></i> Close Message
                </button>
            </div>
        </div>
        <div class="col-md-1 col-xs-hidden"></div>
    </div>
</div>

到目前为止一切顺利。然而，这意味着用户必须在每个页面上关闭该消息。有点烦人，它会分散人们对网站的注意力。

我想要的是一种在 #row-cookie 关闭后将其隐藏 24 小时的方法(这就是我陷入困境的地方)。

这可能吗？您有任何教程建议可以 Bootstrap 我完成吗？

我认为可能是 Cookie，但我看过 Stack Overflow 上使用它们的一些示例，坦率地说，它们让我感到困惑!

非常感谢所有帮助:)!

Answer 1

当用户关闭横幅时，通过 Ajax 设置 cookie。使用 jQuery，就像执行以下操作一样简单:

jQuery(#row-cookies .fa-times).click(
    jQuery.get("http://link-to-php-file.php");
});

对于 PHP 文件，只需在主题目录中创建一个(如果您还没有这样做，请确保使用 child theme !)

然后在 PHP 文件中执行以下操作:

<?php 
// Set a cookie to expire in 24 hours
setcookie("closed-cookies", "true", time()+60*60*24, "/");

现在，在模板文件中，您只需在打印之前查看 cookie 是否已设置即可。

<?php
if(isset($_COOKIE['closed-cookies'])) :
?>

// Cookie banner

<?php
endif;
?>