【ワードプレス】プラグインを使わずページャーを作る

ど定番のページャーです。
ワードプレスと言えども曲がりなりにもPHP言語を使用するのであればプログラミングの基本であり醍醐味のページャーを使いましょう。
今回はプラグインを使用せず、functions.phpにページャーを稼働させる記述をして、ページングしたい箇所にphpコードを記述します。
プラグインを使わずにページャーを使いたい場合はページャーを表示させたいphpファイルに直接、書いても動作しません。
functions.phpにページャーを動作させるための準備が必要です。
下記コードをそのままfunctions.phpに置きます。

PHP

//Pagenation
function pagination( $pages = '', $range = 2 ) {
        $showitems = ( $range * 2 ) + 1; //表示するページ数（５ページを表示）

        global $paged; //現在のページ値
        if ( empty( $paged ) )$paged = 1; //デフォルトのページ

        if ( $pages == '' ) {
                global $wp_query;
                $pages = $wp_query->max_num_pages; //全ページ数を取得
                if ( !$pages ) //全ページ数が空の場合は、１とする
                {
                        $pages = 1;
                }
        }

        if ( 1 != $pages ) //全ページが１でない場合はページネーションを表示する
        {
                echo "<div class=\"pagenation\">\n";
                echo "<ul>\n";
                //Prev：現在のページ値が１より大きい場合は表示
                if ( $paged > 1 )echo "<li class=\"prev\"><a href='" . get_pagenum_link( $paged - 1 ) . "'>Prev</a></li>\n";

                for ( $i = 1; $i <= $pages; $i++ ) {
                        if ( 1 != $pages && ( !( $i >= $paged + $range + 1 || $i <= $paged - $range - 1 ) || $pages <= $showitems ) ) {
                                //三項演算子での条件分岐
                                echo( $paged == $i ) ? "<li class=\"active\">" . $i . "</li>\n": "<li><a href='" . get_pagenum_link( $i ) . "'>" . $i . "</a></li>\n";
                        }
                }
                //Next：総ページ数より現在のページ値が小さい場合は表示
                if ( $paged < $pages )echo "<li class=\"next\"><a href=\"" . get_pagenum_link( $paged + 1 ) . "\">Next</a></li>\n";
                echo "</ul>\n";
                echo "</div>\n";
        }
}

これでページャーが使用できる様になりました。

ページャーはワードプレスの表示設定と連携している

表示記事の数がオーバーフローしたら自動でページングする様になります。
このままコピーしてご使用になられても大丈夫です。
ただ投稿数と最大投稿数を確認して使用しましょう。
管理画面の「設定」→「表示設定」から1ページに表示する最大投稿数の数を決めます。

投稿した数より表示数が多いとページャーは表示しませんので注意して下さい。
見本は投稿した記事が9個ほどで最大の表示を５にしています。

次にページングしたいファイルにphpコードを書いて行きます。
まずは記事をループで表示させます。

PHP

<section class="wrapbox">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div>
        <figure class="eyecatch-image2" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"> <a href="<?php the_permalink(); ?>"> Image </a> </figure>
        <h3><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
            </a></h3>
        <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
    </div>
    <?php endwhile; ?>
</section>

上記の様なループ記事をトップページに書きました。
アイキャッチ画像とタイトルと本文がループで表示されます。
<?php endwhile; ?>の下にページャーのコードを置きます。

PHP

<?php
//Pagenation 
if ( function_exists( "pagination" ) ) {
        pagination( $additional_loop->max_num_pages );
}
?>

最終的な記事のphpコードとページャーを組み合わせです。

PHP

<section class="wrapbox">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div>
        <figure class="eyecatch-image2" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"> <a href="<?php the_permalink(); ?>"> Image </a> </figure>
        <h3><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
            </a></h3>
        <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
    </div>
    <?php endwhile; ?>
</section>

<?php
//Pagenation 
if ( function_exists( "pagination" ) ) {
        pagination( $additional_loop->max_num_pages );
}
?>

<?php else : ?>
<div>
    <h6>記事が投稿されていません</h6>
</div>
<?php endif; ?>

ページャーの部分をCSSで成形します。

CSS

/*ページネーション*/
.pagenation{
  border-radius: 7px;
  overflow: hidden;
}
.pagenation ul{
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.active{
  background-color: #999;
  font-size: 12px;
  padding: 10px 15px;
}
.pagenation a{
  font-size: 12px;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  background-color: #CCC;
  border-right: 1px solid white;
}

記事のCSSです。

CSS

.wrapbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wrapbox div{
  padding-bottom:20px;
}
.wrapbox div:first-of-type{
  width: 100%;
}
.wrapbox div:nth-of-type(2){
  width: calc(50% - 10px);
}
.wrapbox div:nth-of-type(3){
  width: calc(50% - 10px);
}
.wrapbox div:nth-of-type(n+4):nth-of-type(-n+9){
  width: calc(16.66% - 20px);
}