Paginacja WordPress - stronicowanie treści
Paginacja dzieli listę postów na strony - niezbędna dla blogów z dużą ilością treści. WordPress ma wbudowane funkcje, ale domyślny "Starsze/Nowsze wpisy" można zastąpić numerowaną paginacją lub infinite scroll.
Krótka odpowiedź
Wbudowane funkcje paginacji
posts_nav_link() - stara metoda:
```php
```
Wyświetla "Starsze wpisy" / "Nowsze wpisy"
the_posts_pagination() - od WP 4.1:
```php
the_posts_pagination([
'mid_size' => 2,
'prev_text' => '« Poprzednia',
'next_text' => 'Następna »',
]);
?>
```
Numerowana paginacja z nawigacją.
paginate_links() - elastyczna:
```php
echo paginate_links([
'total' => $wp_query->max_num_pages,
'current' => max(1, get_query_var('paged')),
'format' => '?paged=%#%',
]);
?>
```
WP-PageNavi (wtyczka)
Instalacja:
- Wtyczki → WP-PageNavi
- Aktywuj
Użycie w szablonie:
```php
wp_pagenavi();
} ?>
```
Ustawienia:
- Settings → PageNavi
- Text for pages ("Strona %CURRENT_PAGE% z %TOTAL_PAGES%")
- Styl numeracji
- Ilość wyświetlanych stron
Stylowanie CSS:
```css
.wp-pagenavi {
text-align: center;
margin: 20px 0;
}
.wp-pagenavi a, .wp-pagenavi span {
padding: 8px 12px;
margin: 0 2px;
}
.wp-pagenavi .current {
background: #333;
color: #fff;
}
```
Paginacja dla custom query
WP_Query z paginacją:
```php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged,
]);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
// Wyświetl post
endwhile;
// Paginacja
$big = 999999999;
echo paginate_links([
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, $paged),
'total' => $query->max_num_pages
]);
wp_reset_postdata();
endif;
?>
```
Infinite Scroll i Load More
Ajax Load More (wtyczka):
- Najpopularniejsza do lazy loading postów
- Infinite scroll lub button "Load More"
- Shortcode builder
Shortcode:
```
[ajax_load_more container_type="div" post_type="post" posts_per_page="5" scroll="true"]
```
Jetpack Infinite Scroll:
- Jeśli używasz Jetpack
- Customizer → Theme Options
- Proste włączenie
Własna implementacja:
```javascript
let page = 1;
document.querySelector('.load-more').addEventListener('click', function() {
page++;
fetch(`/wp-json/wp/v2/posts?page=${page}`)
.then(res => res.json())
.then(posts => {
posts.forEach(post => {
// Append do listy
});
});
});
```