כיצד להוסיף גלילה אינסופית לאתר וורדפרס בעזרת JavaScript

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

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

אז במדריך זה נראה כיצד ליישם גלילה אינסופית בוורדפרס באמצעות JavaScript ו-AJAX, ללא צורך בתוסף.

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

הוספת גלילה אינסופית בהצגת פוסטים – שלב אחר שלב

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

שלב 1: התאמת השאילתה בוורדפרס

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

function my_infinite_scroll_query() {
    $args = array(
        'post_type' => 'post', // סוג הפוסטים שיש לשלוף
        'posts_per_page' => 6, // מספר הפוסטים שיש להציג בכל "דף"
        'paged' => isset($_POST['page']) ? intval($_POST['page']) : 1,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            get_template_part('template-parts/content', get_post_format()); // התאימו בהתאם למבנה התבנית שלכם
        endwhile;
    endif;

    wp_reset_postdata(); // איפוס נתוני הפוסטים לאחר השאילתה המותאמת
    die();
}
add_action('wp_ajax_my_infinite_scroll', 'my_infinite_scroll_query');
add_action('wp_ajax_nopriv_my_infinite_scroll', 'my_infinite_scroll_query');

הפונקציה המוצגת מעלה יוצרת שאילתה מותאמת לשליפת פוסטים מבסיס נתונים. שימו לב שאנו מוסיפים שתי פעולות (actions) בסוף הפונקציה, האחת שמטפלת בבקשות AJAX עבור משתמשים מחוברים ווהשנייה לאלו שאינם מחוברים.

שלב 2: טעינת קובץ ה-JavaScript

כעת עלינו לטעון את קובץ ה-JavaScript שייצור את הפעולה של הגלילה האינסופית. פתחו שוב את קובץ functions.php של התבנית שלכם והוסיפו את הקוד הבא:

function enqueue_infinite_scroll_js() {
    wp_enqueue_script(
        'infinite-scroll',
        get_template_directory_uri() . '/js/infinite-scroll.js',
        array('jquery'),
        null,
        true
    );

    wp_localize_script('infinite-scroll', 'infinite_scroll_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
        'max_page' => $GLOBALS['wp_query']->max_num_pages,
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_js');

הפונקציה טוענת את קובץ ה-JavaScript שניצור בהמשך ומעבירה לו פרמטרים רלוונטיים כמו כתובת ה-AJAX ומספר העמוד הנוכחי.

שלב 3: יצירת קובץ JavaScript

כעת ניצור קובץ חדש בשם infinite-scroll.js בתוך תיקיית js של התבנית ונוסיף לו את ה-JavaScript הבא:

jQuery(function($) {
    var canLoadMore = true;
    var currentPage = infinite_scroll_params.current_page;
    var maxPage = infinite_scroll_params.max_page;

    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300 && canLoadMore && currentPage < maxPage) {
            canLoadMore = false;
            currentPage++;
            $.ajax({
                url: infinite_scroll_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'my_infinite_scroll',
                    page: currentPage
                },
                success: function(response) {
                    if (response) {
                        $('.post-list').append(response); // התאימו בהתאם למבנה התבנית שלכם
                        canLoadMore = true;
                    }
                },
                error: function() {
                    console.log('Failed to load more posts.');
                }
            });
        }
    });
});

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

שלב 4: התאמת מבנה ה-HTML

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

<?php
echo '<div class="post-list">';
?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part('template-parts/content', get_post_format()); ?>
    <?php endwhile; endif; ?>
<?php
echo '</div>';
?>

וודאו שהקלאס post-list תואם לזה שמוגדר בקוד ה- JavaScript כך שהפוסטים החדשים שנטענים ייטענו ל container הזה.

בזאת סיימנו… בדקו אם עובד לכם, ואם לא שתפו אותנו בתגובות הפוסט…

תאימות דפדפנים ואופטימיזציה לביצועים

מרבית הדפדפנים המודרניים יתמכו בגלילה אינסופית מבוססת JavaScript אך תמיד מומלץ לבדוק את הפיצ'ר בדפדפנים ומכשירים שונים.

אם אתם מבחינים בבעיות ביצועים עם התדירות התכופה בבדיקת אירוע הגלילה (scroll event), תוכלו לבצע אופטימיזציה לביצועים באמצעות window.requestAnimationFrame() בכדי ״לווסת״ את האירוע. הנה דוגמה מהירה:

var ticking = false;

$(window).on('scroll', function() {
    if (!ticking) {
        window.requestAnimationFrame(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300 && canLoadMore && currentPage < maxPage) {
                // לוגיקת טעינת פוסטים נוספים
            }
            ticking = false;
        });
        ticking = true;
    }
});

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

הוספת חלופה לעימוד מסורתי

מומלץ להוסיף אלטרנטיבה המציגה עימוד מסורתי (standard pagination) במקרה שהגלילה האינסופית נכשלת או במידה ולמשתמש אין JavaScript פעיל. ניתן לעשות זאת על ידי הוספת עימוד רגיל בתחתית רשימת הפוסטים שיופיע רק אם הגלילה האינסופית נכשלה או ש-JavaScript אינו זמין.

if (function_exists('the_posts_pagination')) {
    the_posts_pagination();
}

שיקולי SEO עבור גלילה אינסופית

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

הנה מספר טיפים שיעזרו לכם להבטיח שמנועי החיפוש יוכלו לסרוק את התוכן שלכם ביעילות:

• ודאו שכל התוכן נגיש דרך עימוד מסורתי כחלופה.
• השתמשו בנתונים מובנים (כגון סימון Schema.org) כדי לעזור למנועי החיפוש להבין את התוכן בכל עמוד.
• שקלו להשתמש בתגי rel="next" ו-rel="prev" בעימוד כדי לציין את סדר התוכן.

התמודדות עם מקרים חריגים ושגיאות

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

if (!response || currentPage >= maxPage) {
    canLoadMore = false;
    $('.load-more-message').text('אין עוד פוסטים לטעון.');
} else {
    $('.post-list').append(response);
    canLoadMore = true;
}

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

<div class="load-more-message"></div>

סיכום

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

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