質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%

Q&A

解決済

1回答

501閲覧

ページネーションの実装(WordPress)

chibikurochan

総合スコア5

0グッド

0クリップ

投稿2022/09/05 17:13

編集2022/09/05 17:54

ページネーションの実装(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などを使うのも美しくないかな…とも思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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を1つに繋げる 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を1つに繋げる 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👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibikurochan

2022/09/07 06:12

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

2022/09/08 13:32

クリック範囲を広げる方法を回答に追記しましたのでご確認ください。 元がPHPの質問だったのであくまでPHPで返答していますが、個人的にはJavaScriptでの対応をオススメします。 もしJavaScriptをご存知でなくてもこれくらいなら調べながら実装できると思いますよ!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る