个性化阅读
专注于IT技术分析

WordPress-无限滚动自定义分页

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

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

在我的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


你可以在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个链接。

赞(0) 打赏
未经允许不得转载:srcmini » WordPress-无限滚动自定义分页
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