ページネーションの実装（WordPress）

・paginate_linksで取得したリンクが正しい位置に出力されない。
・適用したいクラスが正しい位置に付かない。

PHP

<?php
                $big = 9999999999;
                $paginate_links = paginate_links( array(
                  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                  'format' => 'page/%#%/',
                  'current' => max(1, $paged),
                  'prev_next' => true,
                  'prev_text' => '',
                  'next_text' => '',
                  'type' => 'array',
                ));
                echo '<ul class="pagination"><li>';
                echo join('</li><li><span class="pagination-item">', $paginate_links);
                echo '</span></li></ul>'; ?>
                <?php wp_reset_postdata(); ?>

CSS

.pagination .pagination-item {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    padding: 4px 0;
    background-color: #72aee6;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;

.pagination .next {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #72aee6;
    border-right: 2px solid #72aee6;
    transform: rotate(45deg);

実現したいこと

↓これを

↓こうしたい

発生している問題

事前に記述したCSS内のクラスを適用させるため、'type' => 'array'にしてリンクだけ取得し、echoでHTMLタグとクラスを追加、タグの間に取得したリンクを挟む記述にしていますが、本来「1」に適用したいaタグと"pagination-item"のクラスが追加されず、逆に「＞（次へボタン）」に"pagination-item"のクラスが追加されてしまっています。
"pagination-item"は、CSS内に自分で記述したスタイルのクラス名です。
「＞」ボタンは、クラスが上手く当たっていないため、ブルーの■の中に隠れています。
デベロッパーツールで出力結果を見てみたところ、下記のような結果になっていることから、前述の原因がわかりましたが、解決には至っていません。
CSSファイルにクラス.currentに対しての記述を追加して、「1」を装飾することもできますが、できればCSSファイルは触らず解決したいです。

出力結果のソースコード

<ul class="pagination">
<li><span aria-current="page" class="page-numbers current">1</span></li>
<li><span class="pagination-item"><a class="page-numbers" href="http://localhost/wordpress-****/tag/tag1/page/2/">2</a></span></li>
<li><span class="pagination-item"><a class="next page-numbers" href="http://localhost/wordpress-****/tag/tag1/page/2/"></a></span></li>
</ul>

試したこと

①

echo '<ul class="pagination"><li>';

を

echo '<ul class="pagination"><li><span class="pagination-item">';

に修正して「1」に"pagination-item"のクラスを付けてみたところ、クラスは付きましたが、逆に2ページ目以降の「＜（前へ）」ボタンに"pagination-item"のクラスが付いてしまい、「＜」が隠れてしまいました。

②

echo '<ul class="pagination">';
                echo join('<li><span class="pagination-item">', $paginate_links);
                echo '</ul>'; ?>

現状と変わらず。

③echoで「＜＞」も含めて出力すること自体が、今回実現したいことに対する方法としては相応しくないのかも？と考え、ページ番号部分と＜＞だけ分けて出力する方法を調べて、下記のように修正してみましたが、解決できないどころか新しい問題が出てきたので、やめました。

<ul class="pagination">
            <?php previous_post_link($paginate_links, '<li><span class="prev"></span></li>'); ?>
            <?php
            $big = 9999999999;
            $paginate_links = paginate_links( array(
              'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
              'format' => 'page/%#%/',
              'current' => max(1, $paged),
              'prev_next' => false,
              'type' => 'array',
            ));
            echo join('<li><span class="pagination-item">', $paginate_links);
            echo '</span></li>'; ?>
            <?php next_post_link($paginate_links, '<li><span class="next"></span></li>'); ?>
</ul>

↓上記コードを試した結果
・この記述でも、「1」に"pagination-item"クラスが付かない。
・1ページ目で表示したくない「＜（前へ）」ボタンが表示されてしまう。
・最終ページで表示したくない「＞（次へ）」ボタンが表示されてしまう。

せっかくpaginate_linksのパラメータでprev, nextが設定できるのに、わざわざprevious_post_linkなどを使うのも美しくないかな…とも思います。

行動規範の内容に同意します

回答1件

ベストアンサー

少し無理矢理な感じがしますが、以下のコードで数字部分にのみ"pagination-item"のクラスを付与できます。

ただ、クラスやタグを付与するならPHPでなくJavaScriptの方が簡潔な場合もあるので、そちらの方法も検討してみてもいいかもしれません。

php
1// ここは変更していません
2$big = 9999999999;
3$paginate_links = paginate_links( array(
4  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
5  'format' => 'page/%#%/',
6  'current' => max(1, $paged),
7  'prev_next' => true,
8  'prev_text' => '',
9  'next_text' => '',
10  'type' => 'array',
11));
12
13// --------------------------------------------------------------------
14// 以下を変更しています
15
16// ページネーションの数字部分をliとspanで囲む
17$pattern = '/<(.*?)>([0-9])+<\/(.*?)>/s';
18$replace = '<li><span class="pagination-item"><$1>$2</$3></span></li>';
19$paginate_links  = preg_replace( $pattern, $replace, $paginate_links );
20
21// HTMLを１つに繋げる
22$html = '<ul class="pagination"><li>';
23foreach ($paginate_links as $paginate_link) {
24	$html .= $paginate_link;
25}
26$html .= '</li></ul>';
27
28echo $html;
29

追記

クリック範囲を広げるということは、aタグの中にspanタグを入れるということですね。
以下のようにすれば実現可能だと思いますが、ここまで来るとJavaScriptの方がいいですね…。
ちなみに下記のPHPでの対応はpreg_replace関数や正規表現について調べれば、ご自身でも自由に調整できると思うで一度調べてみてください。

php
1// ここは変更していません
2$big = 9999999999;
3$paginate_links = paginate_links( array(
4  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
5  'format' => 'page/%#%/',
6  'current' => max(1, $paged),
7  'prev_next' => true,
8  'prev_text' => '',
9  'next_text' => '',
10  'type' => 'array',
11));
12
13// --------------------------------------------------------------------
14// 以下を変更しています
15
16// ページネーションの数字部分をliで囲む
17$pattern1 = '/<(.*?)>([0-9])+<\/(.*?)>/s';
18$replace1 = '<li><$1>$2</$3></li>';
19$paginate_links  = preg_replace( $pattern1, $replace1, $paginate_links );
20
21// ページネーションのaタグの中にspanタグを入れる
22$pattern2 = '/<a class="page-numbers"(.*?)>([0-9])+<\/a>/s';
23$replace2 = '<a class="page-numbers"$1><span class="pagination-item">$2</span></a>';
24$paginate_links  = preg_replace( $pattern2, $replace2, $paginate_links );
25
26// ページネーションの現在のページにspanタグを入れる
27$pattern3 = '/<span aria-current="page"(.*?)>([0-9])+<\/span>/s';
28$replace3 = '<span aria-current="page"$1><span class="pagination-item">$2</span></span>';
29$paginate_links  = preg_replace( $pattern3, $replace3, $paginate_links );
30
31
32// HTMLを１つに繋げる
33$html = '<ul class="pagination"><li>';
34foreach ($paginate_links as $paginate_link) {
35	$html .= $paginate_link;
36}
37$html .= '</li></ul>';
38
39echo $html;```

投稿2022/09/06 14:29

編集2022/09/08 13:29

March03

総合スコア47

chibikurochan

2022/09/07 06:12

早々に回答ありがとうございます！昨夜早速試してみて、見た目はできましたが、ボタンのスタイルを当てているタグの中に、paginate_linksで取得したリンク（<a>タグ）が内包されてしまっているため、ボタンではなくその中にある数字をクリックしないとページ遷移ができない＝UX的に問題があります。 $replace = '<li><$1>$2</$3></li>'; ↑これを修正すれば、タグと<li>タグの間にpaginate_linksで取得したリンク（<a>タグ）を移動させられるのかな？と思い、$1や$3をタグの前後に移動させてみましたが、上手くいきません…。 タグ自体をリンク対象範囲にするには、どうすれば良いのでしょうか。