这样的分页设计才是优秀的翻页设计

当我们的网站内容丰富了之后,我们的首页或者分类页就没法承载所有的内容了。这时我们就不得不使用到分页的方式来把内容分割。
下面我们来看一下,什么样的分页才是优秀的设计。
1.要让用户知道当前是第几页
做完一个分页不能明显的标明当前分页,是很槽糕的。

特殊颜色标明当前页
图1 特殊颜色标明当前页

不仅要用特殊颜色,当前页应该去掉a标签,并且文字用strong标签强调。
2.让用户知道总共有多少页
用户浏览网站,不停的翻页,可是不知道总共有多少页,用户就不知道什么时候能浏览完所有网页。
总页数展示
图2 总页数展示

知道总页数用户才有目标感。
3.包含足够的页面链接
足够的分页链接
图3 足够的分页链接

足够的分页链接能让用户随意跳转到想去的分页
4.要有上一页,下一页
上一页、下一页
图4 上一页、下一页

在当前页不是第一页时要有上一页链接
在当前页不是最后一页时要有下一页链接
5.要有最前页,最后页
最后页链接
图5 最后页链接

当最后页没有显示的时候要有最后页链接
最前页链接
图6 最前页链接

当第一页没有显示时要有最前页的链接
通过上面的分析,那么实现WordPress分页显示功能就需要对代码做调整了。

/*******分页显示功能
********shenglei
********http://www.wptoutiao.com/
*************************************************/
if ( ! function_exists( 'wptoutiao_pagination' ) ) :
function wptoutiao_pagination($pages = '', $range = 5)
{
	$showitems = ($range * 2); 
 
	global $paged;
	if(empty($paged)) $paged = 1;
 
	if($pages == '')
	{
		global $wp_query;
		$pages = $wp_query->max_num_pages;
		if(!$pages)
		{
			$pages = 1;
		}
	}  
 
	$front  = $paged >= $pages - $range? 10 - ($pages - $paged + 1) : $range;
	$back = $paged <= $range? 10 - $paged : $range;
 
	if(1 != $pages)
	{
		printf( '<div class="pagination">');
 
		//显示最前页
		if($paged > 2 && $paged > $range+1 && $showitems < $pages)
		{
			printf( __( '<a href="%1$s"><< 最前</a>', 'living-journal' ), get_pagenum_link(1) );
		}
 
		//显示上一页
		if($paged > 1 && $showitems < $pages) 
		{
			printf( __( '<a href="%1$s">< 上一页</a>', 'living-journal' ), get_pagenum_link($paged - 1) );
		}
 
		for ($i=1; $i <= $pages; $i++)
		{
			if (1 != $pages &&( !($i > $paged + $back || $i < $paged - $front) || $pages <= $showitems ))
			{
				echo ($paged == $i)? "<strong class=\"current\">".$i."</strong>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
			}
		}
 
		//显示下一页
		if ($paged < $pages && $showitems < $pages)
		{
			printf( __( '<a href="%1$s">下一页 ></a>', 'living-journal' ), get_pagenum_link($paged + 1) );
		}
 
		//显示最后页
		if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) 
		{
			printf( __( '<a href="%1$s">最后 >></a>', 'living-journal' ), get_pagenum_link($pages) );
		}
 
		printf( __( '<span>共 %1$s 页</span>', 'living-journal'), $pages );
 
		echo "</div>";
	}
}
endif;
/*******分页显示功能*************************************************/

(完)

版权声明WordPress头条正在使用WordPress文章版权插件
如未注明,均为原创,转载需注明出处
本文链接地址:http://www.wptoutiao.com/jiaohu/438.html

分页显示的相关文章

网站设计的相关文章

    还可以分享文章给好友:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据