הצגת פופאפ באתרי וורדפרס באמצעות JavaScript Cookie

במדריך זה נראה כיצד להציג פופאפ באתרי וורדפרס ללא שימוש בתוסף. הפופאפ מציג הודעה לגולשים ומשתמש בעוגיה (Cookie) כדי לזכור אם הם כבר ראו אותה – כך שהיא לא תופיע שוב בביקורים הבאים.

נשתמש בספריית js-cookie כדי לטפל ביצירה ובקריאה של עוגיות. מכיוון ואיננו משתמשים בתוסף, נוכל כמובן לעצב את ההודעה ולקבוע את התנהגותה בדיוק כפי שנרצה.

אז אם אתם מקדמים מוצר מסוים בחנויות ווקומרס, או אם ישנה פונקציונליות חדשה או מאמר חדש שאתם מעוניינים לקדם בבלוג שלכם, זוהי אפשרות מעולה ליידע את הגולשים בלי להציק להם יותר מדי.

נאמר בקצרה לאלו שאינם יודעים, כי Cookies הם בעצם פיסות מידע קטנות הנשמרות בדפדפן על ידי האתר. הם נשמרים בין טעינות עמודים וביקורים, וכך למשל עגלת קניות זוכרת את המוצרים שלכם גם אחרי שעזבתם וחזרתם.

למידע נוסף על עוגיות, תנו מבט בפוסט מה זה עוגיות (Cookies) באינטרנט וכיצד לעבוד איתן ב-JavaScript.

מה למדריך זה ולתקנות ה-GDPR?

תקנות ה-GDPR בנושא עוגיות (בתוקף מאז מאי 2018) מחייבות אתרים ליידע גולשים על שימוש בעוגיות ולקבל הסכמה לפני הגדרת עוגיות שאינן הכרחיות.

אם אפילו אחוז קטן מקהל הגולשים שלכם מגיע מהאיחוד האירופי, אתם צריכים לעמוד בדרישות אלו. תקנות דומות קיימות כיום גם באזורים אחרים (CPRA בקליפורניה, DPDP בהודו ועוד).

זו הסיבה שרוב האתרים כיום מציגים באנר הסכמה לעוגיות. הפופאפ שנבנה במדריך זה יכול לשמש כהודעת עוגיות פשוטה עבור האתר שלכם.

עם זאת, בואו ניגש למימוש. אלו השלבים להצגת פופאפ באתרי וורדפרס באמצעות js-cookie.

טעינת הספרייה js-cookie בוורדפרס

הורידו את הספרייה מהקישור הבא (בקישור קיים הקובץ הרלוונטי בלבד) והעתיקו אותו לתיקייה בשם js בתבנית הבת שלכם. צרו את התיקייה אם אינה קיימת.

הספרייה js-cookie תומכת בכל הדפדפנים המודרניים, אין לה תלות כלשהי בספרייה אחרת, ושוקלת פחות מ-800 בייטים בדחיסת gzip.

כפי שראינו בהרבה מאמרים בבלוג זה, הדרך הנכונה להוסיף נכסים (קבצי JavaScript ו-CSS) באתר וורדפרס מתבצעת באמצעות הפונקציה wp_enqueue_scripts. הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם:

