WordPress(ワードプレス)のトップページのページ分割を数字ナビゲーション化するプラグイン「WP-PageNavi」

WordPress(ワードプレス)で記事を書き続けていくと、トップページが複数のページに分割していきます。

たとえば、トップページに表示する記事数を最新の10記事と設定したら、11記事〜20記事は2ページ目、21記事〜30記事は3ページ目と分割されます。

URLは、

www.example.com
www.example.com/page/2/
www.example.com/page/3/

となっていきます。

そんな時、トップページを検索エンジンのように数字ナビゲーション化するプラグインを紹介します。


ワードプレスに特化した高速レンタルサーバー

有名検索エンジンの数字ナビゲーションをチェック

まずは、検索エンジンの数字ナビゲーションを実際に見てみましょう。

◎Google(グーグル)
Google(グーグル)

◎Yahoo! Japan(ヤフー)
Yahoo! Japan(ヤフー)

◎bing(ビング)
bing(ビング)

◎NAVER(ネイバー)
NAVER(ネイバー)

◎百度(バイドゥ)
百度(バイドゥ)

これらの検索エンジンの数字ナビゲーションを参考にしながら、あなたがWordpress(ワードプレス)で作ったサイトのトップページも数字ナビゲーション化していくといいでしょう。

トップページに表示する最大投稿数を設定

プラグインをダウンロードする前に、Wordpress(ワードプレス)の管理画面でトップページに表示する最大投稿数を設定しましょう。

管理画面の「設定 – 表示設定」の「1ページに表示する最大投稿数」に任意の数値を入力します。

1ページに表示する最大投稿数

僕がWordpress(ワードプレス)ではじめて作ったサイト「Breakdance Times」では動画が多くて重たいので10件にしています。

プラグイン「WP-PageNavi」

トップページを検索エンジンのように数字ナビゲーション化するプラグインは「WP-PageNavi」です。

右上の茶色の「Download Version 〜」ボタンをクリックして、プラグインをダウンロードします。

すると、「wp-pagenavi」という名前のフォルダがダウンロードされるので、FTPソフトで「wp-pagenavi」フォルダをまるごと「/wp-content/plugins/」にアップロードします。

つまり、FTPソフト上では「/wp-content/plugins/wp-pagenavi/」ということです。

そして、管理画面の「プラグイン」で有効化します。

ちなみに、このプラグインは英語圏のプラグインなんですが、日本語対応になっています。

日本語対応

プラグインを有効化すると、管理画面の左メニューの「設定」に「PageNavi」のメニューができます。

「設定」に「PageNavi」のメニュー

このページで「PageNavi 設定」をしましょう。

設定が終わったら「変更を保存」ボタンをクリックします。

テーマ「index.php」のHTMLソースをチェックする

次に、管理画面で「外観 – テーマ編集 – メインインデックスのテンプレート(index.php)」と進みます。

ここで「メインインデックスのテンプレート(index.php)」のHTMLソースをすべてコピーし、いつも使っているテキストエディタにペーストします。

そして、テキストエディタで「wp_pagenavi」という言葉で検索をかけます。

もし、以下のようなソースコードがあれば問題ありません。

<?php if(function_exists(‘wp_pagenavi’)) {
wp_pagenavi();
}

このソースコードはプラグイン「WP-PageNavi」が有効化されたならば、数字ナビゲーションを表示するという命令です。

プラグイン「WP-PageNavi」を有効化した時点で以下のスクリーンショットのような数字ナビゲーションが表示されるはずです。

スクリーンショット

もちろん、管理画面の「設定 – 表示設定」の「1ページに表示する最大投稿数」で設定した件数以上の投稿数がなければ数字ナビゲーションは表示されませんが。

もし、上のようなソースコードがなければ、

<?php wp_pagenavi(); ?>

という記述を「メインインデックスのテンプレート(index.php)」に自分で追加する必要があります。

たとえば、「Twenty Ten」というテーマなら

<div class=”nav-previous”><?php next_posts_link( __( ‘<span class=”meta-nav”>←</span> Older posts’, ‘twentyten’ ) ); ?></div>
<div class=”nav-next”><?php previous_posts_link( __( ‘Newer posts <span class=”meta-nav”>→</span>’, ‘twentyten’ ) ); ?></div>

<?php wp_pagenavi(); ?>

で置き換えてあげます。

ただ、プラグイン「WP-PageNavi」は有名なのか、最近配布されているテーマにはデフォルトで対応しているものが多いようです。

もし、あなたが使っているテーマの「メインインデックスのテンプレート(index.php)」に「wp_pagenavi」を含んだソースコードがなければ、自分で置き換える必要があります。

選んだテーマによっては見た目が変わる

僕が作った「Breakdance Times」はテーマに「zBench」というものを使っています。

WordPress(ワードプレス)の「テーマ」とは「HTML」と「CSS」ということです。

そして、僕が選んだテーマ「zBench」では、プラグイン「WP-PageNavi」の見た目が以下のように変わってしまいました。

見た目が変わる

つまり、プラグイン「WP-PageNavi」のCSSが入っている

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

とは違うCSSが使われているということです。

そこで、試しにトップページのHTMLを見てみました。

すると、以下のようにCSSに関する記述が3つあります。

CSSに関する記述が3つ

2番目に「/wp-content/themes/zbench/pagenavi-css.css」とありますね。

そして、一度、プラグイン「WP-PageNavi」の有効化を停止しました。

そして、もう一度、トップページのHTMLを見てみました。

すると、以下のようにCSSに関する記述が2つに減りました。

CSSに関する記述が2つ

先ほど、2番目にあった「/wp-content/themes/zbench/pagenavi-css.css」がなくなっています。

そこで、今度は管理画面「外観 – テーマ編集」を見てみると、僕が使っているテーマ「zBench」には、

・pagenavi-css.css
・style.css
・editor-style.css

の3つのCSSが読み込まれていることが分かりました。

で、まさにこの「pagenavi-css.css」が読み込まれて参照されていたので、見た目が変わっていたのですね。

pagenavi-css.css

僕は検索エンジンのヤフーのように枠(四角)で囲まれた数字ナビゲーションにしたかったので、「外観 – テーマ編集 – pagenavi-css.css」のソースをすべて「/* */」で囲ってコメントアウトしました。

そして、「/wp-content/plugins/wp-pagenavi/pagenavi-css.css」をコピペしました。

それから少しだけソースをいじって、最終的には以下のような見た目の数字ナビゲーションになりました。

数字ナビゲーションの見た目変更完成

今後、記事数が増えていくにつれて、トップページの数字ナビゲーションの数字も増えていくのが楽しみですね!

最後にもし、Wordpressを導入するレンタルサーバー選びに悩んだなら、WordPress(ワードプレス)に最適なレンタルサーバーを参考にしてみてください。