【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

9Feb2012

記事リスト下にgoogle的なページ番号を表示するプラグイン[WordPress]

ページ番号を表示する

WordPressで一覧表示の下にページ番号を表示するプラグインをご紹介します。

シンプルなプラグインで扱い易いのですが、一覧ページのテンプレートに自力でコードを貼り付ける必要があります。

FTPソフトでテンプレートを直接編集できる方にオススメです。

WP-PageNavi

WP-PageNavi
ダウンロードはこちら

zipファイルをダウンロード後、管理パネルの

プラグイン – 新規追加 – アップロード

でファイルを選んでアップロードします。

その後有効化を忘れずに。

テンプレートファイルのカスタマイズ

各テンプレートファイルの該当の場所に以下のコードを貼り付ける必要があります。

一覧ページのテンプレートは、使用しているテンプレートにより多少異なります。

現在当サイトで使用しているオリジナルテンプレートでは

・archive.php
・search.php
・index.php

の3つが一覧ページのテンプレートです。

参考までにWordPress3.0系のデフォルトテーマである「Twenty Eleven」を見てみると、

・archive.php
・author.php
・category.php
・index.php
・search.php
・tag.php

の6つが一覧ページ用に準備されていました。

Twenty Eleven を使用している人は上記6つのファイルの中の

の部分を先述のコードに書き換えればOKです。

これだけだと芸が無いので・・

実際のページを確認してみると、左詰めで表示されていたり、上下のラインとピッタリくっついていたり。

このまま使い続けられるレベルではないですよね^^;

先ほど貼り付けた基本のコードにIDをつけて、CSSでデザイン変更できるようにします。
(デフォルトで「div class=”wp-pagenavi”]で囲われていますので、そちらを直接使う事もできます)

CSSはこんな感じで。

#pagenavi {
	text-align:center;
	padding:20px 0;
}

今回は現在ページ番号の背景を黒塗りにしたかったので、こんなCSSを追加してみました。

.wp-pagenavi span.current {
	border-color: black;
	font-weight:800;
	background-color:#000;
	color:#FFF;
}

これで完成!
pagenaviのカスタマイズ完成!

その他の設定

管理パネル – 設定 – PageNavi

で細かな設定ができます。

「pagenavi-css.css を使用」のチェックを外すと、CSSが一切適用されない状態になります。

ゼロから自分でデザインしたい場合は、チェックを外してオリジナルCSSを作成することができます。

その他にもリストをドロップダウン形式にできたり、表示するページ数やスキップするページ数などの細かい設定も可能です。

「 1ページしかない場合もページナビゲーションを表示する。」
という項目は非常に便利ですね!

関連記事