Twenty Thirteenのページネーションの矢印リンクをページ番号に変更
[古い投稿]リンクには総ページ数を表示する
Twenty Thirteenのページャーをカスタマイズする方法。
カスタマイズ内容は、下の画像の標準状態を
以下の画像のページ送りに変更した。
標準状態の矢印リンク(← →)は、正確にはリンク文字列ではない。リンクはあくまでも
- 古い投稿
- 新しい投稿
がアンカーテキストになっている。
カスタマイズ後の画像のリンク文字列が英語表記になっているが、この点は記事の後半で補足する。
HTMLを出力している箇所
Twenty Thirteenのページネーションは、functions.phpの
twentythirteen_paging_nav()
で出力されている。そのためその関数に対してカスタマイズを行うことになる。
現在のページ番号と総ページ数
カスタマイズ後の画像で示したように、矢印をページ番号等に変更した。そのため、以下のコードで現在のページ番号と総ページ数を取得しておく。
$current = (get_query_var('paged')) ? get_query_var('paged') : 1; // 1ページ目の場合は1を返し、それ以外のページには該当のページ数を返す
$max = $wp_query->max_num_pages; // 最大ページ数
$currentは現在のページなので、その前後のページ数を取得するために、1を加減する方法で取得することにした。
next_posts_linkとprevious_posts_link
twentythirteen_paging_nav内には、
- next_posts_link
- previous_posts_link
という2つのページ送りリンクを出力する関数があり、それぞれ以下のようにカスタマイズする。
next_posts_link( __( '<span class="meta-nav">'.($current+1).'/'.$max.'</span> Older posts', 'twentythirteen' ) );
previous_posts_link( __( 'Newer posts <span class="meta-nav">'.($current-1).'</span>', 'twentythirteen' ) );
ここまでの変更で冒頭に示したカスタマイズ後の画像と同じ状態になる。
翻訳への対応
矢印リンクをページ番号等に変更することはできたものの、カスタマイズした箇所全体が翻訳ファイルのキーとして機能していたために、[古い投稿]というリンク文字列が翻訳されずに、[Older posts]というアンカーテキストで表示されるようになった。
この問題への対処方法は、
- Older postsを直接日本語にする
- 英語のまま利用する
- 翻訳ファイルを修正する
といった方法で対応することができる。
翻訳ファイルを加筆・修正する方法については、別の記事としてエントリーする予定。