Twentyfifteenからテーマ作成－カテゴリごとにページ移動

当サイトはカテゴリーごとに内容が違いすぎるため、ナビゲーションとタグを除き、ページ遷移を同一カテゴリ内に留めようと当初から考えていました。

カテゴリごとにテンプレートを分ければ簡単ですが、できるだけ汎用性のあるカスタマイズ方法にしたかったので、テンプレートを増やさずにカスタマイズすることに。

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の下部にある

// 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>',
  ) );

// 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>',

) );

こいつを、

// 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>');

// 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で生成されるタグ

<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>

<span class="post-title">前ページタイトル</span>

</a>

</div>

previous_post_linkに修正した後

<span class="nav-previous">
  <a rel="prev" href="前ページURL">前ページタイトル</a>
</span>

<a rel="prev" href="前ページURL">前ページタイトル</a>

</span>

適宜cssで修正しましょう。
自分は画像も消しちゃいました。

関連する記事