(やり直し版)ページャープラグイン「Prime Strategy Page Navi」を設定しました

2012年9月3日2014年1月29日

URLをコピーしました！

ありゃりゃら。
以前、「ページャーを設置しました」と「ページャープラグイン「Prime Strategy Page Navi」のカスタマイズ」で設定した、ページャープラグイン「Prime Strategy Page Navi」ですが、「うかつに、「Twenty Ten」のテーマをバージョンアップしました」で、テーマをバージョンアップしてから、表示されなくなっちゃいました。

と、言うことで、私自ら過去の記事を参照にして、復習を兼ねて、ページャープラグイン「Prime Strategy Page Navi」の再設定をしようと試みたものの、上手く行きませんでした。

一応、これまでに参考にした書籍とサイトの紹介です。

「パラメータでカスタマイズしやすいページナビもプラグインにしてみた」(@jim0912さんのブログ)
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 [大型本]

それから過去の自分のブログ記事も一応ってことで。

まあ、前置きはこんなとこで…。
ここから、やり直し版として改めて基本に忠実に、ページャープラグイン「Prime Strategy Page Navi」の「Twenty Ten」で使うための手順を書き直します。

まずは、「プラグイン」から「新規追加」で「Prime Strategy Page Navi」を検索しましょう。
検索が完了したら、早速「インストール」して、続けて「有効化」しましょう。

次は、「Twenty Ten」のテンプレートの「loop.php」の24行目位の修正ですが、子テーマを設定してない方は、子テーマを使って方がいいですよ。こちら「初心者向けWordPressテーマカスタマイズのための、子テーマについて (CSS編)」を参照して下さい。

修正点は、こんな感じです。
まず、24行目の

<div id="nav-above" class="navigation">
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-above –>

の部分と177行目位の

<div id="nav-below" class="navigation">
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below –>

の部分を削除して、このコードに置換します。

<!-- ページナビを追加 ここから -->
<?php if ( function_exists( 'page_navi' ) )
  page_navi( 'items=7
              &amp;prev_label=Prev
              &amp;next_label=Next
              &amp;first_label=First
              &amp;last_label=Last
              &amp;show_num=1
              &amp;num_position=after' );
?>
<!-- ページナビを追加 ここまで -->

ちなみに、上記コードは、「Prime Strategy Page Navi」の圧縮ファイル内の「readme-ja.txt」テキストからのコピーしたものに、私が分かりやすくするために、パラメータ毎に改行しています。

パラメータの詳細に関しましては、先程の「readme-ja.txt」か「パラメータでカスタマイズしやすいページナビもプラグインにしてみた」(@jim0912さんのブログ) でご参照下さい。

ただ、このままだと見栄えも全くダメなので、以下のCSS追記します。

.page_navi {
    text-align: center;
}
 
.page_navi li {
    display: inline;
    list-style: none;
}
 
.page_navi li.current span {
    color: #000;
    font-weight: bold;
    display: inline-block;
    padding: 3px 7px;
    background: #fee;
    border: solid 1px #fcc;
}
 
.page_navi li a {
    color: #333;
    padding: 3px 7px;
    background: #eee;
    display: inline-block;
    border: solid 1px #999;
    text-decoration: none;
}
 
.page_navi li a:hover {
    color: #f00;
}
 
.page_navi li.page_nums span {
    color: #fff;
    padding: 3px 7px;
    background: #666;
    display: inline-block;
    border: solid 1px #333;
}

ちなみに、このCSSも何の芸もなくて申し訳ございませんが、「readme-ja.txt」からそのままコピーしたものを使っています。

とりあえず、こんな感じにページャーが登場してきます。