function add_scripts_to_wordpress() {
	wp_register_script( 'js_cookie', get_stylesheet_directory_uri() . '/js/js.cookie.min.js', array(), '3.0.5', true );
	wp_enqueue_script( 'js_cookie' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts_to_wordpress' );

וודאו כי הקובץ נטען כראוי על ידי בדיקת קוד המקור של העמוד או לשונית ה-Network בכלי המפתחים. שימו לב שאנו משתמשים ב-get_stylesheet_directory_uri() (תבנית בת) ולא ב-get_template_directory_uri() (תבנית אב), והקובץ נטען בפוטר (true כפרמטר האחרון).

יצירת ה-Markup עבור הפופאפ

נוסיף את ה-HTML הנחוץ שמציג את ההודעה בפוטר של אתר הוורדפרס שלנו באמצעות הפעולה wp_footer:

function cookie_notice_popup() { ?>
    <div class="cookie-notice" role="dialog" aria-label="Cookie Notice" aria-hidden="true">
    <div class="cookie-notice-inner">
        <div class="content-cookie">אנו משתמשים בעוגיות כדי לוודא חווית גלישה מיטבית באתר. המשך גלישה משמעו שאתם מקבלים את השימוש בעוגיות. קראו עוד <a href="<?php echo get_page_link('xxx'); ?>">בתקנון הפרטיות.</a></div>
            <button class="button-cookie">הבנתי</button>
        </div>
    </div>
    <?php
}
add_action('wp_footer','cookie_notice_popup');

בנוסף לכפתור האישור, אנו מציגים גם קישור לעמוד תקנון הפרטיות באתר שלכם באמצעות הפונקציה get_page_link.

החליפו את xxx בשורה 4 במזהה (ID) של עמוד תקנון הפרטיות שלכם. אתם יכולים להסיר את הקישור לגמרי אם תרצו.

אם אינכם יודעים כיצד למצוא את אותו מזהה, תנו מבט בפוסט הצגת מזהה (ID) של עמודים ופוסטים.

עיצוב הפופאפ באמצעות CSS

אתם יכולים כמובן לעצב את ההודעה כרצונכם, אך הנה נקודת התחלה נקייה שמציגה את ההודעה כפס קבוע בתחתית העמוד:

.cookie-notice {
    position: fixed;
    bottom: 0;
    background: rgba(24, 24, 24, 0.9);
    width: 100%;
    z-index: 9999;
    padding: 20px 10px;
    display: none;
    text-align: right;
    color: #fefefe;
    font-size: 14px;
}

.cookie-notice-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.content-cookie > a {
    color: #fefefe !important;
}

button.button-cookie {
    background: none;
    border: 2px solid #fefefe;
    border-radius: 28px;
    color: white;
    font-size: 14px;
    padding: 5px 26px;
    margin-top: 14px;
    cursor: pointer;
}

button.button-cookie:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {

    button.button-cookie {
        margin-top: 0;
    }

    .cookie-notice-inner {
        flex-direction: row;
    }

}

אנו משתמשים ב-Flexbox כדי להקל על העניינים. זוהי דוגמה בלבד וכנראה תצטרכו להתאים את ה-CSS לאתר הוורדפרס שלכם ולעיצוב הרצוי.

שימו לב כי האלמנט שיצרנו אינו מוצג בשלב הנוכחי (display: none). נציג אותו בשלב הבא באמצעות JavaScript, רק אם ה-Cookie אינו קיים אצל הגולש.

הצגת הפופאפ לאחר טעינת העמוד

כעת השלב המעניין. נציג את הפופאפ לאחר שהעמוד נטען, וכשהגולש ילחץ על הכפתור ניצור עוגיה ונסתיר את הפופאפ. אותה עוגיה מבטיחה שהפופאפ לא יופיע שוב בביקורים עתידיים.

הנה הקוד:

function cookieInit() {
    var ourCookie = Cookies.get('ourCookie');
    if (ourCookie) {
        return false;
    } else {
        openCookiePopup();
    }
}

function openCookiePopup() {
    setTimeout(function () {
        var notice = document.querySelector('.cookie-notice');
        if (notice) {
            notice.style.display = 'block';
            notice.setAttribute('aria-hidden', 'false');
        }
    }, 4000);
}

cookieInit();

הפונקציה הראשונה (cookieInit) בודקת האם Cookie בשם ourCookie קיים אצל הגולש. אם קיים, הפונקציה יוצאת. אם אינו קיים, היא קוראת לפונקציה openCookiePopup שמציגה את אלמנט הפופאפ לאחר השהיה של 4 שניות.

שימו לב כי קוד זה צריך לרוץ רק לאחר שספריית js-cookie נטענה. מכיוון שטענו את הספרייה בפוטר, מקמו את הקוד אחריה או טענו אותו כקובץ נפרד עם js_cookie כתלות.

הסתרת הפופאפ ויצירת ה-Cookie בלחיצה

הוסיפו את השורות הבאות לקוד הקודם. כשהגולש לוחץ על הכפתור, הפופאפ נעלם ונוצרת עוגיה כך שהפופאפ לא יופיע שוב:

document.querySelector('.button-cookie').addEventListener('click', function () {
    var notice = document.querySelector('.cookie-notice');
    notice.style.display = 'none';
    notice.setAttribute('aria-hidden', 'true');
    Cookies.set('ourCookie', 'yes', { expires: 365, path: '/', sameSite: 'Lax' });
});

השתמשנו בשתי מתודות של js-cookie: Cookies.get קוראת עוגיה ו-Cookies.set יוצרת אחת. הפרמטר expires: 365 קובע שהעוגיה תישמר למשך שנה. הוספנו גם sameSite: 'Lax' כדי לעמוד בברירות המחדל של אבטחת דפדפנים מודרניים.

כשאתם מפתחים עם עוגיות, לעתים קרובות תצטרכו למחוק אותן לצורך בדיקות. התוסף המקורי EditThisCookie הוסר מחנות התוספים של Chrome, אך קיים fork מתוחזק בשם EditThisCookie (fork) שעובד עם Manifest V3.

מספר מילים נוספות על הספרייה js-cookie

הספרייה js-cookie (גרסה 3.0.5 נכון לכתיבת שורות אלו) היא קלת משקל, עברה בדיקות מסיביות, ואין לה תלות באף ספרייה אחרת. בפחות מ-800 בייטים בדחיסת gzip, ההשפעה שלה על מהירות טעינת האתר מינימלית. הנה סקירה מהירה של ה-API:

יצירת Cookie עבור כל העמודים באתר:

Cookies.set('name', 'value');

יצירת Cookie שפג תוקפו בעוד 7 ימים:

Cookies.set('name', 'value', { expires: 7 });

יצירת Cookie תקף רק עבור העמוד הנוכחי:

Cookies.set('name', 'value', { expires: 7, path: '' });

קריאת Cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

קריאת כל העוגיות:

Cookies.get(); // => { name: 'value' }

הסרת Cookie:

Cookies.remove('name');

הסרת Cookie שהוגדר לעמוד הנוכחי:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

עוד מידע על האפשרויות של הספרייה ניתן לראות בעמוד ה-GitHub של הספרייה.

שאלות נפוצות

שאלות נפוצות בנושא יצירת פופאפ עם עוגיות בוורדפרס:

לסיכום

במדריך זה בנינו פופאפ מבוסס עוגיות לוורדפרס ללא תוספים. טענו את ספריית js-cookie, יצרנו את ה-HTML, עיצבנו אותו עם CSS, והשתמשנו ב-JavaScript כדי להציג את הפופאפ רק לגולשים שלא סגרו אותו קודם.

אותה טכניקה עובדת עבור כל הודעה חד-פעמית: הודעות הסכמה לעוגיות, באנרים לקידום מוצרים, הכרזות על פיצ׳רים חדשים, או הרשמה לניוזלטר. המפתח הוא שימוש בעוגיה כדי לעקוב אחרי האם הגולש כבר קיים אינטראקציה עם הפופאפ, כך שהוא לא יופיע שוב.