ページナビを表示できるプラグイン「Prime Strategy Page Navi」

サイト表示関連

「Prime Strategy Page Navi」プラグインは、パラメータを設定したり、CSSをカスタマイズして好みのデザインにできるページナビゲーションです。

PrimeStrategyPageNavi

インストール

プラグインの新規追加より、「Prime Strategy Page Navi」と検索すると表示されます。
インストールをして有効化したあとにpage_navi関数をtwentytwelve_content_nav関数で使用します。

使用方法

使用方法は、Twenty Twelveを例に説明します。
テンプレート(index.php等)にあるtwentytwelve_content_nav関数を削除します。

twentytwelve_content_nav( 'nav-below' );

関数を削除したあとwp_paginate関数に置き換えるとページナビが表示されます。

page_navi();

また、functions.phpファイルのtwentytwelve_content_nav関数に定義されたコードを削除してwp_pagenavi();に置き換えても表示されます。

if(function_exists('wp_paginate')) {
    page_navi();
}

最後に、表示用のCSSを設定します。
CSSのサンプルは、WordPress.orgで公開されいます。

サンプルのCSSは以下のようになっていますので、これをstyle.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;
}

作成者のサイトでは、日本語表示でパラメータの使い方の例などがありますので使い方の参考になると思います。
参考サイト:パラメータでカスタマイズしやすいWordPressのページナビを作ってみた

スポンサーリンク

コメント

タイトルとURLをコピーしました