WordPressデフォルトテーマでTOPやCategoryのページナビゲーションをカスタマイズ

更新


WordPressデフォルトテーマのTwentyTwelveやTwentyElevenのトップページやカテゴリーページの下にある、「←過去の投稿」「新しい投稿→」というページネーションが、とてもイケテナイと思う@web_shufuです。そこで、カスタマイズ方法を調べてみました。

(注)以下の内容は、TwentyTwelveをカスタマイズする前提で書かれています。TwentyElevenをカスタマイズする場合は、TwentyTwelveをTwentyElevenに置き換えるなど、多少応用してください。

  1. ページナビゲーションとは
  2. ページナビゲーションを担当する関数
  3. twentytwelve_content_navは除去すべし
  4. プラグインでカスタマイズ
  5. スニペットをコピペする
  6. デフォルトのページナビゲーションの文言だけを変えたい場合

ページネーションとは

この記事でいうページナビゲーションは、トップページやカテゴリーページなどでページ分割を行った場合の、次のページや他のページへのリンクのことです。

グーグル検索の下にある前へ 1 2 3 4 5 6 7 8 9 10 次へというようなリンクや、「←過去の投稿」「新しい投稿→」リンクもページナビゲーションです。

ページナビゲーションを担当する関数

TwentyTwelveテーマで、「←過去の投稿」「新しい投稿→」リンクを出力しているのは、twentytwelve_content_nav関数です。

トップページやカテゴリーページにあるtwentytwelve_content_nav( ‘nav-below’ );が、こんな作業(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;
?>

その結果、こんなhtmlソースを出力して

<nav id="nav-below" class="navigation" role="navigation">
<h3 class="assistive-text">投稿ナビゲーション</h3>
<div class="nav-previous alignleft"><a href="http://www.bambina-gp.com/tonyo/page/3/" ><span class="meta-nav">&larr;</span> 過去の投稿</a></div>
<div class="nav-next alignright"><a href="http://www.bambina-gp.com/tonyo/" >新しい投稿 <span class="meta-nav">&rarr;</span></a></div>
</nav><!-- #nav-below .navigation -->

こんな表示をしてくれてます。
2013-04-04_1430

twentytwelve_content_navは除去すべし

このように、twentytwelve_content_navはページナビゲーションを一手に引き受けて頑張ってくれる関数です。

しかし、これをカスタマイズするとなると、category.phpやindex.phpではなく、function.phpをいじらないといけません。

また、function.phpでは、翻訳関数の_e関数と__関数がかなりたくさん使われているので、WordpressやPHPにある程度慣れないと、とてもカスタマイズしにくいです。

そこで、twentytwelve_content_nav( ‘nav-below’ );は削除してしまい、デフォルトとは全く異なるページナビゲーションを導入するほうがカスタマイズしやすいと思います。

プラグインでカスタマイズ

「デフォルトとは全く異なるページナビゲーションを導入する」方法として、最も手軽なのがプラグインです。

私のオススメはWP-PageNaviとWP PageNavi Styleです。

導入にあたってはこちらを参考にしてください。

WordPressのページ送り用プラグイン – WP PageNavi Styleの使い方 | WP SEOブログ

ちなみに、WP SEOブログさんは、他にも役立つ記事満載ですので、一度チェックすることをオススメします。

スニペットをコピペする

WordPressやPHPに多少慣れているなら、プラグインよりスニペットのコピペがオススメです。

以下の記事がとてもよくまとまっています。

WordPressにプラグイン無しでページネーションを設置する方法 | コリス

デフォルトのページナビゲーションの文言だけを変えたい場合

デフォルトのページナビゲーションの文言だけを変えたい場合は、
twentytwelve_content_nav( ‘nav-below’ );
があった場所に、以下の部分を貼り付けてください。すると、デフォルトのページナビゲーションが復活します。

global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="nav-below" class="navigation" role="navigation">
<h3 class="assistive-text">投稿ナビゲーション</h3>
<div class="nav-previous alignleft"><?php next_posts_link( '<span class="meta-nav">←</span> 過去の投稿'); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( '新しい投稿 <span class="meta-nav">→</span>' ); ?></div>
</nav><!-- #nav-below .navigation -->
<?php endif;

あとは、日本語の部分とか、→を自分の好きな言葉に変えればカスタマイズできます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です