WP-PageNavi | ページナビゲーション表示 WordPressプラグイン

「 WP-PageNavi 」のインストール、設定、使用方法についての記事。
「 WP-PageNavi 」は、ページナビゲーションを表示させるWordPressプラグイン。
投稿記事数が増えて来たら、是非導入したいプラグインだ。

ダウンロード

配布サイト:WP-PageNavi(英語サイト)
2011年01月10日現在のバージョン:WP-PageNavi 2.73
2011年01月10日現在の必要なワードプレスのバージョン:WordPress 2.8 以上
2011年01月10日現在の対応済みワードプレス最新バージョン:WordPress 3.0.4
zipファイルを解凍すると、「wp-pagenavi」というフォルダが出てくる。

インストール

「wp-pagenavi」フォルダを、フォルダごと、wp-content/plugins/ フォルダにアップロード・設置。
管理パネルで、「プラグイン」をクリックし、プラグイン設定画面を開く。「WP-PageNavi」を探し有効化。
wp-pagenavi-enabling.jpg

設定

管理パネルで、「設定」メニュー内の「PageNavi」をクリックし、「PageNavi 設定」画面を開く。
下記の画像の通り、詳しく日本語化されている。
wp-pagenavi-setup.jpg
デフォルトの設定のままでも、それなりに表示される。

使い方

1
wp_pagenavi();

を、ページナビゲーションを表示させたい箇所へ入力する。
テンプレートにより異なるかもしれないが、通常は、「index.php」や「archive.php」などの中であろう。
Twenty Ten テーマ の場合は、「loop.php」内に入力するだけ。

loop.php

Twenty Ten テーマ を使っている場合は、wp-content/themes/twentyten/ フォルダ内にある「loop.php」をテキストエディタで開く。子テーマを作って使っている場合は、子テーマ内の「loop.php」をテキストエディタで開くか、親テーマから「loop.php」をコピーし設置しテキストエディタで開く。

1
2
3
4
5
6
7
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
                <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 endif; ?>

の部分を

1
2
3
4
5
6
7
8
9
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
    <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
                <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 } ?>
<?php endif; ?>

に書き換える。
このように書けば、WP-PageNaviを無効化した時は、従来のものが表示されるはず。
さらに、上部に表示される
「 ← 古い投稿  新しい投稿 → 」
もいらない気がするので、

1
2
3
4
5
6
7
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <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 -->
<?php endif; ?>

を削除。

WP-PageNavi 表示例

wp-pagenavi-view-example.jpg←デフォルトの設定のまま出力するとこんな感じ。

スポンサード リンク

カテゴリー: WordPress, プラグイン パーマリンク