Paginierung ohne Plugin

Suchen Sie nach einer Möglichkeit, eine manuelle Paginierung ohne Plugin zu erstellen? Obwohl es wahrscheinlich ein Plugin dafür gibt, haben wir einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um eine klassische Paginierungsnavigation zu erstellen und die Ausgabe Ihrer Inhalte in WordPress zu steuern.

Anweisungen:

Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:

function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );

    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );

    echo paginate_links( $pagination );
};

Verwenden Sie diesen Code optional für das $pagination-Array, um ein anderes Aussehen anzuzeigen:

$pagination = array(
  'base' => @add_query_arg('paged','%#%'),
  'format' => '',
  'total' => $wp_query->max_num_pages,
  'current' => $current,
  'prev_text' => __('« Previous'),
  'next_text' => __('Next »'),
  'end_size' => 1,
  'mid_size' => 2,
  'show_all' => true,
  'type' => 'list'
);

Als Nächstes können Sie die Paginierung mit der pagination()-Funktion hinzufügen. Sie können sie irgendwo außerhalb der Schleife, aber innerhalb der if( have_post() )-Anweisung Ihrer Vorlagendatei hinzufügen.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>

    <div class="pagination"><?php pagination('»', '«'); ?></div>

<?php endif; ?>

WordPress ermöglicht es Ihnen auch, benutzerdefinierte CSS-Klassen hinzuzufügen, mit denen Sie das Aussehen Ihrer neuen Navigation verwalten können. Sehen Sie sich dieses CSS-Beispiel an, um herauszufinden, wie Sie es gestalten können:

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzufügen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich auch unsere anderen Artikel auf der Website ansehen, wie z. B.: 43 beste Fotografie-Themes für WordPress und wie man einfach von Squarespace zu WordPress wechselt.