如何在 WordPress 中使用 Ajax 實作「載入更多貼文」按鈕？

WordPress 中載入更多貼文 Ajax 按鈕

透過 Ajax 載入更多貼文是內容量較大的網站的常見需求。這允許用戶瀏覽多個頁面的內容而無需刷新整個頁面。在本文中，我們將探討在 WordPress 中使用 Ajax 實作「載入更多貼文」按鈕所涉及的步驟。

建立範本程式碼

先建立一個您希望在其中顯示「載入更多貼文」按鈕的範本檔案。在此範例中，我們將使用index.php。將以下程式碼加入您的範本：

<div>

載入更多貼文的函數

接下來，在functions.php檔案中建立一個函數來處理Ajax呼叫用於載入更多帖子。此函數將根據目前頁面和每頁貼文數查詢下一組貼文。

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax 腳本

在頁腳中，包含以下 jQuery 腳本來處理 Ajax按鈕功能：

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

自訂函數

提供的程式碼為基本範例。您可以對其進行自訂以滿足您的特定要求，例如：

• 查詢參數：向查詢參數添加其他參數以根據特定條件（例如類別、
• 分頁：新增分頁連結以在頁面之間導航貼文。 >按照以下步驟，您可以使用Ajax 在WordPress 中實現功能性「載入更多貼文」按鈕，增強訪客瀏覽大型內容集的使用者體驗。

以上是如何在 WordPress 中使用 Ajax 實作「載入更多貼文」按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！