【2コピペ】WordPressにページネーションをプラグインなしで実装する方法

好きなページにジャンプできるページナビを、自力で即実装する方法があります。神速の「コピペ2発」で完了です。

ブログ記事を一覧表示させている画面では、ふつうはページネーション（ページナビゲーション、ページャーとも）という、ページ送りをする機能をもったものが設置されています。

しかしこれは、WordPressのテーマによっては機能性が低く、そのまま使えないということもめずらしくはありません。

過去記事を見やすくするページャーをより使いやすくしたい……と思うなら、自力で、またはプラグインなどを使用して実装しなければならないのです。

ただ、安心してほしいのは、これはコピペ2発で瞬時に設置できるということ。今回はこのページネーションを、WordPressにプラグインなしで導入する方法を解説します。

ページネーション（ページナビゲーション）とは

ブログのページネーション（ページナビゲーションまたはページャー）とは、数字のボックスがならんだ赤枠部分のこと。

たいていは記事一覧ページのいちばん下に設置されていて、「前へ、次へ」または「最初へ、最後へ」という文字といっしょに、数字の番号が「1」から順にならんでいます。

数字の番号をクリックすれば、記事の表示件数ぶんジャンプして（過去にさかぼって）記事をながめることができる、というページ送りの機能をもったものです。

一覧表示の件数が10件だとすると、3番目をクリックすれば、過去の21～30件の記事が一覧で表示される、といった感じ。

その役割は、いうまでもなく利便性の向上にあります。

ブログを見にきてくれたユーザーが、「このカテゴリー記事をもうちょっとまえから見たい」など、時期的なことなどを気にしてくれたさいには、そのあたりの記事をさがしやすくしてくれるのです。

正直いうと、うしろ（古い記事）から確認できるので、リライト（手直し）をする運営者側のほうが便利になる機能でもあるのですが、まあそれはいいでしょう。

ここからはこれを、超スピードで実装する方法をご紹介します。

ページネーション（ナビ）の作り方と実装までの手順

ページネーションをプラグインなしで実装する方法は、おもに以下の2パターンがあります。

1. 「functions.php」にコードを書き込んで呼び出す
2. 表示させたいファイルに直で書き込む

主流は①の、「functions.php」に書き込んで表示させたいところで呼び出す方法で、これは「①書く → ②調節 → ③呼び出す」の3手順で実装できます。

一方、②の表示させたいファイルに直で書き込む方法は、なんと「①書く（呼び出す）→  ②調節」の2手順で完。

今回の話はコピペ2発の超スピードですから、当然、紹介するのは②の方法となります。

子テーマと「CSS」をいじるので、そこがわからなければ、さきに子テーマの作り方とCSS（スタイルシート）の使い方を確認しておいてください。

それでは、いざ、即実装へ！（バックアップは取りましょう）

１. ページナビを呼び出したい場所に直でコードを書き込む

まずは手順①。ページネーションを呼び出したい場所に、以下のコードをそのままコピペします。

<div class="tablenav"><?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
$paginate_format = '';
$paginate_base = add_query_arg('paged', '%#%');
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/', 'paged');;
$paginate_base .= '%_%';
}
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 2,
'current' => ($paged ? $paged : 1),
)); ?></div>

テーマは「TwentyTwelve」を使用していた私の場合は、「index.php（メインインデックスのテンプレート）」に書き込むことで、トップページに反映されるようになりました。

書き込む場所は使用しているテーマによっても異なるかと思うので、どこに書き込めば反映されるのかは、じっさいにいじってしらべてみてください。

下のほうにある「mid_size」の数字を変えれば、表示させる件数（ボタン）の数を変更することができます。

なお、こちらのコードは「yuriko.net」さんの記事を参考にさせていただきましたが、当記事作成時点ではアクセスできなくなっていたので、ひとまず記事へのリンクはなしとしております。ご了承ください。

２. CSS（スタイルシート）で調節して「完」

つづいて手順②では、「CSS（スタイルシート）」を使って、ボタン（ボックス）の形・色・大きさなどを調節していきます。

以下をコピペしてください。

/*ページナビ全体のスタイル*/
.tablenav {
	color: #2583ad;
	background:white;
	margin: 1em auto;
	line-height:2em;
	text-align:center;
}

/*ボックスのスタイル調整など*/
a.page-numbers, .tablenav .current {
	color: #21759b;
	padding: 2px .4em;
	border:solid 1px #ccc;
	text-decoration:none;
	font-size:140%;
}

/*マウスオーバー時の色*/
a.page-numbers:hover {
	color: #0f3647;
}

/*選択されている数字ボタンの色*/
.tablenav .current {
	color: white;
	background: #b0c4de;
	border-color: #b0c4de;
}

/*前へ次へのスタイル*/
.tablenav .next, .tablenav .prev {
	border:0 none;
	background:transparent;
	text-decoration:underline;
	font-size:105%;
}

環境によってはなくても動作するコードもありますが、ひとまずこれをそのままコピペしてもらえれば……

はい完成！

たったのこれだけで、最初の画像とおなじものができあがりますよ。

３. もともとあったページナビを削除する

実装自体はここまでの2コピペで完了ですが、もともとのページナビのコードがのこっていると、ページによってはナビが2つ出てきてしまうので、最後にこれをいじります。

私が使用していた「TwentyTwelve」では、以下のコードがもとのページナビを呼び出すコードでしたが、

twentytwelve_content_nav( 'nav-below' );

これと似たようなものがあるはずなので、書かれているすべて（カテゴリーや検索結果など）のページから、このコードをコメントアウト（/**/：コードの内容をOFFにする）または削除。

それができたら、新しくページナビを表示させたい場所に、①のコードを挿入して（差し替えて）いきます。ここでの作業はこれだけです。

最初からあるコードはテーマによって異なると思いますが、かならずどこかにあるので、さがしてみてください。とても簡単な作業でした！

今回のまとめ

今回の方法は簡単なぶん、差し替えるコードが長くなってしまうというデメリットもあることはあります。

「functions.php」におおもとの記述をして、それを短い文で呼び出せば、コードもスッキリとおさまる。だからこそ、そちらの方法がよく使われているのでしょう。

ただ、ひとつだけ知っておいてほしいのは、いずれテーマを変えるときはかならずくる、ということです。

私は無料の公式テーマ「TwentyTwelve（2012年リリース）」をバリバリとカスタマイズして使ってきました。プラグインには極力たよらず、ずっと使っていこうと思っていました。

けれども、残念ながら、やはり限界というものは来ます。

そんなとき、カスタマイズをしすぎていると、テーマを変更する判断に遅れが出ます。思考がにぶり、「まだこのままでいいか」と、ときには致命的な判断ミスをしてしまうこともあるのです。

だから、このページネーションはこれでいい。簡単なカスタマイズでいいのです。

使用しているテーマにページナビを自力で実装する必要があるのなら、おそらく、そのテーマはそこまで高機能なものではないはず。そうなると、やはり「そのとき」はいずれおとずれます。

こだわりにこだわってきた私がいうのですから、まちがいはありません。有名なブロガーもだいたいみんな「カスタマイズにはこだわりすぎるな」といいます。そんなわけで、ページナビは、こんなくらいでOKです！