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

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

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

המימוש כולל שלושה חלקים: פונקציית PHP להשוואת תאריכים, CSS למיקום ועיצוב, ו-JavaScript לאנימציית הופעה/היעלמות.

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

את הפונקציה הבאה יש להוסיף לקובץ functions.php של תבנית הבת שלכם או ל-MU-Plugin. הקוד בודק את תאריכי הפוסט ומוציא את ה-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.

התנאי השני (שורה 6) בודק האם תאריך הפרסום של הפוסט ישן יותר מ-80 יום. רק כששני התנאים מתקיימים, ה-markup של ההודעה יוצג.

קצת עיצוב

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

.updatedNotice {
    position: fixed;
    top: 236px;
    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 שניות) הקלאס מוסר כדי להסתיר אותו שוב.

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

קלאס מתווסף לאחר טעינת האלמנט כדי להפעיל את אנימציית ה-fade-in, ומוסר לאחר זמן מוגדר כדי להפעיל fade-out:

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

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

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

});

הקוד מטרגט את האלמנט .updatedNotice ומוסיף לו את הקלאס fadeIn, המכיל את תכונות האנימציה הבאות:

.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;
    }
}

כאן נעשה שימוש ב-@keyframes כדי לשנות את ה-opacity, אבל קיימות חלופות פשוטות יותר – למשל, transition ב-CSS על תכונת ה-opacity יכול להשיג את אותה תוצאה ללא keyframes.

שאלות נפוצות

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

סיכום

פוסט זה הדגים כיצד להציג הודעת התראה זמנית בפוסטים בוורדפרס שעודכנו לאחרונה. הפתרון משלב השוואת תאריכים ב-PHP להצגה מותנית של ההודעה, CSS למיקום ואנימציה, ו-JavaScript לשליטה על תזמון ה-fade-in וה-fade-out.