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

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

נכתב ע״י רועי יוסף

עודכן ב- 30 לנובמבר, 2021

אין תגובות

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

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

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

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

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

השוואת תאריכים והצגת ההודעה רק בטווח תאריכים מסויים

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

<?php //REMOVE THIS PHP OPENING TAG

function add_post_updated_notice() {

	if ( strtotime( get_the_modified_time( 'd-m-Y' ) ) > strtotime( '-45 days' ) ) {
		if ( strtotime( get_the_date( 'd-m-Y' ) ) < strtotime( '-80 days' ) ) {
			?>
            <div class="updatedNotice">
                <div>הפוסט עודכן לאחרונה</div>
            </div>
			<?php
		}
	}
}
add_action( 'wp_footer', 'add_post_updated_notice' );

תנאי ראשון מופיע בשורה מספר 5 וזה מבצע השוואה ובדיקה האם העדכון של הפוסט התבצע ב 45 ימים האחרונים. בכדי שנוכל להשוות בין התאריכים אנו ממירים את התאריך ל Unix timestamp באמצעות הפונקציה strtotime של PHP.

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

קצת עיצוב…

נוסיף את ה CSS הבא בכדי לקבוע את מיקום ההודעה במסך ואת הנראות שלה:

.updatedNotice {
    position: fixed;
    top: 236px;
    will-change: opacity;
    right: 12px;
    background: #26947b;
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    width: 72px;
    height: 72px;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
}

שנו כמובן את העיצוב כרצונכם, אך שימו לב כי בתכונה האחרונה קבענו את השקיפות (opacity) של האלמנט ל 0 כך שהוא אינו נראה במצבו הראשוני. באמצעות JavaScript אנו נוסיף לאלמנט קלאס ב document.ready בכדי להסיר את השקיפות, ואף נקבע כי הקלאס הזה יוסר לאחר 7000ms שזה בעצם 7 שניות…

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

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

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

    let $notice = $('.updatedNotice');
    $notice.addClass('fadeIn');

    setTimeout(function(){
        $('.updatedNotice').removeClass('fadeIn').addClass('fadeOut');
    }, 7000);

});

אנו מטרגטים את האלמנט שלנו ומוסיפים לו את הקלאס fadeIn המכיל את תכונות ה CSS הבאות:

.fadeIn {
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1 !important;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
}


@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}