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

Question

在我之前的问题中，我正在寻找一种方法来在我的 WordPress 网站上创建一条通知消息，当有新帖子发布时。在一个很好的答案之后，这工作得很好。我可以更改此消息在发布后应显示多长时间的设置。当时间到期时，消息将消失。

目标

所以它工作得非常好，特别感谢 Pieter Goosen，但是如果用户看过一次消息，我想提供关闭通知栏并确保它不再按顺序向用户显示的功能刷新页面不会 telksens 返回消息，当然前提是新帖子再次发布。

问题

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

您可以在此处找到我之前关于通知的问题:

How to count the total number of posts from the selected post types?

[更新]我只是坐下来尝试弄清楚通知栏的结构，所以我简而言之，看看它是否会起作用，所以 PieterGoosen 的代码检查了 WordPress 中是否有可用的新帖子并显示通知酒吧。然后，该栏应在时间到期后或用户单击关闭按钮时关闭。所以代码也应该检查它。如果用户单击关闭按钮 == YES，则必须设置 cookie(cookie 应与 PHP 中设置的时间同步)，因此只要有新帖子可用，它就会删除 cookie。如果用户没有点击关闭按钮，那么请注意，如果时间过期 > 也删除 cookie。

Answer 1

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

我使用了与 this answer 中相同的代码至 this question .所以我不会再讨论那个部分了

工作流程第 1 部分

我们将使用 jquery 来隐藏通知栏，以及一个有两个用途的 cookie，保存最新的帖子 ID 并保持通知隐藏，直到发布新帖子或到期时间到期

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

我们现在需要使用某种方法来隐藏按钮，直到发布新帖子为止。这将通过在单击隐藏按钮时设置 cookie 来完成。 cookie 设置为 2 天后过期，因此如果这两天内没有发布新帖子，则 cookie 将自动过期。要设置 cookie，我们需要下载 jquery-cookie插入。当仍然设置 cookie 时发布新帖子时，此插件还将强制删除 cookie。

此部分严重依赖于我们 new_post_notification 中设置的帖子 ID .问题是，您不能将 php 变量直接传递给 jquery。幸运的是 Wordpress 有一个函数叫做 wp_localize_script 我们可以使用它来将帖子 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_id = parseInt( cookie_Data.post_id, 10 );将保留帖子ID，这是此处最重要的信息

我们现在需要注册和入队这两个 js 文件，并将帖子 ID 设置为 wp_localize_script功能。打开您的 functions.php 并将以下内容粘贴到其中。如果您已经有 wp_enqueue_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_post_notification 的函数发布新帖子时的选项。有关此代码如何工作的引用，请查看 here .此代码进入 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 );

工作流程第 2 部分

我们现在已经为 jquery 工作准备好了一切，我们现在需要设置显示通知栏的功能，并显示隐藏按钮，如果没有设置新帖子，则删除 cookie还没过期。

此代码已得到很好的注释，因此您现在将难以理解它。这里最重要的部分是获取 cookie 的值，该值存储在全局变量中，可以使用 $_COOKIE['hide_post_cookie'] 检索。 .这实际上是一个帖子 ID，将根据存储在 get_option( 'new_post_notification' )->ID 中的帖子进行检查。

隐藏按钮将隐藏 <div class="notifications_bar"></div> 内的所有内容，因此您将在该 div 中添加通知栏。根据需要自定义。

我已将所有代码添加到一个函数中，您可以按如下方式在 header 中调用该函数

echo get_new_post_notification_bar(); 

第 2 节代码

此代码也会进入您的 functions.php

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;

}