Javascript 如何从php关闭带有cookie和到期日期的通知栏？

在我的上一个问题中，我正在寻找一种方法，在我的WordPress站点上创建一条通知消息，当有一篇新文章发布时。在给出了一个很好的答案之后，这个方法非常有效。我可以更改此邮件在发布后显示多长时间的设置。当时间到期时，消息将消失

目标 因此，它工作得非常好，特别感谢Pieter Goosen，但是如果用户曾经看到过这条消息，我想让用户能够关闭通知栏，并确保它不再出现在用户面前，以便刷新页面，而不是telksens返回消息，当然前提是再次发布新帖子

问题: 我怎样才能做到这一点？我在考虑javascript。对于功能，当然应该有一个控制关闭按钮的功能，我认为还应该有一个cookies功能，检查用户是否关闭了消息，并在计时器过期的时间内进行检查，以便两者相互同步

我之前关于通知的问题可以在这里找到：

[更新]

---

我只是坐下来试着弄清楚通知栏的结构，所以我把它放在一个简单的地方，看看它是否能工作，所以PieterGoosen的代码检查WordPress中是否有新帖子，并显示通知栏。然后，应在时间到期后或当用户单击关闭按钮时关闭该栏。所以代码也应该检查这一点。如果用户单击close按钮==YES，则必须设置cookie（cookie应与PHP中设置的时间同步），因此只要有新帖子可用，它就会删除cookie。如果用户没有单击“关闭”按钮，请注意，如果时间已过，请同时删除cookie。

我有一个解决方案。我已经用我能想到的尽可能多的场景测试了代码

我使用的代码与我在to中使用的代码相同。所以我不会再讨论这个部分了

工作流程第1部分 我们将使用jquery隐藏通知栏，以及一个cookie，它有两个用途：保存最新的帖子ID，并在发布新帖子或过期之前隐藏通知

为了实现这一点，我们将使用jquery中的函数在用户单击隐藏按钮时隐藏通知栏。您可以根据需要自定义此按钮或使用任何其他类型的符号

我们现在需要使用某种方法来隐藏按钮，直到发布新帖子。这将通过在单击“隐藏”按钮时设置cookie来完成。cookie设置为2天后过期，因此如果在这两天内没有发布新文章，cookie将自动过期。要设置cookie，我们需要下载插件。此插件还将在发布新帖子时强制删除cookie，而cookie仍处于设置状态

此部分严重依赖于我们的

新发布通知中设置的发布ID

。问题是，不能将php变量直接传递给jquery。幸运的是，Wordpress有一个名为的函数，我们可以使用该函数将post ID传递给jquery脚本，并将其用作cookie值

这是第1节的结尾，让我们开始编码

让我们编写第1节的代码 首先，下载插件，将其解压缩并将

jquery.cookie.js

文件复制到主题的js文件夹中。接下来，在js文件夹中创建一个新文件，并将其命名为

hide.notification.bar.js

。打开这个新创建的文件，将下面的代码粘贴到其中并保存

jQuery(document).ready(function($) {

    $("#notification_hide_button").click(function(){
        $(this).hide();
        $(".notifications_bar").hide();

        if ($.cookie( 'hide_post_cookie' ) ) { 
            $.cookie( 'hide_post_cookie', null ) 
        }
        var post_id = parseInt( cookie_Data.post_id, 10 );

        $.cookie( 'hide_post_cookie', post_id, { expires: 2, path: '/' } );

    });

});

这是用于隐藏通知栏和设置cookie的代码<代码>var post\u id=parseInt（cookie\u Data.post\u id，10）将保留帖子ID，这是此处最重要的信息

我们现在需要注册这两个js文件并将其排队，并将post ID设置为

wp\u localize\u script

函数。打开functions.php并将以下内容粘贴到其中。如果你的主题中已经有一个

wp\u enqueue\u scripts

hook，只需从这里剥离相关代码并将其粘贴到你的函数中即可

