更新日 (投稿日

【WP】次の記事や前の記事にサムネイルを表示させたい

【WP】次の記事や前の記事にサムネイルを表示させたい - サムネイル

おひさしブリーフ(?)な WordPress の記事になるんですが、今回は「次の記事」や「前の記事」にサムネイル(アイキャッチ画像)を表示したく、やり方を調べてみました。

やりたいこと

こういうことがしたいです。

前の記事・次の記事ナビにサムネを表示させたい
前の記事・次の記事ナビにサムネを表示させたい
Ads

どうやろう?

色々調べてみたんですが、個別ページ用のテンプレートになる「single.php」をカスタマイズする方法が簡単そうでした。

「single.php」とは?

WordPress の記事を表示させるためのテンプレートの一種ですね。

「single.php」は、使っているテーマ次第で内容が異なっています。

ここでは うしぶろ でも使っている「Twenty Seventeen」というテーマをカスタマイズして、サムネイルの表示をしてみようと思います。

事前準備

すぐ戻せるよう子テーマを用意しておきます。

まぁ、なくてもいいっちゃいいんですけどね…(´ε` )イチオウネ…

「single.php」をカスタマイズする

いよいよカスタマイズ作業に入ります。

まずは「single.php」をコピーする

親テーマが持っている「single.php」を子テーマ側にコピーします。

■コピー元(親テーマの single.php)

/wp-content/themes/twentyseventeen/single.php

■コピー先 例(小テーマ)

/wp-content/themes/twentyseventeen-child/single.php

コピーが完了すれば、子テーマ側の「single.php」が有効になるはずです。

既存の「前の記事」「次の記事」ナビをコメントアウトする

「single.php」の大体 30 行目付近かと思いますが、「the_post_navigation」を呼んでる部分をコメント化しちゃいます。

				// 既存のナビはコメントアウト
				/*
				the_post_navigation(
					array(
						'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
						'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
					)
				);
				*/

これで今まで表示されていた「前の記事」「次の記事」のナビゲーションが消えたかと思います。

新しい「前の記事」「次の記事」ナビを付け加える

今度は新しい、サムネイル付きのナビゲーションを出力させるためのプログラムを追記します。

				// 新たにサムネ付きナビを出力
				echo '<nav class="navigation post-navigation" role="navigation">';
  				echo '<h2 class="screen-reader-text">投稿ナビゲーション</h2>';
  				echo '<div class="nav-links">';

				if ( $prevPost = get_previous_post() ) { // 前の記事を取得
				
					// 前の記事があればリンクを出す
					echo '<div class="nav-previous">';
					echo '<a href="' . get_permalink($prevPost->ID) . '" rel="prev">'; // 前の記事のリンク
					echo '<span class="screen-reader-text">過去の投稿</span><span aria-hidden="true" class="nav-subtitle">前の記事</span>';
					echo get_the_post_thumbnail($prevPost->ID);
					echo '<span class="nav-title">' . get_the_title($prevPost->ID) . '</span>';
					echo '</a>';
					echo '</div>';
				}

				if ( $nextPost = get_next_post() ) { // 次の記事を取得

					// 次の記事があればリンクを出す
					echo '<div class="nav-next">';
					echo '<a href="' . get_permalink($nextPost->ID) . '" rel="next">'; // 次の記事のリンク
					echo '<span class="screen-reader-text">次の投稿</span><span aria-hidden="true" class="nav-subtitle">次の記事</span>';
					echo get_the_post_thumbnail($nextPost->ID);
					echo '<span class="nav-title">' . get_the_title($nextPost->ID) . '</span>';
					echo '</a>';
					echo '</div>';

				}

				echo '</div>';
				echo '</nav>';

タグ出力もしちゃってるのでゴテッとした感じになってますが、実行するとこんな風になります。

サムネ付きのナビ
サムネ付きのナビ

CSSで体裁を整える

最後に見た目を整えていきます。

/* 既存のアニメーションを消す */
.post-navigation a:focus,
.post-navigation a:hover,
a:focus .nav-title,
a:hover .nav-title {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* ホバー時のアニメーション */
.nav-links > .nav-previous a > img,
.nav-links > .nav-next a > img {
  transition: .4s;
}
.nav-links > .nav-previous a:hover > img,
.nav-links > .nav-next a:hover > img {
  filter: brightness(.8);
  transform: scale(1.05);
}

/* サムネイルの表示位置 */
.nav-links > .nav-previous img {
  float: left;
}
.nav-links > .nav-next img {
  float: right;
}

/* 境界線 */
.nav-links > .nav-previous {
  padding-right: .4rem;
  border-right: solid 1px #eee;
}
.nav-links > .nav-next {
  padding-left: .4rem;
  border-left: solid 1px #aaa;
}

/* サムネイルのサイズ調整など */
.nav-links > .nav-previous img {
  width: 80px;
  margin-right: .4rem;
  border: solid 1px #a6a;
  border-radius: 8px;
}
.nav-links > .nav-next img {
  width: 80px;
  margin-left: .4rem;
  border: solid 1px #a6a;
  border-radius: 8px;
}

/* フォントの調整 */
  .nav-links > .nav-previous .nav-title,
  .nav-links > .nav-next .nav-title {
    font-weight: bold;
    font-size: .8rem;
  }

適用するとこんな感じになります。

サムネ付きのナビ - CSS適用
サムネ付きのナビ - CSS適用

とりあえずこれで完了

今回はこれで完了。

深く考えずにやってみたせいか汎用性には欠けまくってますが…、まぁ、こんな感じでやればできるんだね~、ぐらいのメモが残せたので良しとしておきます。

HTML の出力部分や CSS の装飾とかをキチンとやれると、もっともっとスッキリ簡単に実現できそうですよね~。

…私はやりませんがね。(´ε` )モウマンゾクジャ

“【WP】次の記事や前の記事にサムネイルを表示させたい” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)