Question

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

在这里提供更多信息是一个链接，底部有子弹用于分页。点击这些后，我希望网站的效果加载新帖子而不触发页面刷新。 http://maxlynn.co.uk/natural-interaction/category/all/

我的问题是，是否有任何好的教程，你可能已经取得了这种效果的成功。

如果您需要更多信息，请与我们联系。

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

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>\n</div>\n";
 }

}

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

Answer 1

您需要做的是防止分页链接上的默认值，并发送AJAX请求以获取帖子。 Wordpress以这种方式为AJAX工作：您使用wp-admin/admin-ajax.php参数将所有请求发送到action，该参数将识别请求，以便使用{在 functions.php 中捕获它{1}}和wp_ajax_nopriv_my_action挂钩。

所以基本上你会在模板文件中执行此操作：

wp_ajax_my_action

您必须根据模板更改班级名称/属性等。

在 functions.php 方面：

<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>

问题是查询所请求页面的帖子（因此我们计算页码和每页帖子选项的偏移量），并使用您用于单个帖子的模板显示它们。

您也可能想要操纵浏览器历史记录，因此您应该查看the History API。

Answer 2

filter.js文件

    $('#post-category').change(function(){
            category = $(this).find('.selected').text();
            postType = $('#search-form-type').val();
            post_filter();
        });


    function post_filter(paged){
            $.ajax(
                {
                    url:ajaxUrl,
                    type:"POST",
                    data: {action:"get_post_category","category":category,'search':search, 'postType':postType, 'paged': paged},
                    success: function(response) {
                    $('#blog-post-cover').html(response);
                }
            });
        }

        $('#blog-wrapper').on('click','#pagination a',function(e){
            e.preventDefault();     
            if ($(this).hasClass('prev')||$(this).hasClass('next')) {
                paginateNum = $(this).find('.prev-next').data('attr');
                post_filter(paginateNum);
            }
            else{
                paginateNum = $(this).text();
                post_filter(paginateNum);
            }
            $("html, body").animate({ scrollTop: 0 }, "slow");
        });
        postType = $('#search-form-type').val();
        post_filter(1);

function.php文件

add_action( 'wp_ajax_nopriv_get_post_category', 'post_category' );
add_action( 'wp_ajax_get_post_category', 'post_category' );   
function post_category() {
    $post_type = $_POST['postType'];      
    $category = $_POST['category'];
    $search = $_POST['search'];
    $paged = ($_POST['paged'])? $_POST['paged'] : 1;
    if($post_type==="resource-center"):
        $taxonomy ="resource-center-taxonomy";
    else:
        $taxonomy ="category";
    endif;
    if($category):
        $args = array(
            'post_type'         => $post_type,
            'post_status'       => 'publish',
            'tax_query' => array(
                array(
                    'taxonomy' => $taxonomy,
                    'field'    => 'slug',
                    'terms'    => $category,
                ),
            ),
            'posts_per_page'    => 5,
            'order'             => 'ASC',
            's'                 => $search,
            'paged'             => $paged
        );
    else:
        $args = array(
            'post_type'         => $post_type,
            'post_status'       => 'publish',
            'posts_per_page'    => 5,
            'order'             => 'ASC',
            's'                 => $search,
            'paged'             => $paged
        );
    endif;

    $posts = new WP_Query($args);?>
    <?php if ( $posts->have_posts() ) :?>
        <?php while ($posts->have_posts()) : $posts->the_post(); ?>
    <?php echo $post->post_title; ?>
        <?php endwhile;?>
        <?php
            $nextpage = $paged+1;
            $prevouspage = $paged-1;
            $total = $posts->max_num_pages;
            $pagination_args = array(
            'base'               => '%_%',
            'format'             => '?paged=%#%',
            'total'              => $total,
            'current'            => $paged,
            'show_all'           => false,
            'end_size'           => 1,
            'mid_size'           => 2,
            'prev_next'          => true,
            'prev_text'       => __('<span class="prev-next" data-attr="'.$prevouspage.'">&laquo;</span>'),
            'next_text'       => __('<span class="prev-next" data-attr="'.$nextpage.'">&raquo;</span>'),
            'type'               => 'plain',
            'add_args'           => false,
            'add_fragment'       => '',
            'before_page_number' => '',
            'after_page_number'  => ''
        );
        $paginate_links = paginate_links($pagination_args);

        if ($paginate_links) {
            echo "<div id='pagination' class='pagination'>";
            echo $paginate_links;
            echo "</div>";
        }?>
        <?php wp_reset_query();  ?>
    <?php else:?>           
       <div class="no-post-cover">
            <div class="container">         
               <h1 class="has-no-post-list">Posts Not Found</h1>
            </div>
        </div>
   <?php endif;?>         
   <?php die(1);
}

Wordpress类别发布AJAX分页

2 个答案: