Wordpress 类别发布 AJAX 分页 [英] Wordpress category post AJAX Pagination

问题描述

我真的很难找到一种使用 ajax 为我的 Wordpress 帖子创建分页的方法.我找到的解决方案不起作用.

I'm really struggling to find a way to create pagination with ajax for my Wordpress posts. The solutions that I have found do not work.

为了提供更多信息，这里有一个链接，底部有用于分页的项目符号.单击这些后，我希望网站的效果可以在不触发页面刷新的情况下加载新帖子.http://maxlynn.co.uk/natural-interaction/category/all/

To be more informative about this here is a link that has bullets at the bottom for pagination. Once these are clicked I want the effect of the site to load the new posts without triggering a page refresh. http://maxlynn.co.uk/natural-interaction/category/all/

我的问题是，是否有任何好的教程可以让您成功实现此类效果.

My question is, is there any good tutorials out there that you may have had success with for this type of effect.

如果您需要更多信息，请告诉我.

Let me know if you need more information.

****** 更新 ******

****** UPDATE ******

function kriesi_pagination($pages = '', $range = 2) {
 $showitems = ($range * 2)+1;

 global $paged;
 if (empty($paged)) $paged = 1;

 if ($pages == '') {
     global $wp_query;
     $pages = $wp_query->max_num_pages;
     if (!$pages) {
         $pages = 1;
     }
 }

 if (1 != $pages) {
     echo "<div class='pagination'><div class='pagination-container'>";
     if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
     if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

     for ($i=1; $i <= $pages; $i++) {
         if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
         {
             echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
         }
     }

     if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
     if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
     echo "</div>
</div>
";
 }

}

这是我正在使用的 PHP，我将如何使用这个 php 创建一个 ajax 请求，以便页面不会重新加载?

This is my PHP that I'm using, how would I use this php to create an ajax request so that the page doesn't reload?

推荐答案

你需要做的是阻止默认的分页链接，并发送一个 AJAX 请求来获取帖子.Wordpress 以这种方式为 AJAX 工作:您将所有请求发送到 wp-admin/admin-ajax.php 并带有一个 action 参数，该参数将识别请求以便捕获它在 functions.php 中使用 wp_ajax_nopriv_my_action 和 wp_ajax_my_action 钩子.

What you need to do is to prevent default on the pagination links, and send an AJAX request to get the posts. Wordpress works in this way for AJAX: you send all your requests to wp-admin/admin-ajax.php with an action parameter that will identify the request in order to catch it in functions.php using wp_ajax_nopriv_my_action and wp_ajax_my_action hooks.

所以基本上你会在你的模板文件中做到这一点:

So basically you will do this in your template file:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.pagination a').click(function(e) {
            e.preventDefault(); // don't trigger page reload
            if($(this).hasClass('active')) {
                return; // don't do anything if click on current page
            }
            $.post(
                '<?php echo admin_url('admin-ajax.php'); ?>', // get admin-ajax.php url
                {
                    action: 'ajax_pagination',
                    page: parseInt($(this).attr('data-page')), // get page number for "data-page" attribute
                    posts_per_page: <?php echo get_option('posts_per_page'); ?>
                },
                function(data) {
                    $('#content-posts').html(data); // replace posts with new one
                }
            });
        });
    });
</script>

您必须根据模板更改类名称/属性等.

You'll have to change classes names / attributes etc depending of your template.

在 functions.php 方面:

function my_ajax_navigation() {
    $requested_page = intval($_POST['page']);
    $posts_per_page = intval($_POST['posts_per_page']) - 1;
    $posts = get_posts(array(
        'posts_per_page' => $posts_per_page,
        'offset' => $page * $posts_per_page
    ));
    foreach ($posts as $post) {
        setup_postdata( $post );
        // DISPLAY POST HERE
        // good thing to do would be to include your post template
    }
    exit;
}
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_navigation' );
add_action( 'wp_ajax_nopriv_ajax_paginationr', 'my_ajax_navigation' );

问题是查询所请求页面的帖子(因此我们根据页码和每页帖子选项计算偏移量)，并将它们与您用于单个帖子的模板一起显示.

The thing is to query the posts of the page requested (so we calculate the offset from the page number and the posts per page option), and display them with the template you use for single posts.

您可能也想操作浏览器历史记录，为此您应该检查 历史 API.

You may want to manipulate the browser history too, for that you should check on the History API.

这篇关于Wordpress 类别发布 AJAX 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！