テーマをゼロから作ってみる（15）です。言葉通りまったくの白紙状態の style.css と index.php からテーマを作ってきましたが、構造はほぼ完成しましたので、デザインを詰めていこうと思います。デモサイトがあります。
次の記事、前の記事の呼び名
一般的に投稿ページの記事下には「次の記事」「前の記事」へのリンクを置きますが、わかりやすく、また目につくようにサムネイル画像を入れようと思います。
ところで、このリンクは何という名前なんでしょう？ それに左右どちらに置くかもバラバラですね。
呼び名については、ページネーション、ページャー、ページング、ページ送りなども使われていますが、これはどちらかといいますと記事一覧ページなどに使う次のものを差す言葉のようです。
それに「ページャー」は小型の無線受信端末のことで日本ですとポケベルになります。「ページング」は仮想メモリで使われますのでちょっと違和感があります。「ページ送り」は言葉のニュアンスからいきますとページネーションと同じに感じます。
ということで、妥当なのは、そのリンクを表示する関数 the_posts_pagination() が出力するクラス名に post-navigation が使われていることから「投稿ナビゲーション」「記事ナビゲーション」「ポストナビゲーション」あたりがいいんじゃないでしょうか。
次の記事・前の記事、右左？ どっちが新しい？
これはググりますと多くの方が疑問に感じているようで各ブログサイトを知らべた結果の記事もあります。
私は長くはてなブログを使っていましたので、右側に過去の記事を置いて、next と表示するほうが違和感がありません。ページネーションと同じです。
WordPress は違います。the_posts_pagination() でも、過去の記事を previous として先に表示し、新しい記事が next として後に来ます。左右どちらに表示するかは css で変更すればいいのですが、特に変更を加えなければ過去の記事が左に来ることになります。
なんともややこしい話です。ですので、一番わかりやすいのは、「次」や「前」を使わずに「過去」や「新しい」を使うことじゃないかと思います。さらに、より注目度を上げるためにサムネイル画像を表示すれば完璧になります。
サムネイル付次の記事/前の記事
現在の投稿に隣接する投稿を取得する関数には get_previous_post と get_next_post がありますが、この関数は前後どちらの投稿も取得できる get_adjacent_post のパラメータを変えて取得しているだけですから get_adjacent_post を使えばいいです。
3つ目のパラメータを true にすれば previous つまりは過去の投稿、false にすれば next 新しい投稿を取得します。
私は以下のコードを nav-post.php として
<?php
$prevpost = get_adjacent_post(false, '', true);
$nextpost = get_adjacent_post(false, '', false);
if($prevpost != NULL){
echo '<a class="nav-prev-link" href="' . esc_url(home_url('/') . $prevpost->post_name . '/') . '" rel="prev">';
echo '<h4 class="nav-prev-title">' . esc_html($prevpost->post_title) . '</h4>';
echo '<img class="nav-prev-image" src="' . esc_url(get_the_post_thumbnail_url( $prevpost->ID, 'thumbnail')) . '">';
echo '</a>';
}
if($nextpost != NULL){
echo '<a class="nav-next-link" href="' . esc_url(home_url('/') . $nextpost->post_name . '/') . '" rel="next">';
echo '<h4 class="nav-next-title">' . esc_html($nextpost->post_title) . '</h4>';
echo '<img class="nav-next-image" src="' . esc_url(get_the_post_thumbnail_url( $nextpost->ID, 'thumbnail')) . '">';
echo '</a>';
}single.php のループの下に
<nav class="post-navigation">
<?php get_template_part('nav-post'); ?>
</nav>
としています。で、デザインを加えてこうなります。
