Paginacja WordPress - stronicowanie treści

posts_nav_link() - stara metoda:

<?php posts_nav_link(); ?>

the_posts_pagination() - od WP 4.1:

<?php 
the_posts_pagination([
    'mid_size' => 2,
    'prev_text' => '« Poprzednia',
    'next_text' => 'Następna »',
]);
?>

paginate_links() - elastyczna:

<?php
echo paginate_links([
    'total' => $wp_query->max_num_pages,
    'current' => max(1, get_query_var('paged')),
    'format' => '?paged=%#%',
]);
?>

Instalacja:
- Wtyczki → WP-PageNavi
- Aktywuj

Użycie w szablonie:

<?php if (function_exists('wp_pagenavi')) { 
    wp_pagenavi(); 
} ?>

Ustawienia:
- Settings → PageNavi
- Text for pages ("Strona %CURRENT_PAGE% z %TOTAL_PAGES%")
- Styl numeracji
- Ilość wyświetlanych stron

Stylowanie 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;
}

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;
?>

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:

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
            });
        });
});