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

כפתורי "טעינת פוסטים נוספים" (Load More) מבוססי AJAX הם דרך מצוינת לשפר את חוויית המשתמש בכך שהם מאפשרים לטעון פוסטים נוספים באופן דינמי מבלי לרענן את הדף. במדריך זה נציג שלבים ליישום כפתור מסוג זה באתרי וורדפרס ללא צורך בתוספים צד שלישי.

מדוע להשתמש בכפתור טעינת פוסטים נוספים מבוסס AJAX?

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

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

הנה השלבים שיש לבצע כדי להוסיף כפתור לטעינת פוסטים נוספים (Load More) באמצעות AJAX:

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

לפני שנוכל ליישם את פונקציונליות ה-AJAX עלינו להתאים את השאילתה של וורדפרס כדי לתמוך בעימוד (pagination). הוסיפו את הקוד הבא לקובץ functions.php של התבנית שלכם:

function my_load_more_posts() {
    check_ajax_referer('load_more_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 6,
        'paged' => $paged,
    );

    $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();
    wp_die();
}
add_action('wp_ajax_my_load_more', 'my_load_more_posts');
add_action('wp_ajax_nopriv_my_load_more', 'my_load_more_posts');

פונקציה זו מטפלת בשאילתת AJAX לטעינת פוסטים נוספים. הקריאה ל-check_ajax_referer() מאמתת את ה-nonce לצרכי אבטחה, ושני ה-hooks של add_action מבטיחים שהפונקציה תעבוד עבור משתמשים מחוברים ולא מחוברים כאחד.

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

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

function enqueue_load_more_script() {
    wp_enqueue_script(
        'load-more',
        get_template_directory_uri() . '/js/load-more.js',
        array('jquery'),
        '1.0.0',
        true
    );

    wp_localize_script('load-more', 'load_more_params', array(
        'ajax_url'     => admin_url('admin-ajax.php'),
        'nonce'        => wp_create_nonce('load_more_nonce'),
        'current_page' => 1,
        'max_page' => $GLOBALS['wp_query']->max_num_pages,
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_script');

פונקציה זו טוענת את קובץ ה-JavaScript ומעבירה לו את כתובת ה-AJAX, nonce לאבטחה, ומספר העמוד המקסימלי באמצעות wp_localize_script().

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

כעת, צרו קובץ חדש בשם load-more.js בתיקיית js של התבנית שלכם והוסיפו את קוד ה-JavaScript הבא:

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

    $('#load-more-button').on('click', function() {
        if (currentPage < maxPage && canLoadMore) {
            canLoadMore = false;
            currentPage++;

            $.ajax({
                url: load_more_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'my_load_more',
                    page: currentPage,
                    nonce: load_more_params.nonce
                },
                beforeSend: function() {
                    $('#load-more-button').text('טוען...').prop('disabled', true);
                },
                success: function(response) {
                    if (response) {
                        $('.post-list').append(response);
                        canLoadMore = true;
                        $('#load-more-button').text('טעינת פוסטים נוספים').prop('disabled', false);

                        if (currentPage >= maxPage) {
                            $('#load-more-button').hide();
                        }
                    }
                },
                error: function() {
                    $('#load-more-button').text('טעינת פוסטים נוספים').prop('disabled', false);
                    canLoadMore = true;
                }
            });
        }
    });
});

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

שלב 4: הוספת כפתור טעינת פוסטים נוספים לתבנית

כעת, עליכם להוסיף את כפתור "טעינת פוסטים נוספים" לתבנית הפוסטים שלכם. מצאו את הקובץ הרלוונטי כמו index.php או archive.php, והוסיפו את הכפתור לאחר לולאת הפוסטים:

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

<button id="load-more-button">טעינת פוסטים נוספים</button>

כפתור זה יפעיל את ה-JavaScript לטעינת פוסטים נוספים בעת לחיצה.

מניעת בקשות כפולות

בעיה נפוצה היא משתמשים שלוחצים על הכפתור מספר פעמים לפני שהבקשה הראשונה מסתיימת, מה שגורם לפוסטים כפולים. הדגל canLoadMore ב-JavaScript למעלה כבר מטפל בכך – הוא מוגדר ל-false לפני הבקשה ומשוחזר ל-true רק לאחר קבלת תשובה.

כמשוב ויזואלי נוסף, הפונקציה beforeSend משביתה את הכפתור ומשנה את הטקסט שלו ל"טוען…" בזמן שהבקשה מתבצעת. כך ברור למשתמש שמשהו קורה.

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

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

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

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

שיקולי SEO עבור כפתור טעינת פוסטים נוספים מבוסס AJAX

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

• ספקו חלופת עימוד – ודאו שכל התוכן נגיש דרך קישורי עימוד מסורתיים (ראו את סעיף החלופה למעלה). כך נותנים לסורקים נתיב סטטי לכל פוסט.
• השתמשו בנתונים מובנים – הוסיפו סימון Schema.org כדי לעזור למנועי החיפוש להבין את מבנה התוכן.
• בדקו ב-Google Search Console – השתמשו בכלי בדיקת כתובות URL כדי לוודא שגוגל רואה את התוכן המעומד שלכם.

גוגל הפסיקה לתמוך בתגי rel="next" ו-rel="prev" בשנת 2019. אין צורך להוסיף תגים אלו לצרכי SEO.

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

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

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

בכך תבטיחו חוויית משתמש חלקה גם אם המשתמש הגיע לסוף התוכן.

שאלות נפוצות

שאלות נפוצות על יישום כפתור טעינת פוסטים נוספים מבוסס AJAX בוורדפרס:

סיכום

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

היישום דורש ארבעה חלקים: פונקציית AJAX ב-PHP עם אימות nonce, פונקציית enqueue שמעבירה פרמטרים ל-JavaScript, קובץ JS ששולח את הבקשה ומוסיף את התשובה, וכפתור בתבנית.

תמיד כללו חלופת עימוד מסורתי עבור משתמשים ללא JavaScript פעיל ועבור סורקי מנועי חיפוש.