当サイトでも使用している、WordPressテーマSANGOの記事の下部には、「前の記事・次の記事」として、前後の記事のリンクをデフォルトで出力してくれます。
なかなか便利ですが、カテゴライズがしっかりしてくると、その記事と同じカテゴリ内の記事で導線を作ってあげたほうが、ユーザーにとって、より親切です。
一見難しそうな記事タイトルですが、めちゃ簡単にカスタマイズできてしまいます。
この記事では、そんなSANGOの前の記事・次の記事を同じカテゴリで出力するカスタマイズについて解説していきます。
前後の記事を変更するスニペット
早速、前後の記事の出力方法を変更する方法について、標準のものとカスタマイズしたものを順に見ていきましょう。
執筆時点で、この記事が一番最新に該当する場合、サンプルの「次の記事」に記事のリンクが出力されません。紹介のスニペットはその条件に該当しない場合、きちんと出力されます。
SANGOの標準の状態
まずは、SANGOの標準の状態です。
カテゴリやタグなどの概念はなく、前の記事・次の記事がそのまま出力されます。
そのままでも何ら問題ないですが、同じカテゴリやタグの前後記事を出力してあげると、ユーザーにとっても欲しい情報に近いリンクが設置されてるので親切です。
カテゴリ内の前後記事を出力に変更
隣接する前後の投稿を取得するget_adjacent_postの関数のパラメータの末尾を変更して、その記事が属するカテゴリ内での前後記事を出力します。
この記事は「WordPress」カテゴリの記事なので、このようにWordPressのカテゴリ内で前後の記事が表示されます。
$prev_post = get_adjacent_post(true, '', true, "category");
$next_post = get_adjacent_post(true, '', false, "category");末尾をcategoryと指定するとカテゴリ。post_tagを指定するとタグのターム情報を取得します。
SANGOの場合、子テーマの「/parts/single/prev-next-entry.php」の2〜5行目を上記のコードに差し替えればOKです。
線の前後記事出力ブロック
線で区切られた、前後の記事ブロックを作ってみました。
マテリアルのSANGOのテーマにはちょっと合いませんが、フラットな感じのサイトなら合いそうな感じです。
カテゴリやタグ内の前後記事ではなく、全記事から前後の記事を出力するバージョンです。
SANGOの場合は、/parts/single/prev-next-entry.php の中身を以下のPHPにマルっと書き換え、CSSをコピペすれば利用可能です。
コードを表示する
<?php
/**
* 前の記事へ、次の記事へ
*/
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
if($prev_post || $next_post) :
?>
<div class="prevnext_box">
<?php
if($prev_post):
$prev_id=$prev_post->ID;
?>
<a href="<?php the_permalink($prev_id); ?>" class="prevnext_prevlink">
<div class="prevnext_prevblock">
<?php if(get_the_post_thumbnail($prev_id)): ?>
<figure><?php echo get_the_post_thumbnail($prev_id, 'medium'); ?></figure>
<?php endif;?>
<span class="prevnext_prevblocktext"><?php lim_title($prev_id); ?></span>
</div>
</a>
<?php
endif;
if($next_post):
$next_id=$next_post->ID;
?>
<a href="<?php the_permalink($next_id); ?>" class="prevnext_nextlink">
<div class="prevnext_nextblock">
<span class="prevnext_nextblocktext"><?php lim_title($next_id); ?></span>
<?php if(get_the_post_thumbnail($next_id)): ?>
<figure><?php echo get_the_post_thumbnail($next_id, 'medium') ?></figure>
<?php endif;?>
</div>
</a>
<?php endif; ?>
</div>
<?php endif; ?>/* prevnext */
.prevnext_box {
display: flex;
justify-content: space-between;
margin-top: 30px;
margin-bottom: 30px;
align-items: center;
flex-wrap: nowrap;
position: relative;
}
.prevnext_box a {
padding: 0;
display: block;
width: 50%;
position: relative;
border-top: solid 2px #4e4e4e;
}
.prevnext_box a:hover {
text-decoration: none;
background: #eee;
}
a.prevnext_prevlink {
border-right: solid 1px #4e4e4e;
border-bottom: solid 2px #4e4e4e;
}
a.prevnext_nextlink {
border-left: solid 1px #4e4e4e;
border-bottom: solid 2px #4e4e4e;
}
.prevnext_prevblock, .prevnext_nextblock {
display: flex;
flex-wrap: nowrap;
align-items: center;
color: #313131;
}
.prevnext_prevblock img, .prevnext_nextblock img {
width: 220px;
}
span.prevnext_prevblocktext, span.prevnext_nextblocktext {
padding-left: 15px;
padding-right: 15px;
font-size: 0.9rem;
}
a.prevnext_prevlink:before, a.prevnext_nextlink:before {
content: "";
width: 110px;
height: 20px;
background: url(https://dubdesign.net/wp-content/uploads/2021/09/prevarrow2.svg)no-repeat;
position: absolute;
top: -15px;
background-size: contain;
}
a.prevnext_prevlink:before {
left:0;
}
a.prevnext_nextlink:before {
right: 0;
transform: scaleX(-1);
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
.prevnext_box {
flex-direction: column;
border: none;
}
.prevnext_box a {
width: 100%;
border:none;
border-top: solid 2px #4e4e4e;
margin-bottom: 25px;
background: #eee;
}
}参考サイト
参考特定のカテゴリを「次の記事」「前の記事」のリンクに表示させなくしたい。サルワカ
![WP REST APIをReactでWordPressの記事一覧を表示させるスニペット [React版]](https://dubdesign.net/wp-content/uploads/2021/12/restapipost_eyecatch-520x300.jpg)
