Blog スタッフブログ

WEB制作

[WordPress]カスタム投稿記事ページにページネーションを実装

ページネーション（次の記事、前の記事、一覧ページへのリンク）を実装するコードをご紹介します。

HTMLの<div class="pagination">内にPHPを使用して、次の記事、前の記事、および一覧ページへのリンクを表示しています。

<div class="pagination">
  <?php
    $next_post = get_next_post();
    if ( !empty( $next_post ) ){ ?>
    <div class="pagination_next">
        <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>">次の記事へ</a>
    </div>
    <?php } ?>

    <?php $slug = get_post_type_object(get_post_type())->name; ?>
    <div class="pagination_back">
        <a href="<?php echo home_url(); ?>/<?php echo $slug; ?>/">一覧へ戻る</a>
    </div>

    <?php
    $previous_post = get_previous_post();
    if ( !empty( $previous_post ) ){ ?>
    <div class="pagination_prev">
        <a href="<?php echo get_permalink($previous_post->ID); ?>">前の記事へ</a>
    </div>
    <?php } ?>
</div>

解説

次の記事

<?php
$next_post = get_next_post();
if ( !empty( $next_post ) ){ ?>
<div class="pagination_next">
    <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>">次の記事へ</a>
</div>
<?php } ?>

get_next_post();で現在の記事の次の記事を取得しています。

そしてif文で記事が存在すれば表示されるようにしています。

前の記事

<?php
$previous_post = get_previous_post();
if ( !empty( $previous_post ) ){ ?>
<div class="pagination_prev">
    <a href="<?php echo get_permalink($previous_post->ID); ?>">前の記事へ</a>
</div>
<?php } ?>

get_previous_post();で現在の記事の前の記事を取得しています。

そしてif文で記事が存在すれば表示されるようにしています。

記事一覧へ

<?php $slug = get_post_type_object(get_post_type())->name; ?>
<div class="pagination_back">
    <a href="<?php echo home_url(); ?>/<?php echo $slug; ?>/">一覧へ戻る</a>
</div>

アーカイブページに戻る処理です。

get_post_type_object(get_post_type())->name;で投稿タイプのスラッグを取得しています。

戻る一覧へ戻る