WordPress 中加載更多帖子 Ajax 按鈕

通過 Ajax 加載更多帖子是內(nèi)容量較大的網(wǎng)站的常見需求。這允許用戶瀏覽多個頁面的內(nèi)容而無需刷新整個頁面。在本文中，我們將探討在 WordPress 中使用 Ajax 實現(xiàn)“加載更多帖子”按鈕所涉及的步驟。

創(chuàng)建模板代碼

首先創(chuàng)建一個您希望在其中顯示“加載更多帖子”按鈕的模板文件。在此示例中，我們將使用index.php。將以下代碼添加到您的模板中：

<div>

加載更多帖子的函數(shù)

接下來，在functions.php文件中創(chuàng)建一個函數(shù)來處理Ajax調(diào)用用于加載更多帖子。此函數(shù)將根據(jù)當前頁面和每頁帖子數(shù)查詢下一組帖子。

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>

自定義函數(shù)

提供的代碼是一個基本示例。您可以對其進行自定義以滿足您的特定要求，例如：

• 查詢參數(shù)：向查詢參數(shù)添加其他參數(shù)以根據(jù)特定條件（例如類別、
• 分頁： 添加分頁鏈接以在頁面之間導航帖子。
• 無限滾動：使用滾動事件在用戶向下滾動頁面時自動加載更多帖子。

按照以下步驟，您可以使用 Ajax 在 WordPress 中實現(xiàn)功能性“加載更多帖子”按鈕，增強訪問者瀏覽大型內(nèi)容集的用戶體驗。

以上是如何在 WordPress 中使用 Ajax 實現(xiàn)'加載更多帖子”按鈕？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！