WordPress-具有无限滚动功能的自定义分页

时间:2018-07-05 08:57:53

标签: php wordpress wordpress-theming infinite-scroll custom-wordpress-pages

我有一个网站,在我的页面新闻中,我添加了一个带有无限滚动的自定义分页,如果永久链接为day and name,效果很好,但是现在我必须简单地说明这一点。

当我将永久链接设置为泛型时,无限滚动不会停止并重复发布。

在我的function.php中,我有以下代码:

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>";
  }

}

在我的模特新闻中,我有这个:

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

在js文件中,我可以进行无限滚动:

$('.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();
            }
        });

我认为问题在于分页链接不会停止。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

您可以在function.php文件中遵循以下功能

functions.php文件的代码:

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

然后将其适当放置到您的主题中(通常在index.php,archive.php,category.php,search.php文件上):

这是默认的实现,它将在当前页面周围显示指向两个页面的链接,以及首页和末页链接以及上一页/下一页链接。

  

但是您也可以在调用函数时定义其中一些属性:

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

  

这将在当前页面周围显示三个链接。

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

这将仅显示从第1页到第5页的5个链接。