IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:サムネイル付き次の記事/前の記事

WordPress:サムネイル付き次の記事/前の記事

2023/03/10 Wordpress

テーマをゼロから作ってみる(15)です。言葉通りまったくの白紙状態の style.css と index.php からテーマを作ってきましたが、構造はほぼ完成しましたので、デザインを詰めていこうと思います。デモサイトがあります。

  • ゼロから作るWordPressテーマ
  • 次の記事、前の記事の呼び名
  • 次の記事・前の記事、右左? どっちが新しい?
  • サムネイル付次の記事/前の記事

次の記事、前の記事の呼び名

一般的に投稿ページの記事下には「次の記事」「前の記事」へのリンクを置きますが、わかりやすく、また目につくようにサムネイル画像を入れようと思います。

ところで、このリンクは何という名前なんでしょう? それに左右どちらに置くかもバラバラですね。

呼び名については、ページネーション、ページャー、ページング、ページ送りなども使われていますが、これはどちらかといいますと記事一覧ページなどに使う次のものを差す言葉のようです。

それに「ページャー」は小型の無線受信端末のことで日本ですとポケベルになります。「ページング」は仮想メモリで使われますのでちょっと違和感があります。「ページ送り」は言葉のニュアンスからいきますとページネーションと同じに感じます。

ということで、妥当なのは、そのリンクを表示する関数 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 を使えばいいです。

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

としています。で、デザインを加えてこうなります。

富士通/東芝/レノボ/NEC 厳選ノートPC /大画面15.6型/Win 11 Pro/MS Office H&B 2019/Core i3-5005以上/waj...

富士通/東芝/レノボ/NEC 厳選ノートPC /大画面15.6型/Win 11 Pro/MS Office H&B 2019/Core i3-5005以上/waj…

25,880円(03/21 21:02時点)
Amazon
Twitterシェアリンクはintent/tweetを使おう
WordPress:メール送信にGmailのSMTPを使う(プラグインなし)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com