AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Ajax作者：编程之家原文地址

我已经看过旧的问题,并尝试了许多不同的方法,似乎是这样做的.我最接近工作的是这一个：How to implement pagination on a custom WP_Query Ajax

我已经尝试了一切,它只是不起作用.页面上绝对没有任何变化.如果您检查“加载更多”按钮并单击它,则jquery正在进行“加载更多按钮”操作,因为它更改为< a id =“more_posts”>加载更多< / a>至< a id =“more_posts”disables =“disabled”>加载更多< / a>反正即使这对我来说也不合适.它没有添加帖子,我想我错过了一些简单的东西,但对于我的生活,我无法解决它.

我的模板文件中的代码是：

<div id="ajax-posts" class="row">
    <?PHP 
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="small-12 large-4 columns">
            <h1><?PHP the_title(); ?></h1>
            <p><?PHP the_content(); ?></p>
        </div>
        <?PHP
    endwhile; 

    echo '<a id="more_posts">Load More</a>';

    wp_reset_postdata(); 
    ?>
</div>

我的函数文件中的代码是：

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

而我的JQuery在页脚中是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        var ajaxUrl = "<?PHP echo admin_url('admin-ajax.PHP')?>";

        // What page we are on.
        var page = 5; 
        // Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() {
            // When btn is pressed.
            $("#more_posts").attr("disabled",true);

            // disable the button, temp.
            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                // CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            });
        });
    });
</script>

任何人都可以看到我缺少或能够帮助的东西吗？

解决方法:

更新于2016年4月24日.

我在我的第https://madebydenis.com/ajax-load-posts-on-wordpress/页上创建了关于在Twenty Sixteen主题上实现这个的教程,所以请随时查看:)

编辑

我已经在Twenty Fifteen上测试了它并且它正在工作,所以它应该适合你.

在index.PHP中(假设你想要在主页面上显示帖子,但即使你把它放在页面模板中也应该有效)我把：

    <div id="ajax-posts" class="row">
        <?PHP
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
                    'cat' => 8
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?PHP the_title(); ?></h1>
                <p><?PHP the_content(); ?></p>
         </div>

         <?PHP
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

这将从类别8输出3个帖子(我在该类别中有帖子,所以我使用它,你可以使用你想要的任何东西).您甚至可以查询您所在的类别

$cat_id = get_query_var('cat');

这将为您提供在查询中使用的类别ID.你可以将它放在你的加载器中(加载更多div),然后使用jQuery

<div id="more_posts" data-category="<?PHP echo $cat_id; ?>">>Load More</div>

并拉出类别

var cat = $('#more_posts').data('category');

但就目前而言,你可以把它排除在外.

接下来在functions.PHP中添加了

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

在现有的wp_localize_script之后.这将加载wordpress自己的admin-ajax.PHP,以便我们可以在我们的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' => 8,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

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

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

在这里,我在数组中添加了分页键,以便循环可以跟踪您加载帖子时的页面.

如果您已在加载程序中添加了类别,则需要添加：

$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

而不是8,你会把$cat.这将在$_POST数组中,您将能够在ajax中使用它.

最后一部分是ajax本身.在functions.js中我放入$(document).ready();环境

var ppp = 3; // Post per page
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(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // disable the button, temp.
    load_posts();
});

保存它,测试它,它的工作原理:)

图像作为证据(不介意粗制滥造的样式,它很快完成).发布内容也是乱码xD

enter image description here

enter image description here

enter image description here

UPDATE

对于“无限加载”而不是按钮上的点击事件(只是使其隐藏,可见性：隐藏;)您可以尝试

$(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});

当你从页面底部100px时,这应该运行load_posts()函数.在我的网站上的教程的情况下,您可以添加一个检查以查看帖子是否正在加载(以防止两次激活ajax),并且当滚动到达页脚顶部时可以触发它

$(window).on('scroll', function(){
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                load_posts();
        }
    }
});

现在,在这些情况下唯一的缺点是你永远不会滚动到$(document).height() – 100或$(‘footer’).offset().top的值因某种原因.如果发生这种情况,只需增加滚动所在的数字即可.

您可以通过在代码中放入console.log来轻松检查它,并在检查器中查看它们丢弃的内容

$(window).on('scroll', function () {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();
    }
});

并相应调整;)

希望这有帮助:)如果您有任何问题,请问.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native