ミギムキ

[WordPress] ページネーション(ページ送り)をプラグインなしで設置したい

やりたいこと

サンプルコード

テンプレート.php

<nav class="pagination"> <?php $arg = array( 'current' => max( 1, get_query_var('paged') ), 'total' => $wp_query->max_num_pages, 'prev_text' => '', 'next_text' => '', ); echo paginate_links($arg); ?> </nav>
スポンサー広告

CSS

.pagination { display: flex; justify-content: center; margin: 30px 0px 0px; } .pagination > a, .pagination > span { display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; margin: 0px 0.5em; border: 1px solid #3388dd; font-weight: bold; text-decoration: none; } .pagination > .prev, .pagination > .next { position: relative; border: none; } .pagination > .prev:before, .pagination > .next:after { position: absolute; top: 50%; left: 50%; width: 0.5em; height: 0.5em; border-top: 2px solid #3388dd; border-right: 2px solid #3388dd; content: ""; } .pagination > .prev:before { transform: translateX(-50%) translateY(-50%) rotate(225deg); } .pagination > .next:after { transform: translateX(-50%) translateY(-50%) rotate(45deg); } .pagination > .current { background-color: #3388dd; color: #fff; }

仕組み、解説、補足など

スポンサー広告