WordPress記事詳細ページに「前の記事へ・次の記事へ」でお馴染みのページネーションをコピペで実装する方法をご紹介！
シンプルなCSSスタイリングコードも載せてます。
ページネーション表示のコード
作成中のWordPressテーマのsingle.phpの、WPループ内にぺぺっと貼り付けて使ってみましょう！
single.php
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<div class="Pager">
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '">前の記事へ</a>';
} else { //前の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '">次の記事へ</a>';
} else { //次の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
?>
</div>
<?php } ?>実際に使用する際の全体像としてはこんな感じです。イメージ膨らませましょう。
single.php
<div class="Blog-Inner">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php if (has_post_thumbnail()) : ?>
<div>
<img src="<?php echo (get_the_post_thumbnail_url()); ?>" alt="">
</div>
<?php endif; ?>
<?php the_content(); ?>
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<div class="Pager">
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '">前の記事へ</a>';
} else { //前の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '">次の記事へ</a>';
} else { //次の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
</div>カスタム投稿の記事詳細ページのページネーション
カスタム投稿の場合、デフォルトでは上記のコードを使ってもページネーションは表示されません。
焦らずまずは、functions.phpに下記コードを追記しましょう。
functions.php
function mod_get_adjacent_post($direction = 'prev', $post_types = 'post') {
global $post, $wpdb;
if(empty($post)) return NULL;
if(!$post_types) return NULL;
if(is_array($post_types)){
$txt = '';
for($i = 0; $i <= count($post_types) - 1; $i++){
$txt .= "'".$post_types[$i]."'";
if($i != count($post_types) - 1) $txt .= ', ';
}
$post_types = $txt;
}
$current_post_date = $post->post_date;
$join = '';
$in_same_cat = FALSE;
$excluded_categories = '';
$adjacent = $direction == 'prev' ? 'previous' : 'next';
$op = $direction == 'prev' ? '<' : '>';
$order = $direction == 'prev' ? 'DESC' : 'ASC';
$join = apply_filters( "get_{$adjacent}_post_join", $join, $in_same_cat, $excluded_categories );
$where = apply_filters( "get_{$adjacent}_post_where", $wpdb->prepare("WHERE p.post_date $op %s AND p.post_type IN({$post_types}) AND p.post_status = 'publish'", $current_post_date), $in_same_cat, $excluded_categories );
$sort = apply_filters( "get_{$adjacent}_post_sort", "ORDER BY p.post_date $order LIMIT 1" );
$query = "SELECT p.* FROM $wpdb->posts AS p $join $where $sort";
$query_key = 'adjacent_post_' . md5($query);
$result = wp_cache_get($query_key, 'counts');
if ( false !== $result )
return $result;
$result = $wpdb->get_row("SELECT p.* FROM $wpdb->posts AS p $join $where $sort");
if ( null === $result )
$result = '';
wp_cache_set($query_key, $result, 'counts');
return $result;
}あとは、さきほど、single.phpにコピペしたコードの２〜３行目を以下のように修正すればOKです。
single-work.php
<?php
$prevpost = mod_get_adjacent_post('prev', array($post_type, '', 'true')); //前の記事
$nextpost = mod_get_adjacent_post('next', array($post_type, '', 'true')); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<div class="Pager">
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '">前の記事へ</a>';
} else { //前の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '">次の記事へ</a>';
} else { //次の記事が存在しないとき
echo '<a href="' . network_site_url('/') . '">TOPへ戻る</a>';
}
?>
</div>
<?php } ?>ページネーションのスタイリング
背景色は白。文字色はメインカラー。ボーダーもメインカラーのシンプルスタイリングです。
single.css
.Pager {
margin-left: auto;
padding-top: 40px;
width: 280px;
display: flex;
justify-content: space-between;
}
.Pager a {
border: 2px solid #23b594;
border-radius: 6px;
width: 45%;
height: 42px;
line-height: 42px;
text-align: center;
background: #fff;
color: #23b594;
font-size: 16px;
}参考記事
WordPress：「前の記事」「次の記事」7つのカスタマイズ方法
カスタム投稿で「前の記事・次の記事」【get_adjacent_post】を適用させる
次はこの記事！
【WordPress】記事一覧ページのページネーションをカスタマイズする方法
