僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。
プラグインにしても なるべく使わずに作業を進めていきたいと思っている今日この頃‥。
注意点
違うプラグイン同士が同じ関数を呼び出そうとする際に、エラーとなり画面が真っ白になるケースがあるらしい。プラグイン設置の際は、あらかじめバックアップをとっておくことを忘れずに!!
ということで、ここでは「プラグインを使わずにページネーションを設置する方法」をまとめておきます。
【 完成画像 】
手順としては、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)
3
$showitems = ($range * 2)+1;
6
if(empty($paged)) $paged = 1;
11
$pages = $wp_query->max_num_pages;
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).“‘>« First</a>”;
23
if($paged > 1 && $showitems < $pages) echo “<a href='”.get_pagenum_link($paged – 1)
24
.“‘>‹ Previous</a>”;
26
for ($i=1; $i <= $pages; $i++)
28
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged–$range–1) ||
29
$pages <= $showitems ))
31
echo ($paged == $i)? “<span class=\”current\”>”.$i.“</span>”:“<a href='”
32
.get_pagenum_link($i).“‘ class=\”inactive\”>”.$i.“</a>”;
36
if ($paged < $pages && $showitems < $pages) echo “<a href=\””
37
.get_pagenum_link($paged + 1).“\”>Next ›</a>”;
38
if ($paged < $pages–1 && $paged+$range–1 < $pages && $showitems < $pages)
39
echo “<a href='”.get_pagenum_link($pages).“‘>Last »</a>”;
index.phpファイルに記述
次に、ページネーションを設置したい箇所に、出力するためのコードを記述。
ここでは、index.phpファイルの<div id=”content”>~</div>の閉めタグの直前に設置しました。
【 index.php 】
2
<?php if (function_exists(“pagination”)) {
3
pagination($additional_loop->max_num_pages);
デザインやレイアウトをCSSで調整していく
デザインはデフォルトのままになっているので、あとはCSSで調整していきます。
【 style.css 】
7
vertical-align: middle;
12
div.pagination span, .pagination a {
15
margin: 2px 2px 2px 0 ;
16
padding:6px 9px 5px 9px ;
19
background-color: #ffffff;
20
border:1px solid #E47273;
25
div.pagination a:hover{
27
background-color:#E47273
30
div.pagination .current{
31
padding:6px 9px 5px 9px ;
32
background-color:#E47273;
参考サイト
http://sgwordpress.com/teaches/how-to-add-wordpress-pagination-without-a-plugin/
関連記事
WordPressカスタマイズ関連の記事
Majestic Internet Blog, it’s not frequently that I wantcomment your good Internet Blog. You complete a number of pleasant points here.