【WordPressテーマ開発】ページネーションのカスタマイズ方法(「前へ」、「次へ」の文言変更やページ数の変更など)

WordPressの記事一覧画面でページネーションのテンプレートタグ「the_posts_pagination()」を使えば、簡単にページネーションを作ること可能です。

がデフォルトのままだと、ちょっとダサいですよね。

そこで、このページでは the_posts_pagination() によって出力されるページネーションをカスタマイズ方法について紹介しようと思います。

具体的には「前へ」、「次へ」や「投稿ナビゲーション」の文言変更や、表示する番号の数を変更する方法などです。

リンクの色や形を変えたい

「the_posts_pagination()」によって出力される、タグ、クラスは次のようになります。

<nav class="navigation pagination" role="navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <a class="prev page-numbers" href="http://localhost:8888/wordpress/page/3/">前へ</a>
    <a class="page-numbers" href="http://localhost:8888/wordpress/">1</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="http://localhost:8888/wordpress/page/3/">3</a>
    <span aria-current="page" class="page-numbers current">4</span>
    <a class="page-numbers" href="http://localhost:8888/wordpress/page/5/">5</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="http://localhost:8888/wordpress/page/8/">8</a>
    <a class="next page-numbers" href="http://localhost:8888/wordpress/page/5/">次へ</a>
  </div>
</nav>

なので、上記のクラスに対して、backgroundとかcolorとか好きな物を指定するとデザインを変更できます。



「投稿ナビゲーション」の表示を消す方法

そもそも、この「投稿ナビゲーション」の文字がいらないという場合は、次のクラスにdisplay:noneすれば消せます。

.screen-reader-text {
  display: none;
}

「投稿ナビゲーション」や「前へ」、「次へ」の文言を変える方法

文言を変えたい場合は、次のように書きます。

<?php 
  $params = array(
    'screen_reader_text' => '表示したいテキスト' // 「投稿ナビゲーション」の文言変更
    'prev_text' =>  '表示したいテキスト',  // 「前へ」の文言変更
    'next_text' =>  '表示したいテキスト'  // 「次へ」の文言変更
  );
the_posts_pagination($params); ?>

上の「表示したいテキスト」のところに「>」や「<」などを入力すれば、その値が反映されます。

フォントアイコンも使えるので、fontawesomeからいい感じのものを探してセットしてもいいですね。

表示されるページ数を変更する場合

デフォルトでは、「最初のページ」、「最後のページ」、「表示されているページの前後のページ」、「前へページ(あれば)」、「次へページ(あれば)」が表示される仕様になっています。

この「表示されているページの前後のページ」の数を増やしたい場合は、次のように書くことができます。

<?php 
  $params = array(
    'mid_size' => 2 // 前後に表示するページ数
  );
the_posts_pagination($params); ?>

上記のように記述すると、前後のページ数が2ページずつ表示されるようになります

例えば、4ページ目を開くと、前の2ページ「2」と「3」、後の2ページ「5」と「6」が表示されます。

 


ページネーションのカスタマイズはこれぐらいです。

created by Rinker
ソシム
¥2,860 (2022/12/06 08:40:27時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA