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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

受付中

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

chibikurochan
chibikurochan

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

0リアクション

0クリップ

237閲覧

投稿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などを使うのも美しくないかな…とも思います。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。