15. Dezember 2023

WordPress Seitenzahlen

Mit „the_posts_pagination()“ gibt WordPress eine praktische Funktion an die Hand, die die Erstellung von Seitenzahlen erheblich vereinfacht:

<?php
if ( have_posts() ) :

    while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', get_post_type() );
    endwhile;

    $args = array(
        'show_all' => false, 
        'end_size' => 1,
        'mid_size' => 1,
        'prev_next' => true,
        'prev_text' => 'Vorherige',
        'next_text' => 'Weiter',
        'add_args' => false,
        'add_fragment' => ''
    );

    the_posts_pagination( $args );

else :

    get_template_part( 'template-parts/content', 'none' );

endif;

wp_reset_postdata();
?>

Um Custom Posts mit Paginierung auszugeben, kannst du folgenden Code nutzen:

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = array(
    'post_type'      => 'news-intern',
    'posts_per_page' => 10,
    'paged'          => $paged
);

$news_query = new WP_Query($args);

if ($news_query->have_posts()) :
    while ($news_query->have_posts()) :
        $news_query->the_post();
        get_template_part('template-parts/content', get_post_type());
    endwhile;

    $total_pages = $news_query->max_num_pages;

    if ($total_pages > 1) {
        $current_page = max(1, get_query_var('paged'));
        echo '<div class="pagination">';
        echo paginate_links(array(
            'base'      => get_pagenum_link(1) . '%_%',
            'format'    => 'page/%#%',
            'current'   => $current_page,
            'total'     => $total_pages,
            'prev_text' => 'Vorherige',
            'next_text' => 'Weiter',
        ));
        echo '</div>';
    }
endif;
wp_reset_postdata();
?>

Folgende Styles sind eine gute Basis für die Gestaltung der Paginierung.

.nav-links{
	margin: auto;
}

.page-numbers{
	display: inline-block;
	padding: 5px 10px;
	margin: 0 1px 0 1px;
	border: 1px solid #eee;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	font-weight: 500;
	background: #fff;
}

.page-numbers.current{
	font-weight: 700;
}

a.page-numbers:hover {
	color:#d30000;
}