为什么我的 WordPress'加载更多帖子”按钮无法使用 AJAX？-php教程-PHP中文网

为什么我的 WordPress'加载更多帖子”按钮无法使用 AJAX？

Mary-Kate Olsen

发布： 2024-11-28 04:56:10

原创

430 人浏览过

Why Isn't My WordPress

在 WordPress 中使用 AJAX 实现加载更多帖子

简介：

通过 AJAX 动态加载帖子是一种常见的方法 - WordPress 开发中的功能之后。它允许用户探索更多内容，而无需重新加载整个页面，从而增强用户体验。本文解决了许多人在使用 AJAX 实现加载更多帖子时面临的常见问题。

问题陈述：

用户尝试使用 AJAX 实现分页，但遇到了困难，导致页面上没有可见的变化页面和“加载更多”按钮故障。尽管检查了元素并观察了 jQuery 中的预期行为，但帖子并未添加到页面中。

解决方案：

对提供的代码片段进行分析后，出现了一些潜在问题:

jQuery: $.post 调用中的 offset 属性正在使用 (page * ppp) 1 而不是（第 - 1 页）* ppp。此公式应调整为 (page - 1) * ppp 才能正确计算下一组帖子的偏移量。
AJAX 函数： 在functions.php 中的 more_post_ajax 函数中， offset 属性应与 paged 属性结合使用。这可确保 WP_Query 检索适当的帖子页面。
php: 代码中的某处可能缺少 PHP 结束标记，这会破坏代码。
WordPress 脚本本地化： more_post_ajax 函数需要本地化为 WordPress 脚本。脚本本地化应该放在functions.js 中加载脚本之前。这允许在 JavaScript 代码中使用 ajax_posts 对象。

修订的代码：**

模板文件 (index.php):

// Calculate the offset for page 2 onwards
$offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0;

$args = [
    'post_type'             => 'post',
    'posts_per_page'        => $postsPerPage,
    'cat'                   => 1,
    'offset'                => $offset,
];

登录后复制

AJAX 函数(functions.php):

function more_post_ajax(){
    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters'     => true,
        'post_type'             => 'post',
        'posts_per_page'        => $ppp,
        'cat'                   => 1,
        'paged'                 => $page + 1, // Increase the page by 1 since offset is already calculated in the template file
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        // Generate HTML for the post
        $out .= '<div class="small-12 large-4 columns">';
        $out .= '<h1>'.get_the_title().'</h1>';
        $out .= '<p>'.get_the_content().'</p>';
        $out .= '</div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

// Localize the 'more_post_ajax' script
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'noposts'   => __('No older posts found', 'twentyfifteen'),
));

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

登录后复制

ajax.js:

$(document).ready(function() {
    var ppp = 3;
    var cat = 8;
    var pageNumber = 1;

    function load_posts(){
        pageNumber++;
        var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
        $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: str,
            success: function(data){
                var $data = $(data);
                if($data.length){
                    $("#ajax-posts").append($data);
                    $("#more_posts").attr("disabled",false);
                } else {
                    $("#more_posts").attr("disabled",true);
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
        return false;
    }

    $("#more_posts").on("click",function(){
        $("#more_posts").attr("disabled",true);
        load_posts();
    });
});

登录后复制

结论：

通过仔细解决这些问题，使用AJAX加载更多帖子的功能就可以成功实现了。偏移公式和 WordPress 脚本本地化在确保正确分页和访问 JavaScript 代码中的 WordPress 变量方面发挥着至关重要的作用。这些更正应该会产生一个功能齐全的“加载更多”按钮，该按钮可以动态地将其他帖子加载到页面上。

以上是为什么我的 WordPress'加载更多帖子”按钮无法使用 AJAX？的详细内容。更多信息请关注PHP中文网其他相关文章！