使用WP-pagenavi和AJAX的WordPress页面导航

问题描述：

I am trying to get page navigation going, for posts which are displayed as an ajax response.

I'm not sure exactly how to accomplish this.

Here is some code to look at.

$posts_per_page = 6;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$pageposts = query_posts(
    array(
    'post_type' => 'post',
    'cat' => intval($_POST['pageCategory']),
    'paged' => $paged,
    'posts_per_page' => $posts_per_page,
));


if ($pageposts):
    $response = '';

    foreach ($pageposts as $post):
        $postId = get_the_ID();
        $postPermalink = get_the_permalink($postId);
        $postTitle = get_the_title();

        $response .= '
        <article class="gridView col-lg-4 col-md-6 col-xs-12">
            <div class="list-article-thumb" style="background: url('; if ( get_the_post_thumbnail_url() == false ) { $response .= get_stylesheet_directory_uri() . '/images/placholder2.png'; } else { $response .= get_the_post_thumbnail_url(); } $response .= ') no-repeat; height: 445px; background-size: cover; position: relative;">

            </div>

        </article>
        ';
    endforeach;

    $response .= wp_pagenavi();
    wp_reset_query();

else :
    $response = '
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn\'t here.</p>
    ';
endif;

The page navigation is returned as part of the ajax request but when I click on the next page button it goes to that page, rather than sending another request to ajax-posts.php

Cheers ol mates

我正在尝试进行页面导航，对于显示为ajax响应的帖子。 p> \ n

我不确定如何完成这项工作。 p>

以下是一些要查看的代码。 p>

   $ posts_per_page = 6; 
 $ paged =（get_query_var（'paged'））？  get_query_var（'paged'）：1; 
 
 $ pageposts = query_posts（
 array（
'post_type'=＆gt;'post'，
'cat'=＆gt; intval（$ _ POST ['pageCategory'  ]），
'paged'=＆gt; $ paged，
'possages_per_page'=＆gt; $ posts_per_page，
））; 
 
 
if（$ pageposts）：
 $ response =''; \  n 
 foreach（$ pageposts as $ post）：
 $ postId = get_the_ID（）; 
 $ postPermalink = get_the_permalink（$ postId）; 
 $ postTitle = get_the_title（）; 
 
 $ response。='  
＆lt; article class =“gridView col-lg-4 col-md-6 col-xs-12”＆gt; 
＆lt; div class =“list-article-thumb”style =“background：url（';  if（get_the_post_thumbnail_url（）== false）{$ response。= get_stylesheet_directory_uri（）。'/ images / placholder2.png';} else {$ response。= get_the_post_thumbnail_url（）;} $ response。='）no-repeat; height  ：445px; background-size：cover; position：relative;“＆gt; 
 
＆lt; / div＆gt; 
 
＆lt; / article＆gt; 
'; 
 endforeach; 
 
 $ response。=  wp_pagenavi（）; 
 wp_rese  t_query（）; 
 
else：
 $ response ='
＆lt; h2 class =“center”＆gt; Not Found＆lt; / h2＆gt; 
＆lt; p class =“center”＆gt;抱歉，你是 寻找不在这里的东西。＆lt; / p＆gt; 
'; 
endif; 
  code>  pre> 
 
 页面导航作为ajax请求的一部分返回 但当我点击下一页按钮时，它会转到该页面，而不是向ajax-posts.php发送另一个请求 p> 
 
 
干杯ol配偶 p> 
  div>

答

OK so it seems using WP-pagenavi was pointless, was easier to build my own solution. It uses infinite scrolling.

Here is what I have done:

Initially I send the ajax request with a limit of 6 posts.

var pageCategory = "' . $categoryId . '";
$.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
    initialize: true, pageCategory: pageCategory, resultLimit: 6
}).done(function(data) {
    $("#primary #main").html(data);
});

On the ajax-posts.php page I process the request using the new limit var and include some jquery in the response.

global $wpdb;
global $post;

$limit = $_POST['resultLimit'];

$querystr = "SELECT {$wpdb->prefix}posts.ID, {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.post_excerpt, {$wpdb->prefix}posts.guid, {$wpdb->prefix}posts.post_date, {$wpdb->prefix}posts.post_author
FROM {$wpdb->prefix}posts
LEFT JOIN {$wpdb->prefix}term_relationships rel ON rel.object_id = {$wpdb->prefix}posts.ID
LEFT JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_taxonomy_id = rel.term_taxonomy_id
LEFT JOIN {$wpdb->prefix}terms t ON t.term_id = tax.term_id
WHERE t.term_id = " . $_SESSION['pageCategory'] . "
AND {$wpdb->prefix}posts.post_type = 'post' 
ORDER BY {$wpdb->prefix}posts.post_date DESC
LIMIT $limit
";

$pageposts = $wpdb->get_results($querystr, OBJECT);


if ($pageposts):
$response = '';

foreach ($pageposts as $post):
    $postId = get_the_ID();
    $postPermalink = get_the_permalink($postId);
    $postTitle = get_the_title();

    $response .= '
    <article class="gridView col-lg-4 col-md-6 col-xs-12">
        <div class="list-article-thumb" style="background: url('; if ( get_the_post_thumbnail_url() == false ) { $response .= get_stylesheet_directory_uri() . '/images/placholder2.png'; } else { $response .= get_the_post_thumbnail_url(); } $response .= ') no-repeat; height: 445px; background-size: cover; position: relative;">

        </div>

    </article>
    ';
endforeach;
//This is the jquery to make infinite scroll happen
$response .= '
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() - 50 == $(document).height() - 50) {
                    var pageCategory = ' . $_SESSION['pageCategory'] . '
                    $.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                        initialize: true, pageCategory: pageCategory, resultLimit: 6 + ' . $limit . '
                    }).done(function(data) {
                        $("#primary #main").html(data);
                    });
                    alert($limit);
                }
            });
        });
    </script>
';

wp_reset_query();

else :
$response = '
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn\'t here.</p>
';
endif;

使用WP-pagenavi和AJAX的WordPress页面导航

相关推荐