Wie schließe ich eine Benachrichtigungsleiste mit Cookies und Ablaufdatum von PHP?

In meiner vorherigen Frage habe ich nach einer Möglichkeit gesucht, auf meiner WordPress-Seite eine Benachrichtigung zu erstellen, wenn ein neuer Beitrag veröffentlicht wird. Nach einer tollen Antwort funktioniert das sehr gut. Ich kann die Einstellungen ändern, wie lange diese Nachricht nach dem Zeitpunkt der Veröffentlichung des Beitrags angezeigt werden soll. Wenn die Zeit abgelaufen ist, verschwindet die Meldung.

Tor

Es funktioniert also absolut einwandfrei, besonderen Dank an Pieter Goosen, aber wenn der Benutzer die Nachricht einmal gesehen hat, möchte ich die Möglichkeit geben, die Benachrichtigungsleiste zu schließen und sicherzustellen, dass sie dem Benutzer nicht mehr angezeigt wird, um sie zu aktualisieren Seite nicht telksens gibt die Meldung zurück, vorausgesetzt natürlich ein neuer Beitrag wird wieder veröffentlicht.

Frage

Wie kann ich das erreichen? Ich dachte an Javascript. Für die Funktion sollte es natürlich eine Funktion geben, die den Schließen-Button steuert, ich denke, dass es auch eine Funktion für Cookies geben sollte, um zu prüfen, ob der Benutzer die Nachricht geschlossen hat oder nicht und innerhalb der Zeit überprüft, ob der Timer damit abläuft beide synchronisieren sich.

Meine vorherige Frage zur Benachrichtigung finden Sie hier:

Wie wird die Gesamtzahl der Beiträge der ausgewählten Beitragstypen gezählt?

[UPDATE]

Ich setze mich einfach hin und versuche, die Struktur der Benachrichtigungsleiste klar zu bekommen, also fasse ich es auf den Punkt, um zu sehen, ob es funktioniert, also prüft der Code von PieterGoosen, ob es einen neuen Beitrag in WordPress gibt, und zeigt die Benachrichtigung an Bar. Dann soll die Leiste geschlossen werden, nachdem die Zeit abgelaufen ist oder wenn der Benutzer auf den Schließen-Button geklickt hat. Also sollte der Code das auch überprüfen. Wenn der Benutzer auf die Schließen-Schaltfläche == JA klickt, muss ein Cookie gesetzt werden (das Cookie sollte mit der in PHP gesetzten Zeit synchronisiert sein), sodass das Cookie gelöscht wird, wenn ein neuer Beitrag verfügbar ist. Wenn der Benutzer nicht auf die Schaltfläche „Schließen“ klickt, beachten Sie dies und wenn die Zeit abgelaufen ist > löschen Sie auch das Cookie.

Ich habe eine Lösung. Ich habe den Code so oft wie möglich mit so vielen Szenarien getestet, wie ich mir vorstellen konnte.

Ich habe denselben Code verwendet, den ich in dieser Antwort auf diese Frage verwendet habe. Also werde ich diesen Abschnitt nicht noch einmal angehen

ARBEITSABLAUF TEIL 1

Wir werden jquery verwenden, um die Benachrichtigungsleiste auszublenden, und ein Cookie, das zwei Zwecke hat, um die neueste Beitrags-ID zu speichern und die Benachrichtigung verborgen zu halten, bis ein neuer Beitrag veröffentlicht wird oder wenn die Ablaufzeit abläuft

Um dies zu erreichen, verwenden wir die hide() Funktion in jquery, um die Benachrichtigungsleiste auszublenden, wenn der Benutzer auf eine Schaltfläche zum Ausblenden klickt. Sie können diese Schaltfläche nach Bedarf anpassen oder einen anderen Symboltyp verwenden.

Wir müssen jetzt eine Methode anwenden, um die Schaltfläche verborgen zu halten, bis ein neuer Beitrag veröffentlicht wird. Dies erfolgt durch das Setzen eines Cookies, wenn auf die Schaltfläche „Ausblenden“ geklickt wird. Das Cookie ist so eingestellt, dass es in 2 Tagen abläuft. Wenn also innerhalb dieser zwei Tage kein neuer Beitrag veröffentlicht wird, läuft das Cookie automatisch ab. Um das Cookie zu setzen, müssen wir die herunterladen jquery-cookie Plugin. Dieses Plugin erzwingt auch das Löschen von Cookies, wenn ein neuer Beitrag veröffentlicht wird, wenn noch ein Cookie gesetzt ist.

Dieser Abschnitt stützt sich stark auf die Post-ID, die in unserem festgelegt ist new_post_notification. Das Problem ist, dass Sie PHP-Variablen nicht direkt an jquery übergeben können. Glücklicherweise hat WordPress eine Funktion namens wp_localize_script die wir verwenden können, um die Post-ID an das jquery-Skript zu übergeben, wo wir sie als Cookie-Wert verwenden.

Dies ist das Ende von Abschnitt 1, fangen wir mit der Codierung an

LÄSST CODE ABSCHNITT 1

Laden Sie zuerst das Plugin herunter, extrahieren Sie es und kopieren Sie die jquery.cookie.js Datei in den js-Ordner deines Themes. Erstellen Sie als Nächstes eine neue Datei in Ihrem js-Ordner und benennen Sie sie hide.notification.bar.js. Öffnen Sie diese neu erstellte Datei und fügen Sie den folgenden Code dort ein und speichern Sie ihn

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: "https://stackoverflow.com/" } );

    });

});

Dies ist der Code, der zum Ausblenden der Benachrichtigungsleiste verwendet wird und der das Cookie setzt. var post_id = parseInt( cookie_Data.post_id, 10 ); enthält die Post-ID, die hier die wichtigste Information ist

Wir müssen diese beiden js-Dateien jetzt registrieren und in die Warteschlange stellen und die Post-ID auf setzen wp_localize_script Funktion. Öffnen Sie Ihre functions.php und fügen Sie dort Folgendes ein. Wenn Sie bereits eine haben wp_enqueue_scripts Haken Sie Ihr Thema ein, entfernen Sie einfach den relevanten Code von hier und fügen Sie ihn in Ihre Funktion ein

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' );

Sie können auch die Funktion kopieren und einfügen, die die festlegt new_post_notification Option, wenn ein neuer Beitrag veröffentlicht wird. Informationen zur Funktionsweise dieses Codes finden Sie hier. Dieser Code kommt in die 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 );

ARBEITSABLAUF TEIL 2

Wir haben jetzt alles vorbereitet, damit die jquery funktioniert, wir müssen jetzt die Funktion einstellen, die die Benachrichtigungsleiste anzeigt, und die Schaltfläche zum Ausblenden anzeigen und das Cookie löschen, wenn ein neuer Beitrag gesetzt wird, wenn das Cookie noch nicht abgelaufen ist.

Dieser Code wurde gut kommentiert, sodass Sie jetzt Schwierigkeiten haben werden, ihm zu folgen. Der wichtigste Abschnitt hier ist, den Wert des Cookies zu erhalten, der in einer globalen Variablen gespeichert ist und mit abgerufen werden kann $_COOKIE['hide_post_cookie']. Dies ist tatsächlich eine Post-ID, diese wird mit der darin gespeicherten Post verglichen get_option( 'new_post_notification' )->ID

Die Schaltfläche zum Ausblenden blendet alles darin aus <div class="notifications_bar"></div>, also fügen Sie die Benachrichtigungsleiste in diesem div hinzu. Passen Sie nach Bedarf an.

Ich habe den gesamten Code in eine Funktion eingefügt, die Sie wie folgt in Ihrem Header aufrufen können

echo get_new_post_notification_bar(); 

ABSCHNITT 2 CODE

Dieser Code geht auch in Ihre 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: "https://stackoverflow.com/" });

                        });
                    </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;

}