WP4.1までの方法です。
古いテーマを最新版に対応する時などに、まだまだ知識として知っておく必要がありそうです。
WP4.1〜は、the_posts_navigation()が便利
仕様
<?php previous_posts_link( $label ); ?>
<?php next_posts_link( $label, $max_pages ); ?>| パラメータ | 初期値 | 説明 |
| label | « Previous Page Next Page » | リンクのテキスト。html可 |
| max_pages | 0 | リンクを表示するページ番号の上限 |
標準のコードと出力されるHTML
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?><a href="https://example.com/category/page/1/" rel="prev">« 前ページへ</a>
<a href="https://example.com/category/page/3" rel="next">次ページへ »</a>prev側が新しい記事リストへのリンクになります。
カスタマイズ例
※翻訳関数は省略しています・・・
サンプルで使っているCSS
.posts-navigation {
display: table;
width: 100%;
padding: 8px 0;
font-size: 1.4rem;
}
.posts-navigation .nav-links {
display: table-row;
width: 100%;
word-break: break-all;
}
.posts-navigation .nav-links .nav-previous {
display: table-cell;
width: 50%;
padding-right: 48px;
text-align: left;
}
.posts-navigation .nav-links .nav-next {
display: table-cell;
width: 50%;
padding-left: 48px;
text-align: right;
}クラス名は自由につけることができます。
表示文字列を変更する
文字の変更
<div class="posts-navigation">
<div class="nav-links">
<div class="nav-previous"><?php previous_posts_link( '< 前のページへ' ); ?></div>
<div class="nav-next"><?php next_posts_link( '次のページへ >' ); ?></div>
</div>
</div>htmlタグも使える
<div class="posts-navigation">
<div class="nav-links">
<div class="nav-previous"><?php previous_posts_link( '<i class="fa fa-chevron-circle-left"></i>' ); ?></div>
<div class="nav-next"><?php next_posts_link( '<i class="fa fa-chevron-circle-right"></i>' ); ?></div>
</div>
</div>リンクがない時は空のタグを出力しない
<div class="posts-navigation">
<div class="nav-links">
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-previous"><?php previous_posts_link(); ?></div>
<?php endif; ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-next"><?php next_posts_link(); ?></div>
<?php endif; ?>
</div>
</div>前の○件 / 次の○件表示にする
個別の指定がない場合は基本的に、設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数で設定されてる件数になります。
<div class="posts-navigation">
<div class="nav-links">
<div class="nav-previous"><?php previous_posts_link( '« 前の' . get_query_var( 'posts_per_page') . '件' ); ?></div
<div class="nav-next"><?php next_posts_link( '次の' . get_query_var( 'posts_per_page') . '件 »' ); ?></div>
</div>
</div>画像を指定する
<div class="posts-navigation">
<div class="nav-links">
<div class="nav-previous"><?php previous_posts_link( '<img src="' . get_template_directory_uri() . '/images/arrow-left.png">' ); ?></div>
<div class="nav-next"><?php next_posts_link( '<img src="' . get_template_directory_uri() . '/images/arrow-right.png">' ); ?></div>
</div>
</div>