function enqueue_cookie_scripts() {

    wp_enqueue_script( 'jquery-cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array( 'jquery' ), '' , true );
    wp_register_script( 'set-cookie-option', get_template_directory_uri() . '/js/hide.notification.bar.js', array( 'jquery', 'jquery-cookie'), '' , true );

    $cookie_data = array(
        'post_id' => get_option( 'new_post_notification' )->ID
    );
    wp_localize_script( 'set-cookie-option', 'cookie_Data', $cookie_data ); // this one do the magic

    wp_enqueue_script( 'set-cookie-option' );

}

add_action( 'wp_enqueue_scripts', 'enqueue_cookie_scripts' );

您还可以复制和粘贴功能，该功能在发布新帖子时设置

new\u post\u notification

选项。有关此代码如何工作的参考，请查看它。这段代码进入functions.php

add_action( 'transition_post_status', function ( $new_status, $old_status, $post )
{
    //Check if our post status then execute our code
    if ( $new_status == 'publish' && $old_status != 'publish' ) {
        if ( get_option( 'new_post_notification' ) !== false ) {

            // The option already exists, so we just update it.
            update_option( 'new_post_notification', $post );

        } else {

            add_option( 'new_post_notification', $post );

        }
    }

}, 10, 3 );

function get_new_post_notification_bar() {

    // Get the new_post_notification which holds the newest post
    $notification   = get_option( 'new_post_notification' );

    // Get the post ID saved in the cookie
    $cookie_post_ID = isset( $_COOKIE['hide_post_cookie'] ) ? (int) $_COOKIE['hide_post_cookie'] : false; 

    $output = '';
    if( false != $notification ) {

        //First check if we have a cookie, if not, show the notification bar
        // If a cookie is set, do not display the notification bar
        if( false === $cookie_post_ID ) {

            //Get the post's gmt date. This can be changed to post_date
            $post_date = strtotime( $notification->post_date_gmt );

            //Get the current gmt time
            $todays_date = current_time( 'timestamp', true );

            //Set the expiry time to two days after the posts is published
            $expiry_date = strtotime( '+2 day', $post_date );

            //Show the notification bar if the expiry date is not yet reached
            if( $expiry_date > $todays_date ) { 

                $output .= '<div class="notifications_bar">';
                $output .= 'If you click on the "Hide" button, I will disappear.';
                $output .= '</div>';
                $output .= '<button id="notification_hide_button">';
                $output .= 'Hide';
                $output .= '</button>';

            }

        }else{

            /**
             * If a cookie is set, check the cookie value against the post id set as last post
             * If the two don't match, delete the cookie and show the notification bar if a new post is published
             * This code only run once, that is when a cookie is still set, and new post is published within the time
             * in which the cookie is still set
            */ 
            if( (int) $notification->ID !== $cookie_post_ID ) {

                ?>
                    <script>
                        jQuery(document).ready(function($) {

                            $.removeCookie('hide_post_cookie', { path: '/' });

                        });
                    </script>
                <?php

                $output .= '<div class="notifications_bar">';
                $output .= 'If you click on the "Hide" button, I will disappear.';
                $output .= '</div>';
                $output .= '<button id="notification_hide_button">';
                $output .= 'Hide';
                $output .= '</button>';

            }

        }   

    }

    return $output;

}

工作流程第2部分 我们现在已经准备好了jquery工作的一切，我们现在需要设置显示通知栏的函数，如果设置了一个新帖子，如果cookie还没有过期，则显示隐藏按钮并删除cookie

这段代码已经被很好地注释过了，所以您现在很难理解它。这里最重要的部分是获取cookie的值，该值存储在全局变量中，可以使用

$\u cookie['hide\u post\u cookie']

检索。这实际上是一个帖子ID，它将根据

get\u选项（'new\u post\u notification'）->ID中存储的帖子进行检查

“隐藏”按钮将隐藏
中的任何内容，因此您将在该分区中添加通知栏。根据需要进行自定义

我已经在一个函数中添加了所有代码，您可以在头中调用这些代码，如下所示

echo get_new_post_notification_bar(); 

第2节代码
这段代码也会进入functions.php

add_action( 'transition_post_status', function ( $new_status, $old_status, $post )
{
    //Check if our post status then execute our code
    if ( $new_status == 'publish' && $old_status != 'publish' ) {
        if ( get_option( 'new_post_notification' ) !== false ) {

            // The option already exists, so we just update it.
            update_option( 'new_post_notification', $post );

        } else {

            add_option( 'new_post_notification', $post );

        }
    }

}, 10, 3 );

function get_new_post_notification_bar() {

    // Get the new_post_notification which holds the newest post
    $notification   = get_option( 'new_post_notification' );

    // Get the post ID saved in the cookie
    $cookie_post_ID = isset( $_COOKIE['hide_post_cookie'] ) ? (int) $_COOKIE['hide_post_cookie'] : false; 

    $output = '';
    if( false != $notification ) {

        //First check if we have a cookie, if not, show the notification bar
        // If a cookie is set, do not display the notification bar
        if( false === $cookie_post_ID ) {

            //Get the post's gmt date. This can be changed to post_date
            $post_date = strtotime( $notification->post_date_gmt );

            //Get the current gmt time
            $todays_date = current_time( 'timestamp', true );

            //Set the expiry time to two days after the posts is published
            $expiry_date = strtotime( '+2 day', $post_date );

            //Show the notification bar if the expiry date is not yet reached
            if( $expiry_date > $todays_date ) { 

                $output .= '<div class="notifications_bar">';
                $output .= 'If you click on the "Hide" button, I will disappear.';
                $output .= '</div>';
                $output .= '<button id="notification_hide_button">';
                $output .= 'Hide';
                $output .= '</button>';

            }

        }else{

            /**
             * If a cookie is set, check the cookie value against the post id set as last post
             * If the two don't match, delete the cookie and show the notification bar if a new post is published
             * This code only run once, that is when a cookie is still set, and new post is published within the time
             * in which the cookie is still set
            */ 
            if( (int) $notification->ID !== $cookie_post_ID ) {

                ?>
                    <script>
                        jQuery(document).ready(function($) {

                            $.removeCookie('hide_post_cookie', { path: '/' });

                        });
                    </script>
                <?php

                $output .= '<div class="notifications_bar">';
                $output .= 'If you click on the "Hide" button, I will disappear.';
                $output .= '</div>';
                $output .= '<button id="notification_hide_button">';
                $output .= 'Hide';
                $output .= '</button>';

            }

        }   

    }

    return $output;

}

函数get\u new\u post\u notification\u bar（）{
//获取包含最新帖子的新帖子通知
$notification=get_选项（'new_post_notification'）；
//获取保存在cookie中的帖子ID
$cookie\u post\u ID=isset（$\u cookie['hide\u post\u cookie']）？（int）$\u cookie['hide\u post\u cookie']：false；
$output=''；
if（false！=$notification）{
//首先检查是否有cookie，如果没有，则显示通知栏
//如果设置了cookie，则不显示通知栏
如果（false）==$cookie\u po