Wordpress - 自定义分页与无限滚动

Question

I have a website and in my page news I add a custom pagination with infinite scroll that works very well if the permalink is day and name but now I have to put this plain.

When I put the permalinks to generic the infinite scroll doesn't stop and repeats posts.

In my function.php I have this code:

function custom_pagination($numpages = '', $pagerange = '', $paged='') {

  if (empty($pagerange)) {
    $pagerange = 2;
  }

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

  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('«'),
    'next_text'       => __('»'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
  );

  $paginate_links = paginate_links($pagination_args);

  if ($paginate_links) {
    echo "<nav id='pagination' class='custom-pagination'>";
      echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
      echo $paginate_links;
    echo "</nav>";
  }

}

In my model news I have this:

<div class="infinite-scroll">
            <?php
              $category = get_field('nome', get_the_ID());
              $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
              var_dump($paged);
              $custom_args = array(
                  'post_type' => 'post',
                  'posts_per_page' => 6,
                  'paged' => $paged,
                  'category_name' => $category,
                );

              $articles = new WP_Query( $custom_args );
                ?>
              <?php if ( $articles->have_posts() ) : while ( $articles->have_posts() ) : $articles->the_post(); // run the loop ?>
              <div class="col-xs-12 col-sm-6 col-md-4">
                <a class="news-link" href="<?php the_permalink() ?>">
                  <div class="news">
                    <div class="image">
                      <?php the_post_thumbnail('thumbnail') ?>
                    </div>
                    <div class="title">
                      <span>
                        <?php the_title(); ?>
                      </span>
                    </div>

                    <div class="excerpt">

                    </div>
                  </div>
                </a>
              </div>
              <?php endwhile; ?>
              <?php
              var_dump($articles->max_num_pages);
                if (function_exists(custom_pagination)) {
                  custom_pagination($articles->max_num_pages,"",$paged);
                }
              ?>
</div>

In js file I have this to infinite scroll:

$('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="/wp-content/themes/template/images/loader.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '#pagination .next',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
              $('#pagination').remove();
            }
        });

I think the problem is with pagination links that doesn't stops.

How can I solve this problem?

Answer 1

You can follow the below function in your function.php file

The code for your functions.php file:

function pagination($pages = '', $range = 2) {
    $morepages = ($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">';
        if($paged > 1 && $morepages < $pages) echo '<a class="prev-link" href="'.get_pagenum_link($paged - 1).'">&larr;</a>';
        if($paged > 2 && $paged > $range+1 && $morepages < $pages) echo '<a href="'.get_pagenum_link(1).'">1</a><span class="separate">...</span>';
        for ($i=1; $i <= $pages; $i++) {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $morepages )) {
                echo ($paged == $i)? '<span class="current">'.$i.'</span>':'<a href="'.get_pagenum_link($i).'">'.$i.'</a>';
            }
        }
        if ($paged < $pages-1 && $paged+$range-1 < $pages && $morepages < $pages) echo '<span class="separate">...</span><a class="last-link" href="'.get_pagenum_link($pages).'">'.$pages.'</a>';
        if ($paged < $pages && $morepages < $pages) echo '<a class="next-link" href="'.get_pagenum_link($paged + 1).'">&rarr;</a>';
        echo '</div>';
    }
}

And then drop this into your theme where appropriate (usually on an index.php, archive.php, category.php, search.php file):

That’s the default implementation and will show links to two pages around the current page, as well as the first page and last page links, and the prev/next links.

But you can also define some of these properties right when we call the function:

<?php pagination('','3'); ?>

This will show three links around the current page.

<?php pagination('5'); ?>

This will simply show 5 links, from page 1 through 5.

</div>