当サイトはカテゴリーごとに内容が違いすぎるため、ナビゲーションとタグを除き、ページ遷移を同一カテゴリ内に留めようと当初から考えていました。
カテゴリごとにテンプレートを分ければ簡単ですが、できるだけ汎用性のあるカスタマイズ方法にしたかったので、テンプレートを増やさずにカスタマイズすることに。
Twentyfifteenでは、次ページへのリンクを最新の関数で表示しています。
これをカテゴリ別で表示する方法を検討してみました。
Twentyfifteenで次ページへのリンクを表示させている関数はthe_post_navigationです。
これが実装されたのは2014年12月18日にリリースされたWordPressバージョン4.1からで、Twentyfifteenのリリースと同時でした。
そのため、このテーマの作成時は英語のドキュメンテーションしかありませんでした。
そんでもって、今でも日本語ページがありません。
WordPress Code Reference/the_post_navigation (英語)
この関数ひとつだけで次のページも前のページも一気に表示できるので、シンプルなページ遷移であれば、便利な関数だと思います。
でも自分はカテゴリごとにしたいので、どんなパラメータが使えるのかと確認したところ、get_the_post_navigationと同じとのことで参照すると、
get_the_post_navigation ( array $args = array() )
配列1個だけでした。
で、その配列で格納できるのが
$args
(配列) (オプション) デフォルトの変数
‘prev_text’
(文字列) 前ページへのリンクとして表示される。 デフォルト:%title
.
‘next_text’
(文字列) 次ページへのリンクとして表示される。 デフォルト:%title
.
‘screen_reader_text’
(文字列) スクリーンリーダー用 デフォルト: ‘Post navigation’.
デフォルト値: array()
ん~、汎用性なさそう。だからまだ日本語ページがないんでしょうか。
もっと考えればカテゴリ表示できるのかもしれませんが、そこまでの技術力がないので挫折。
結局、カテゴリ指定できる従来の関数を使用することにしました。
single.phpの下部にある
1 2 3 4 5 6 7 8 9 |
// Previous/next post navigation. the_post_navigation( array( 'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' . '<span class="post-title">%title</span>', 'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' . '<span class="post-title">%title</span>', ) ); |
こいつを、
1 2 3 4 5 6 |
// Previous/next post navigation. echo ('<div class="post-navigation"><div class="nav-links"><span class="nav-previous">'); previous_post_link('%link', '%title', true); echo ('</span><span class="nav-next">'); next_post_link('%link', '%title', true); echo ('</span></div></div>'); |
に入れ替えて同一カテゴリ内でページ遷移するようになりました。
なお、上の画像では文字リンクの色が変わっていますが、これはリンク色を指定していたspanが消えたからです。
the_post_navigationで生成されるタグ
1 2 3 4 5 6 7 |
<div class="nav-previous"> <a rel="prev" href="前ページURL"> <span class="meta-nav" aria-hidden="true">前</span> <span class="screen-reader-text">前の投稿:</span> <span class="post-title">前ページタイトル</span> </a> </div> |
previous_post_linkに修正した後
1 2 3 |
<span class="nav-previous"> <a rel="prev" href="前ページURL">前ページタイトル</a> </span> |
適宜cssで修正しましょう。
自分は画像も消しちゃいました。