feat: improve pagination styling and functionality

Updated pagination implementation in `archive-article.php` and `archive-letter.php` to use global `$wp_query` for accurate page counts and improved navigation. Enhanced user experience by adding more pagination options such as `prev_next`, `show_all`, and customizable text for previous and next links.

Added new styles to `style.css` to center pagination, improve link aesthetics, and highlight the current page.

This enhancement provides a more user-friendly interface and consistent appearance across archive pages.
This commit is contained in:
Kumi 2024-08-03 12:59:01 +02:00
parent 7ab01eec96
commit 9ece16c681
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 51 additions and 4 deletions

View file

@ -84,10 +84,21 @@
<?php endif; ?>
</div>
<div class="row">
<div class="col-md-12">
<div class="pagination col-md-12">
<?php
global $wp_query;
echo paginate_links(array(
'total' => $loop->max_num_pages,
'total' => $wp_query->max_num_pages,
'current' => max(1, get_query_var('paged')),
'format' => '?paged=%#%',
'show_all' => false,
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => __('« Prev', 'duck-behavior-journal'),
'next_text' => __('Next »', 'duck-behavior-journal'),
'type' => 'plain'
));
?>
</div>

View file

@ -28,10 +28,21 @@
<?php endif; ?>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="pagination col-md-12">
<?php
global $wp_query;
echo paginate_links(array(
'total' => $wp_query->max_num_pages,
'current' => max(1, get_query_var('paged')),
'format' => '?paged=%#%',
'show_all' => false,
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => __('« Prev', 'duck-behavior-journal'),
'next_text' => __('Next »', 'duck-behavior-journal'),
'type' => 'plain'
));
?>
</div>

View file

@ -133,4 +133,29 @@ a h5 {
padding: 5px 10px;
background-color: #f9f9f9;
border-top: 1px solid #ddd;
}
}
.pagination {
display: flex;
justify-content: center;
padding: 0;
}
.pagination .page-numbers {
display: block;
padding: 10px 15px;
margin: 0 5px;
color: #333;
background-color: #f9f9f9;
border: 1px solid #ddd;
text-decoration: none;
}
.pagination a:hover {
background-color: #ddd;
}
.pagination .current {
background-color: #007bff;
color: white;
}