WordPressの投稿ページで記事を読み終えた最後に「前のページ」「次のページ」へのリンクを貼って「前後の記事」にページ移動できるWebサイトを見たことがあるかと思います。
WordPressで前後の記事はWordPress関数を使用することで投稿ページに隣接する前後のページ情報を取得して表示することができます。
WordPressで前後の記事を取得する
WordPressで前後の記事を取得するには、WordPress関数のget_adjacent_post()を使用することで投稿ページに隣接する記事情報を取得することができます。
get_adjacent_post()の使い方をどのようにすればWordPressで前後の記事を取得することができるか、やり方を一つずつ説明していきます。
前後の記事をget_adjacent_postで取得
WordPressで前後の記事を取得することができるget_adjacent_postは投稿ページに隣接する前後の記事を取得することができます。
隣接する記事を取得するといっても、前後の記事どちらも隣接に該当するためWordPressのget_adjacent_post()の引数で「前のページ」と「次のページ」の2つの記事情報に振り分けた記述をして前後の記事を取得します。
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
?>
上の記述例で説明します。2つの変数を作り一つは「前の記事」、もう一つは「次の記事」用の変数にしてget_adjacent_post()を格納します。
変数$prevpostに格納するget_adjacent_post()の引数が「前の記事」を取得するためのもので、カッコ内の引数にtrue, ”, trueを記述します。
変数$nextpostに格納するget_adjacent_post()の引数が後の記事、つまり「次のページ」を取得するためのものです。カッコ内の引数にtrue, ”, falseを記述します。
前と後の記事に分けた引数について少し説明します。
get_adjacent_postの第一引数
前後の記事が同じタクソノミー項目に含まれているかどうかをtrueとfalseのどちらかで記述します。初期値はfalseです。
例えばtrueにすると同じカテゴリーに属する前後の記事が取得できます。
falseにすると同じカテゴリーに属していない投稿だとしても、その投稿ページの前後の記事として取得できます。
get_adjacent_postの第二引数
除外したい投稿のIDを記述すると、前後の記事を取得するときに、その投稿IDの記事は含まれなくなります。初期値は「”」で空にしているので除外をしていないことになります。
get_adjacent_postの第三引数
前の記事を取得するかどうかをtrueかfalseで記述します。初期値はtrueで「前の投稿」を取得します。
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
?>
WordPressで前後の記事を取得する必要があるため、前の記事を取得するget_adjacent_post()の第三引数にはtrueを記述
後の記事(次のページ)を取得するget_adjacent_post()の第三引数にはfalseを記述します。
get_adjacent_post()の引数(パラメータ)についての詳細はWordPress codexが参考になるので時間があるときにでも読んでみてください。
WordPress Codex / get adjacent post
投稿ページで前後の記事が取得できてるか確認
WordPressのget_adjacent_post関数で前後の記事に振り分けて変数に格納したコードとPHPのvar_dumpを使用して、WordPressの投稿ページで前後の記事が取得できてるか確認しておきます。
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
var_dump( $prevpost, $nextpost );
?>
変数$prevpostと$nextpostに格納した前後の記事を取得するget_adjacent_postの記述とvar_dump( $prevpost, $nextpost );の記述をWordPressのsingle.phpに貼り付けてファイルを保存します。
そしてWordPressの投稿ページをブラウザで表示させます。
ブラウザに表示させた投稿ページには、隣接する前後の記事の情報が表示するので、WordPressで前後の記事を取得できていることが確認できます。
このときWordPressの投稿ページで取得した記事の情報はグローバルpostに格納されていて、post_titleやpost_date、そして前後の記事のIDなどがブラウザに表示した投稿ページの前後の記事情報として取得できていることがわかります。
前後の記事がget_adjacent_postで取得できることが確認できたので、次は前後の記事をWordPressの投稿ページに表示させるやり方を説明します。
前後の記事をWordPressの投稿ページに表示
WordPressの投稿ページでvar_dumpをして前後の記事が取得できたか確認したときに、前後の記事の「ID」が取得できています。
get_adjacent_postで取得した前後の記事のIDを使用してWordPressの投稿ページに前後の記事を表示させます。
前後の記事タイトルをリンクして表示
前後の記事タイトルをリンクしてWordPressの投稿ページに表示する場合のやり方です。
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
if( $prevpost or $nextpost ){
?>
<ul class="prev_next_wrap">
<?php
if ( $prevpost ) {
echo '<li><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></li>';
} else {
echo '<li class="no_prevNext_text">記事がありません</li>';
}
if ( $nextpost ) {
echo '<li><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></li>';
} else {
echo '<li class="no_prevNext__text">記事がありません</li>';
}
?>
</ul>
<?php } ?>
上記のPHPコードはWordPressのsingle.phpに記述をします。
WordPressで前後の記事を取得するget_adjacent_postのPHPコードの下にif文の条件を($prevpost or $nextpost)を記述して、前の記事または次の記事がある場合の条件式にします。
次に前後の記事を表示する親要素をHTMLのulタグでマークアップして、親要素の中に、前の記事と次の記事を別々のif文で条件式を作ります。
前の記事がある場合 if ( $prevpost )
li要素をマークアップしてaタグのhref属性にget_permalink($prevpost->ID)を記述をすることによって、WordPressのget_permalinkが投稿ページに隣接する前の記事のパーマリンクを取得します。echoで出力します。
get_the_title($prevpost->ID)は$prevpostに格納されている前の記事として表示する投稿IDを元にget_the_titleで記事タイトルを取得します。リンクテキストとしてechoで表示します。
次の記事がある場合 if ( $nextpost )
li要素をマークアップしてaタグのhref属性にget_permalink($nextpost->ID)の記述することによって、WordPressのget_permalinkが投稿ページに隣接する次の記事のパーマリンクを取得します。echoで出力します。
get_the_title($nextpost->ID)は$nextpostに格納されている次の記事として表示する投稿IDを元にget_the_titleで記事タイトルを取得します。リンクテキストとしてechoで表示します。
あとはWordPressに前後の記事が表示できる投稿がないときのためにelse文で「記事がありません」のようにechoでテキスト表示できるようにしておきます。
コードの記述後の表示結果は開いた投稿ページの前後の記事のタイトルがリンクつきで表示します。上の画像はCSSで横並びにしています。
前後の記事にサムネイルも表示
WordPressの投稿ページにサムネイルも表示して前後の記事を表示する場合のPHPコードの書き方も説明します。
<?php
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
if( $prevpost or $nextpost ){
?>
<ul class="prev_next_wrap">
<?php
if ( $prevpost ) {
echo '<li><div>' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></li>';
} else {
echo '<li class="no_prevNext_text">記事がありません</li>';
}
if ( $nextpost ) {
echo '<li><div>' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></li>';
} else {
echo '<li class="no_prevNext_text">記事がありません</li>';
}
?>
</ul>
<?php } ?>
先述した前後の記事タイトルをリンクして表示するコードと同じですが、サムネイルを表示する場合は、前の記事と次の記事があるかどうかを判定するif ( $prevpost )とif ( $nextpost )の下にサムネイルを表示させる記述を書きます。
WordPressのget_the_post_thumbnail()の引数に変数$prevpostと$nextpostに格納した投稿に隣接する記事のIDで前後の記事のサムネイル画像を表示させます。
前後の記事のサムネイルを表示するマークアップもliタグでマークアップしてechoで出力します。
コードの記述後の表示結果は開いた投稿ページの前後のサムネイルが表示して記事のタイトルがリンクつきで表示します。上の画像はCSSで横並びにしています。
まとめ
WordPressで前後の記事を取得して投稿ページに表示するには、やり方を2つの作業工程に分けると分かりやすいかと思います。
WordPressのget_adjacent_post()関数で投稿に隣接する記事のIDを取得する
前後の記事のIDを使用して表示に必要な記事のタイトルやパーマリンク、サムネイルなどをWordPressの関数で表示する
あとはCSSで横並びにしてデザインすることで、それぞれのWebサイトにあった前後の記事が実装できます。
横並びにしただけですが今回の記事用に使用したCSSを一応載せておきます。(メディアクエリ書いてません)
.prev_next_wrap{
display: flex;
justify-content: space-around;
background-color: #fff;
color: #CDDC39;
padding: 30px;
margin: 30px auto;
}
.prev_next_wrap a{
color: #fff;
margin-left: 10px;
}
.prev_next_wrap li{
background: #333;
padding: 20px;
margin: 5px;
display: flex;
align-items: center;
flex: 1;
}
