My Vector Space

  人生は寄り道してなんぼ

プラグイン不要!!のページネーション設置方法

wordpress-11

ワードプレスを始めてまだ浅いですが、すでにプラグイン同士のバッティングによる不具合と考えられる現象が起きているので、それを考慮しながらなるべくプラグインを使わずに色々と作業を進めている今日この頃‥ということでプラグインを使わずにページネーションを設置する方法です。

 

【 完成画像 】

      pagenation     

 

手順としては、functions.phpで読み込んで index.phpで出力して CSSで調整していく流れになります。この手順で以下のコードを記述していきます。

 

 

function.phpファイルに記述

 

 まずはfunction.phpに以下のコードを記述

 【 functions.php 】
 1
  function pagination($pages = '', $range = 4)
 2
  {
 3
      $showitems = ($range * 2)+1;
 4
 
 5
      global $paged;
 6
      if(empty($paged)) $paged = 1;
 7
 
 8
      if($pages == '')
 9
      {
 10
          global $wp_query;
 11
          $pages = $wp_query->max_num_pages;
 12
          if(!$pages)
 13
          {
 14
              $pages = 1;
 15
          }
 16
       }
 17
 
 18
       if(1 != $pages)
 19
      {
 20
          echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
 21
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
 22
        .get_pagenum_link(1)."'>&laquo; First</a>";
 23
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
 24
        ."'>&lsaquo; Previous</a>";
 25
 
 26
        for ($i=1; $i <= $pages; $i++)
 27
        {
 28
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
 29
        $pages <= $showitems ))
 30
        {
 31
             echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
 32
            .get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
 33
            }
 34
        }
 35
 
 36
        if ($paged < $pages && $showitems < $pages) echo "<a href=\""
 37
        .get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 38
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)
 39
        echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 40
        echo "</div>\n";
 41
        }
 42
    }
 43
 
index.phpファイルに記述

次に、ページネーションを設置する箇所に出力するコードを記述。
ここでは、index.phpファイルの<div id="content">~</div>の閉めタグの直前に設置しました。

 【 index.php 】
 1
  <!-- ページネーションエリア -->
 2
  <?php if (function_exists("pagination")) {
 3
      pagination($additional_loop->max_num_pages);
 4
      } ?>
 5
  <!-- /ページネーションエリア   -->
CSSで調整

  あとはCSSで調整していきます。

 【 style.css
 1
  /*ページネーションエリア*/
 2
  div.pagination {
 3
      clear:both;
 4
      position:relative;
 5
      font-size:11px;
 6
      line-height:13px ;
 7
      vertical-align: middle;
 8
      width:550px;
 9
      height:20px;
 10
      }
 11
 
 12
  div.pagination span, .pagination a {
 13
      display:block;
 14
      float:left ;
 15
      margin: 2px 2px 2px 0 ;
 16
      padding:6px 9px 5px 9px ;
 17
      text-decoration:none;
 18
      width:auto ;
 19
      background-color: #ffffff;
 20
      border:1px solid #E47273;
 21
      color:#E47273;
 22
      border-radius:3px
 23
    }
 24
 
 25
  div.pagination a:hover{
 26
      color:#fff ;
 27
      background-color:#E47273
 28
    }
 29
 
 30
  div.pagination .current{
 31
      padding:6px 9px 5px 9px ;
 32
      background-color:#E47273;
 33
      color:#fff
 34
      }
 35
 

参考サイト

http://sgwordpress.com/teaches/how-to-add-wordpress-pagination-without-a-plugin/

 

 

関連記事WordPressカスタマイズ関連の記事

PAGE TOP