wordpress-thumbnail

wordpress-11

僕はワードプレスを始めてまだ浅いですが、今の段階で  すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。

プラグインにしても  なるべく使わずに作業を進めていきたいと思っている今日この頃‥。

注意点

違うプラグイン同士が同じ関数を呼び出そうとする際に、エラーとなり画面が真っ白になるケースがあるらしい。プラグイン設置の際は、あらかじめバックアップをとっておくことを忘れずに!!

ということで、ここでは「プラグインを使わずにページネーションを設置する方法」をまとめておきます。

【 完成画像 】
pagenation

手順としては、functions.phpで読み込んで index.phpで出力して CSSで調整していくという流れです。

この手順で以下のコードを記述していきます。

プラグイン不要!!のページネーション設置手順
「function.php」ファイルに記述

まずは「functions.php」に以下のコードを記述していきますが、その前に「functions.php」ファイルを編集する際の注意点から。

この「functions.php」ファイルは、関数ファイルが集約されていて  管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。

カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。

編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。

つまり  データが消えてしまうということです。

そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。

なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。

注意点

「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。

こういった注意点を踏まえて、「functions.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$range1) ||
 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 < $pages1 &&  $paged+$range1 < $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/

PICK UP

TIPS記事セレクション


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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です