コピペだけ！WordPressのページネイション（次へ、前へ）リンクをつけるコード

投稿 : 2020/01/28 | 更新 : 2020/01/29

記事内によくある「次へ」「前へ」のボタン。
ページネーションと呼ぶものらしい。

これをWordPressで実現するのは超簡単！

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

と書くだけで、下記のように表示される。

« previous_post_link
Next Post Title »

僕のサイトではループ内に書かなくても奇跡的に動いていましたが、
本来はループ内に書いて使うらしい。

バリエーション色々

表示テキスト変更

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

« 前の記事へ
次の記事へ»

同じカテゴリ内の前や次の記事

<?php previous_post_link('« %link', '%title', TRUE); ?>
<?php next_post_link('%link »', '%title'); ?>

« 同じカテゴリの前の記事タイトル
同じカテゴリの次の記事タイトル»

サムネイル付き

では、では、ここからが本番。

折角ならサムネイル付きでリンクを作成したいと色々探したのですが、上記のタグではどうやら画像を取得することができない様子・・・。

というわけで、下記のように落ち着きました。

【single.php】

※ループ内で動かしています。

    <div class="previous_next_post">

    <?php
    $prevPost = get_previous_post(); //前の記事データを取得
    if($prevPost){
        if ( has_post_thumbnail($prevPost->ID) ) {//前の記事にサムネイルがあったら
        $prevThumbnail = get_the_post_thumbnail( $prevPost->ID, array( 100, 100 ) ); //サムネイル取得
        previous_post_link( '%link', '<figure>' . $prevThumbnail . '</figure><p>%title</p>' ); //リンクと画像を出力
        } else {//サムネイルが無かったら
        echo '<a href="'.get_permalink($prevPost->ID).'"><figure><img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/noimg_300x225.png" /></figure><p>'.get_post( $prevPost->ID )->post_title.'</p></a>';//リンクとノーイメージ画像を出力
        }    
    }else{//前の記事が無かったら
        echo '<div class="none_article_l">&nbsp;</div>';//空っぽのスペースを出力
    }
    ?>
    <?php
    $nextPost = get_next_post(); //次の記事データを取得
    if($nextPost){
        if ( has_post_thumbnail($nextPost->ID) ) {//次の記事にサムネイルがあったら
        $nextThumbnail = get_the_post_thumbnail( $nextPost->ID, array( 100, 100 ) ); //サムネイル取得
        next_post_link( '%link', '<figure>' . $nextThumbnail . '</figure><p>%title</p>' ); //リンクと画像を出力
        }else{//サムネイルが無かったら
        echo '<a href="'.get_permalink($nextPost->ID).'"><figure><img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/noimg_300x225.png" /></figure><p>'.get_post( $nextPost->ID )->post_title.'</p></a>';       
        }
    }else{
        echo '<div class="none_article_r">&nbsp;</div>';//空っぽのスペースを出力
    }            
    ?>
    </div>

上記タグでCSSをそれっぽく設定してもらうと下記のように出力できます。