WordPress非插件实现文章列表分页导航代码

博客开通快一个月了,最近一直在折腾WordPress主题,自己开发的博客主题也完成了一部分了,马上就能和大家见面了。话说WP自带的就”较早文章”和”最新文章”两个内置函数,要想实现Web2.0风格CSS分页是不可能的了。虽然可以装插件来解决,但是最求完美的我还是希望在主题模板里面能解决这一问题。

在谷歌上百度了好久,参考了一些WP分页插件的代码,终于让我摸索出来了。不敢独享,拿出来与大家分享!
在主题文件夹的functions.php添加一下代码:

function wp_pagenavi($args = array()) {
  $defaults = array('before' => '', 'link_before' => '', 'link_after' => '', 'first_text' => __('« First'), 'last_text' => __('Last »'), 'prev_text' => __('«'), 'next_text' => __('»'), 'range' => 5, 'echo' => true);
  $args = wp_parse_args($args, $defaults);
  extract($args, EXTR_SKIP);
  global $paged,$wp_query;
  $out = '';
  if (!$max_page) {
    $max_page = $wp_query -> max_num_pages;
  }
  if ($max_page > 1) {
    if (!$paged) {
      $paged = 1;
    }
    if ($paged != 1) {
      $out .= str_replace('%', ' href="'.get_pagenum_link(1).'"  title="'._($first_text).'"', $link_before);
      $out .= _($first_text).$link_after;
    }else{
	  $out .= ''._($first_text).'';
	  $out .= ''._($prev_text).'';
	}
    $out .= get_previous_posts_link(_($prev_text));
    if ($max_page > $range) {
      if ($paged < $range) {
        for ($i = 1; $i <= ($range + 1); $i++) {
          $out .= str_replace('%', ' href="'.get_pagenum_link($i).'" '. ($i == $paged ? ' class="current"': '').'', $link_before);
          $out .= "$i".$link_after;
        }
      }
      elseif($paged >= ($max_page - ceil(($range / 2)))) {
        for ($i = $max_page - $range; $i <= $max_page; $i++) {
          $out .= str_replace('%', ' href="'.get_pagenum_link($i).'" '. ($i == $paged ? ' class="current"': '').'', $link_before);
          $out .= "$i".$link_after;
        }
      }
      elseif($paged >= $range && $paged < ($max_page - ceil(($range / 2)))) {
        for ($i = ($paged - ceil($range / 2)); $i <= ($paged + ceil(($range / 2))); $i++) {
          $out .= str_replace('%', ' href="'.get_pagenum_link($i).'" '. ($i == $paged ? ' class="current"': '').'', $link_before);
          $out .= "$i".$link_after;
        }
      }
    } else {
      for ($i = 1; $i <= $max_page; $i++) {
        $out .= str_replace('%', ' href="'.get_pagenum_link($i).'" '. ($i == $paged ? ' class="current"': '').'', $link_before);
        $out .= "$i".$link_after;
      }
    }
    $out .= get_next_posts_link(_($next_text));
    if ($paged != $max_page) {
      $out .= str_replace('%', ' href="'.get_pagenum_link($max_page).'"  title="'._($last_text).'"', $link_before);
      $out .= _($last_text).$link_after;
    }else{
	  $out .= ''._($next_text).'';
	  $out .= ''._($last_text).'';
	}
  }

  $out = $before."\n$out\n".$after;
  if ($echo) echo $out;
  return $out;

}

添加调用代码至主题archive.php、search.php、index.php、category.php


你也可以自定义最外面包裹的div

 '

', 'after' => '

')); ?>

或者你也可以自定义链接文字

 __('« 首页'), 'last_text' => __('最后一页 »'), 'prev_text' => __('下一页 «'), 'next_text' => __('» 上一页'))); ?>

也许你想多显示几个链接,’range’ 就是要显示分页链接的个数。

添加美化代码至主题style.css

.pagenavi{ font-size:12px; text-align:right; margin:20px 0;}
.pagenavi a, .pagenavi span{ text-decoration:none; padding:2px 5px; margin:2px; color:#838383;border: 1px solid #DEDFDE; } 
.pagenavi a:hover{ border-color:#000; color:#fff; background:#0061de;} 
.pagenavi a.current,.pagenavi a.current:hover{ font-weight:bold; color:#ff0084; border:none; background:none; }
.pagenavi span.disable{color:#adaaad; border:none;}

下面我们一起来预览下效果吧!
wp_pagenavi

“WordPress非插件实现文章列表分页导航代码”的4个回复

发表评论

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