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

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

ページネーションとは

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

グーグル検索の下にある前へ 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">←</span> Older posts', 'twentytwelve' ) ); ?></div>
            <div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</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.example.com/tonyo/page/3/"><span class="meta-nav">←</span> 過去の投稿</a></div>
    <div class="nav-next alignright"><a href="http://www.example.com/tonyo/">新しい投稿 <span class="meta-nav">→</span></a></div>
</nav><!-- #nav-below .navigation -->

こんな表示をしてくれてます。

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です。

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

[img-link url=”http://www.seotemplate.biz/blog/wordpress-plug/10904/” title=”WordPressのページ送り用プラグイン – WP PageNavi Styleの使い方 | WP SEOブログ”]

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

スニペットをコピペする

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

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

[img-link url=”http://coliss.com/articles/blog/wordpress/how-to-build-a-wordpress-post-pagination-without-plugin.html” title=” 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;

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