ページナビゲーション

WordPressに【WP-PageNavi】を導入してページナビゲーションを搭載

この記事の所要時間: 911

どうも、Noodle.(@Noodle1002)です。たいしたコンテンツは書き下ろせてないかもしれないですが、ほぼ毎日更新してますとソコソコのページ数となってきました。前回立ち上げていたブログは週に一回更新すれば良い方だったので、それに比べると頑張っているかなぁと我ながら思う訳ですが、いつ三日坊主病が再発するかもわかりません。なるべく更新する事を癖付けていきたいと思っております。

で、ページ量が増えてきますと、このサイトには大体どれくらいの量のコンテンツがあるのか、またサイトに訪れたユーザーが、今どの位置のコンテンツに辿り着いているのかが分かり辛くなります。そこで役に立つ機能がページナビゲーションです。

ページナビゲーションってなあに?

いまいちピンと来ない方はGoogleなどで検索してみてください。ページ下部に以下のようなナビゲーションがあり、必ず見たことがあると思います。

ページナビゲーション

Googleなどで検索すると出てくるアレです。

これのお陰で、今検索したキーワードにヒットしたページの総量が何となく分かったり、また検索結果の何ページ目にいるのかが分かるわけですね。便利ですね。これをWordpressで構築したブログでも導入してみましょう。

プラグインWP-PageNaviを活用

このページナビゲーションをWordpressに導入することができるプラグインがWP-PageNaviです。ダッシュボードからプラグインを検索して簡単にインストールすることが可能ですが、プラグインファイルをダウンロードして導入する事も可能です。

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

ちなみにこのプラグイン、導入するだけではページナビゲーションを追加することはできません。とあるソースコードを所定の位置へ追記する必要があります。きましたねソースコード。前回導入したSyntaxHighlighter Evolvedが役に立ちます。以下のソースコードをページナビゲーションを表示させたい場所へ追記します。

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

短いなおい。しかしこのソースコード、何処に入力するんだよといったところですが…これはWordpressで使用しているテーマによって色々と違うので一概には言えないのが難点です。私のブログはTwenty Twelveというテーマで作っておりますので、何処に追記したかをメモしておきます。

フッター(footer.php)はどうだろう?

フッターは全てのページに表示されるパーツです。なのでここにソースを追記すれば全てページナビゲーションが表示されるはず…と思い一先ずやってみました。すると予測通り、ページナビゲーションが各ページに表示されるようになりました。やったね。

ところがです。不要なところにもページナビゲーション表示されるようになりました。どこかというと一つ一つの記事内にも表示されてしまった訳です。

ページナビゲーション

絶対に1ページしかないところにもナビゲーションが

ま、いいかとも思ったんですが、ちょっと不格好ですよね。必要ないところに必要ない物が表示されているのは余りキレイではありません。ということで再度色々と試してみました。

結局function.phpへ追記(index・archive・category.phpも試したけど)

フッターはまずいということで、とりあえずindex.php、archive.php、category.phpの3カ所、下記のようにサイドバー(サイドメニュー)とフッターを読み込んでいる箇所の間へ追記しました。

<?php get_sidebar(); ?>

<!--ページナビゲーション-->
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

<?php get_footer(); ?>

なかなかいい感じでした。しかしデフォルトで表示される「前の投稿」「次の投稿」というナビゲーションも同時に表示されていました。機能として重複しているのでこれまたキレイでない…。試行錯誤した結果、function.phpというところにナビゲーションの設定があることを発見。

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
 * Displays navigation to next/previous pages when applicable.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_content_nav( $html_id ) {
	global $wp_query;

	$html_id = esc_attr( $html_id );

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
			<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
			<div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>

		</nav><!-- #<?php echo $html_id; ?> .navigation -->
	<?php endif;
}
endif;

ここらへんですね。これを以下のように修正しました。

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
 * Displays navigation to next/previous pages when applicable.
 *
 * @since Twenty Twelve 1.0
 */
function twentytwelve_content_nav( $html_id ) {
	global $wp_query;

	$html_id = esc_attr( $html_id );

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
		<!--デフォルトナビゲーションここから
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
			<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
			<div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
		デフォルトナビゲーションここまで-->

		<!--ページナビゲーション-->
		<?php wp_pagenavi(); ?>

		</nav><!-- #<?php echo $html_id; ?> .navigation -->
	<?php endif;
}
endif;

どうやら上記箇所の<h3>タグと<div>タグの箇所がデフォルトのナビゲーションのソースコードにあたる部分のようです。今回はWP-PageVaviを導入ということで、デフォルトの物は非表示(コメントアウト)にしました。これでようやくこのブログにもページナビゲーションが導入できました。結構ページ量増やしてきたつもりなんですが、まだそれでも50記事に満たないんですよね。ページナビゲーションが真に役立つ日は果たしてくるのだろうか。きっと来ると信じて。

それでは、これにて。


コメントを残す