在WordPress中加载更多帖子的Ajax按钮

13 浏览
0 Comments

在WordPress中加载更多帖子的Ajax按钮

我浏览了旧的问题并尝试了许多不同的方法来解决这个问题。我最接近成功的方法是这个链接:如何在自定义WP_Query Ajax上实现分页。我尝试了所有的方法,但都没有成功。页面上绝对没有任何变化。如果检查“加载更多”按钮并点击它,jQuery会执行“加载更多”按钮的操作,从Load More变为Load More,但即使这样,它似乎对我来说也不正确。它没有添加帖子,我觉得我可能忽略了一些简单的东西,但是我无论如何都弄不明白。\n我的模板文件中的代码如下:\n

     'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post(); ?>
            

Load More'; wp_reset_postdata(); ?>

\n我的功能文件中的代码如下:\n

function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];
    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post(); 
        the_content();
    }
    exit; 
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

\n我的页脚中的jQuery代码如下:\n



\n有人能看出我漏掉了什么或者能够提供帮助吗?

0
0 Comments

问题出现的原因:

这个问题的原因是用户想要在WordPress中使用“Load More Posts Ajax Button”,但是他们不知道如果不使用任何分类,如何使用这个代码。他们希望能够在自定义帖子类型中使用这个代码。

解决方法:

用户被告知下次应该在相关答案的评论中提问,而不是在“回答”字段中提问。这样可以更好地促进开放式讨论。

文章标题:如何在WordPress中使用Load More Posts Ajax Button解决方案

在使用WordPress时,有时我们可能需要在页面上添加一个“Load More Posts Ajax Button”按钮,以便在不刷新整个页面的情况下加载更多帖子。这对于提高用户体验和网站性能非常有帮助。

然而,有些用户可能会遇到问题,尤其是当他们想要在自定义帖子类型中使用这个功能时。下面是解决这个问题的方法。

1. 打开WordPress后台,进入主题的文件编辑器。

2. 找到并编辑主题的functions.php文件。

3. 在文件的末尾添加以下代码:

function custom_load_more_posts_ajax_button() {
    global $wp_query;
 
    if ( !is_category() && is_singular( 'custom_post_type' ) ) {
        $total_pages = $wp_query->max_num_pages;
        $current_page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
 
        if ( $total_pages > $current_page ) {
            echo '';
            echo '';
        }
    }
}
 
add_action( 'wp_footer', 'custom_load_more_posts_ajax_button' );

在上面的代码中,我们首先检查当前页面是否不是分类页面并且是自定义帖子类型页面。如果是,则获取总页面数和当前页面数。

然后,我们在页面底部输出一个“Load More Posts”按钮,并使用jQuery在按钮被点击时执行Ajax请求。

Ajax请求将发送当前页码、操作名称和帖子类型作为数据,并在成功时将响应插入到页面中。

最后,将这个函数添加到wp_footer的action中,以确保它在页面底部输出。

4. 保存并更新functions.php文件。

现在,您就可以在自定义帖子类型页面上看到“Load More Posts Ajax Button”按钮了。当您点击按钮时,它将加载更多帖子,而不会刷新整个页面。

希望这篇文章对于解决使用“Load More Posts Ajax Button”功能的问题有所帮助。如果您有任何疑问,请在评论中提问。

0
0 Comments

WordPress中的“Load More Posts Ajax Button”问题是因为没有正确加载和调用WordPress的ajax功能导致的。下面是解决这个问题的方法:

首先,在主题的index.php文件中添加以下代码来显示帖子:

'post', 'posts_per_page' => $postsPerPage, 'cat' => 8 ); $loop = new WP_Query($args); while ($loop->have_posts()) : $loop->the_post(); ?>

然后,在functions.php文件中使用wp_localize_script函数添加以下代码来加载WordPress的ajax功能:

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

接下来,在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' => 8,
        'paged' => $page,
    );
    $loop = new WP_Query($args);
    $out = '';
    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        $out .= '

'.get_the_title().'

'.get_the_content().'

'; endwhile; endif; wp_reset_postdata(); die($out); } add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

最后,在functions.js文件中添加以下代码来实现ajax加载帖子:

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();
});

这样就实现了在WordPress中使用ajax加载帖子的功能。希望对你有所帮助!

0