アイキャッチ画像付き次へ・前へボタン
この記事ではWordPressの投稿ページ（single.php）にアイキャッチ画像付きの次へ・前へボタンを追加する方法を紹介します。
ソースコードにコメントを付けていますので、アイキャッチ画像が必要ない場合などはコメントを参考に修正してください。
functions.php
functions.php
function my_get_adjacent_post_url($previous) {
$pn_post = get_adjacent_post(false, '', $previous);
$id = '';
$url = '';
if(!empty($pn_post)) {
$id = $pn_post->ID;
$url = get_permalink($pn_post->ID);
}
$post_info = array("id" => $id, "url" => $url);
return $post_info;
}引数の$previousの値で前の記事か次の記事かを判断し、出力する値が変わります。
single.php
single.php
<?php
// 前の記事を取得
$prev = my_get_adjacent_post_url(true);
// 次の記事を取得
$next = my_get_adjacent_post_url(false);
// 前の記事がある、または次の記事がある場合
if($prev["id"] || $next["id"]):
?>
<div class="post-page-nav">
<?php
// 前の記事がある場合
if(!empty($prev["id"])):
?>
<a href="<?php echo $prev["url"]; ?>" class="prev">
<?php
// 前の記事にアイキャッチ画像がある場合、アイキャッチ画像を表示
if(!empty(get_the_post_thumbnail_url($prev["id"]))):
?>
<img src="<?php echo get_the_post_thumbnail_url($prev["id"], 'thumbnail'); ?>" alt="<?php echo get_the_title($prev["id"]); ?>">
<?php
else:
?>
<img src="<?php echo get_template_directory_uri(); ?>/images/noimage-post.jpg" alt="<?php echo get_the_title($prev["id"]); ?>">
<?php
endif;
?>
<p><?php echo get_the_title($prev["id"]); ?></p>
</a>
<?php
endif;
// 次の記事がある場合
if(!empty($next["id"])):
?>
<a href="<?php echo $next["url"]; ?>" class="next">
<p><?php echo get_the_title($next["id"]); ?></p>
<?php
// 次の記事にアイキャッチ画像がある場合、アイキャッチ画像を表示
if(!empty(get_the_post_thumbnail_url($next["id"]))):
?>
<img src="<?php echo get_the_post_thumbnail_url($next["id"], 'thumbnail'); ?>" alt="<?php echo get_the_title($next["id"]); ?>">
<?php
else:
?>
<img src="<?php echo get_template_directory_uri(); ?>/images/noimage-post.jpg" alt="<?php echo get_the_title($next["id"]); ?>">
<?php
endif;
?>
</a>
<?php
endif;
endif;
?>style.css
style.css
.prev,
.next {
display: flex;
align-content: center;
width: calc(50% - 10px);
padding: 10px;
border: 3px solid #eee;
color: #376282;
position: relative;
overflow: hidden;
z-index: 1;
line-height: 1.5;
}
.prev {
float: left;
}
.next {
justify-content: flex-end;
float: right;
}
.prev::before,
.next::before {
position: absolute;
font-family: "Font Awesome 5 Free";
font-size: 900%;
font-weight: 900;
color: rgba(55, 98, 130, .1);
top: 0;
line-height: 1;
}
.prev::before {
content: "\f060";
right: 10px;
}
.next::before {
content: "\f061";
left: 10px;
}
.prev img,
.next img {
width: 80px;
height: 80px;
}
.prev img {
margin-right: 20px;
}
.next img {
margin-left: 20px;
}
.prev p,
.next p {
font-size: 120%;
font-weight: bold;
} 注意
Font Awesomeというアイコンのwebフォントを疑似要素で使用しています。あらかじめFont AwesomeのCSSを読み込んでおく必要があります。
アイコンを変更したい場合はFont Awesomeのサイトからアイコンを選択し、”f”から始まるコードをコピーして、CSSのcontentの部分をコピーしたものに変更してください。
Font Awesomeを使う準備
Font Awesomeを使うにはたった1行追加するだけです。
Font AwesomeのCSS読み込み用ソースコード
<head>の中に追加するか、</body>の直前に追加します。<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">サイト高速化にもなるので、</body>の直前に追加する方がおすすめです。
まとめ
サイトによってボタンのサイズや色味などの修正が必要となると思いますので、CSSをご自由に編集してご自身のサイトに合ったボタンにしてもらえれば嬉しいです。
投稿ページにボタンがあるのと無いのではページの離脱率も変わってくると思いますので、是非設置してみてください。
