今回は、カスタムしやすいぺージネーションの作成をした方法を記事にしてみました。
ページネーションの作成は、プラグインを使用する方法もありますが
今回はプラグインは使用しない方法です。
ページネーション実装方法比較
実装方法は、wp_pagenavi()での実装とwp_pagenavi()での実装があります。
wp_pagenavi() の特徴
- シンプルで簡単
関数を呼び出すだけでデザイン済みのページネーションが生成されるので、カスタマイズが不要な場合に最適です。
プラグイン「WP-PageNavi」が必要です。 - 自動的に $wp_query を利用
$wp_query を前提としているため、メインクエリで使用するのが基本です。
WP_Query を使ったカスタムクエリでは、wp_pagenavi() に $query オブジェクトを引数として渡す必要があります。 - カスタマイズがやや難しい
デザインの調整にはCSSの上書きが必要で、細かなHTML構造の変更は難しい。
paginate_links() の特徴と使いどころ
- 柔軟なカスタマイズが可能
HTML構造を自由に変更できるので、独自のデザインを実装したい場合に最適です。
自由にクラス名やアイコンを付与でき、細かな動作調整もしやすい。 - メインクエリ・カスタムクエリの両方に対応
$wp_query を利用する場合はそのままでOK。
カスタムクエリの場合は ‘total’ => $query->max_num_pages のように $query を指定する必要があります。 - コードの記述量は増えるが、デザインの自由度が高い。
paginate_links()での実装サンプル
今回はは下記のようなページネーションを作成したのでそのコードを記事にしました。
よかったら、参考にしてください。
header.php archive-works.php main.cssを使用しました。
header.php
|
1 2 3 |
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" /> </head> |
archive-works.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<section> <div class="pagenav-wrapper blogpage-pagenav"> <ul class="pagenav-flex"> <?php $pagination_links = paginate_links(array( 'total' => $wp_query->max_num_pages, // $query → $wp_query に変更 'current' => max(1, $paged), 'prev_text' => '< Back', 'next_text' => 'Next >', 'end_size' => 1, 'mid_size' => 2, 'type' => 'array', )); if ($pagination_links) { if ($paged > 1) { echo '<li class="pagenav-item duble-arrow"> <a href="' . get_pagenum_link(1) . '"> <span class="material-symbols-outlined">keyboard_double_arrow_left</span> </a> </li>'; } foreach ($pagination_links as $link) { if (strpos($link, 'prev') !== false) { echo '<li class="pagenav-item pagenav-back active">' . $link . '</li>'; } elseif (strpos($link, 'next') !== false) { echo '<li class="pagenav-item">' . $link . '</li>'; } else { echo '<li class="pagenav-item">' . $link . '</li>'; } } if ($paged < $wp_query->max_num_pages) { echo '<li class="pagenav-item duble-arrow duble-arrow-right"> <a href="' . get_pagenum_link($wp_query->max_num_pages) . '"> <span class="material-symbols-outlined">keyboard_double_arrow_right</span> </a> </li>'; } } ?> </ul> </div> </section> |
main.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.pagenav-wrapper { width: min(100%, 21rem); margin: 0 auto; } .pagenav-wrapper .pagenav-flex { display: flex; justify-content: center; align-items: center; } .pagenav-item a { color: #999999; font-size: .8rem; transition: 0.8s; display: block; } .pagenav-item a:hover { color: #000000; } .page-numbers { margin: 0 1rem; } .prev.page-numbers{ margin-left: 0; } .next.page-numbers{ margin-right: 0; } .pagenav-item.duble-arrow { width: 26px; color: #999999; } .pagenav-item.duble-arrow.duble-arrow-right { height: 24px; } .blogpage-pagenav .material-symbols-outlined { font-size: 26px; } .material-symbols-outlined { color: #999999; opacity: .5; transition: 0.8s; } .material-symbols-outlined:hover { color: #000000; } |
YouTube
おすすめレンタルサーバー Xserver
高速・多機能・高安定レンタルサーバー『エックスサーバー』
私も使ってるレンタルサーバーになります
独自ドメインが永久無料 ・マルチドメイン、メールアドレス無制限！
コメント