アーカイブページにシンプルなページネーションをプラグインなしで設置する

WordPressのアーカイブページ等にページネーション（ページ送り）を設置するとなるとプラグインを使うと比較的簡単に設置が可能です。

ただ、使用しているテーマによっては上手く表示ができなかったり、設定が少し面倒だったりするものもあります。また、デザインを変更しようとなるとCSSファイルへの大幅な追記が必要になったりと便利なようで不便だったりします。

このブログにもアーカイブページにページネーションを設置しているのですが、極力無駄を省いたシンプルなものにしています。

色々と凝ったものを設置しようかとも考えたのですが、スマホで見た場合も踏まえてシンプルなページネーションにすることにしました。

functions.phpに追記するコードだけでなくCSSファイルに追記しているコードも併せて載せておきますので、お好きなようにお使いください。

ページネーション設置で追記したコード
functions.phpに追記したコード
style.cssに追記したコード

ページネーション設置で追記したコード

ちなみに、このブログで設置したページネーションはこんな感じのものです。

このブログに設置したページネーション

ページ総数現在のページ数前後ページへのリンクといった極めてシンプルなものにしました。

各ファイルに追記するコードも少なく済むのでコピペで設置するのも比較的容易にできるのではと思います。

では、実際にfunctions.phpとstyle.cssファイルどのようなコードを追記したのか。以下をご覧ください。

functions.phpに追記したコード

function archive_page_navigation(){
  global $wp_query;
  
  $paged = get_query_var('paged');
  if($paged == 0){
    $paged = 1;
  }
  $max_page = $wp_query->max_num_pages;

  if($max_page == 1 && $paged == 1){
    return;
  }else{
    if($paged == 1){
      $prev = <<<EOF
          <div class="prev-wrap no-prev">
            <i class="fa-solid fa-angle-left"></i>
          </div>
  EOF
  ;
    }else{
      $prev_link = previous_posts(false);
      $prev = <<<EOF
          <div class="prev-wrap">
            <a href="{$prev_link}"><i class="fa-solid fa-angle-left"></i></a>
          </div>
  EOF
  ;
    }
  
    if($paged == $max_page){
      $next = <<<EOF
          <div class="next-wrap no-next">
            <i class="fa-solid fa-angle-right"></i>
          </div>
  EOF
  ;
    }else{
      $next_link = next_posts($max_page,false);
      $next = <<<EOF
          <div class="next-wrap">
            <a href="{$next_link}"><i class="fa-solid fa-angle-right"></i></a>
          </div>
  EOF
  ;
    }
  
    $page_navi = <<<EOF
        <div class="page-navi">
          {$prev}
          <div class="num-wrap">
            <span>{$paged} / {$max_page}</span>
          </div>
          {$next}
        </div>
  EOF
  ;
    echo $page_navi;
  }  
}

Font Awesomeのアイコンを使用しています。もし、同様のデザインにしたい場合は以下の記事で導入方法や使い方などを解説しておりますので、そちらも併せてご覧ください。

functions.phpに追記するコードに関して簡単に説明します。

$paged = get_query_var('paged');
  if($paged == 0){
    $paged = 1;
  }

get_query_var('paged')で現在のページを取得しています。ただ、問題なのが現在のページが1ページ目の場合、返り値が0になるので「0」が返ってきた時は「1」を代入するようにしています。

このget_query_var('paged')ですが、どういうわけか2ページ目で実行すると「2」が返ってくるんですよね…そのせいで少し余分にコードを書き足してやらないといけないのです…

$max_page = $wp_query->max_num_pages;

次に、$wp_query->max_num_pagesで総ページ数を取得しています。

この現在のページとページ総数を使って条件分岐をして、前のページと次のページのリンク取得や要素に付与するclassを決めているというわけです。

style.cssに追記したコード

デザイン的にもシンプルなものにしています。また、ページネーションの幅もそれほど取らないのでレスポンシブ等スマホでの見栄えもそれほど考えなくていいので簡単です。

/* page navigation */
.page-navi{
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 30px;
  max-width: 100%;
}

.prev-wrap{
  background: #0097ab;
  border-radius: 3px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-right: 10px;
  width: 50px;
}

.prev-wrap a{
  color: #ffffff;
  text-align: center;
  width: 100%;
}

.prev-wrap.no-prev{
  background: rgba(8,19,26,0.15);
  align-items: center;
}

.next-wrap{
  background: #0097ab;
  border-radius: 3px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-left: 10px;
  width: 50px;
}

.next-wrap.no-next{
  background: rgba(8,19,26,0.15);
  align-items: center;
}

.next-wrap a{
  color: #ffffff;
  text-align: center;
  width: 100%;
}

.num-wrap{
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

現在、使用されているテーマなどによっては調整が必要になる部分があるかもしれません。ただ、おそらくそのままコピペしていただいても大丈夫かと思われます。

また、CSSファイルをお好みのものに変えたり、functions.phpファイルに追記する内容を変更して、もう少し機能性を持たせたりするなど、お好きなように使っていただければと思っております。