不用插件实现漂亮的页面导航功能

2012/05/03
不用插件实现漂亮的页面导航功能

页面导航功能是大多数博客或网站都需要的,一般都用wp-pagenavi插件来实现。这一般没什么问题,特别是一般的用户来说。但是如果你是一个特别不喜欢插件的人,实际上使用 paginate_links()这个wordpress自2.1版本以来就内置的导航函数就可以实现。但是你要说,这个就是显示早期文章,最新文章两个选项,特别难看。有没有办法实现数字导航呢?

办法是有的,把如下代码写到你的函数文件中:

// get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 )  {
     // get the current page
     if ( !$current_page = get_query_var('paged') )
          $current_page = 1;
     // structure of “format” depends on whether we’re using pretty permalinks
     $format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
     echo paginate_links(array(
          'base' => get_pagenum_link(1) . '%_%',
          'format' => $format,
          'current' => $current_page,
          'total' => $total,
          'mid_size' => 4,
          'type' => 'list'
     ));
}

HTML源码显示为:

<ul class='page-numbers'>
     <li><span class='page-numbers current'>1</span></li>
     <li><a class='page-numbers' href='http://mysite.com/page/2/'>2</a></li>
     <li><a class='page-numbers' href='http://mysite.com/page/3/'>3</a></li>
     <li><a class='page-numbers' href='http://mysite.com/page/4/'>4</a></li> 
     <li><a class='page-numbers' href='http://mysite.com/page/5/'>5</a></li>
     <li><span class='page-numbers dots'>...</span></li>
     <li><a class='page-numbers' href='http://mysite.com/page/10/'>10</a></li>
     <li><a class='next page-numbers' href='http://mysite.com/page/2/'>Next &raquo;</a></li>
</ul>

下面是使用 paginate_links()展示的效果。

页面导航
页面导航|wordpress页面导航|wp页面导航

提示:如果要完全实现上面的一样的演示效果,还需要CSS支持哦。



				

发表回复

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