So fügen Sie eine numerische Paginierung in Ihr WordPress-Theme ein

Möchten Sie in Ihrem WordPress-Theme eine numerische Paginierung hinzufügen?

Standardmäßig fügen WordPress-Themes am unteren Rand von Archivseiten Links zu „Weiter“ und „Zurück“ ein. Das Problem ist, dass diese nicht sehr benutzerfreundlich sind. Aus diesem Grund verwenden viele beliebte Blogs eine numerische Paginierung, um den Besuchern die Navigation durch ihre Archivseiten zu erleichtern.

In diesem Artikel zeigen wir Ihnen, wie Sie in Ihrem WordPress-Theme eine numerische Paginierung hinzufügen können.

Warum sollten Sie eine numerische Paginierung in Ihr WordPress-Theme integrieren?

Die meisten Themes verfügen über eine Archivseite, die eine Liste der Beiträge anzeigt. Wenn Sie mehr WordPress-Beiträge veröffentlichen, wird Ihre Archivseite mehrere Seiten umfassen.

Paginierungslinks helfen den Besuchern, zwischen den Archivseiten zu wechseln, und erscheinen normalerweise am unteren Rand Ihrer WordPress-Website.

Einige WordPress-Themes verwenden die Links „Ältere Beiträge“ und „Neuere Beiträge“ für die Seitennavigation. Dadurch kann sich der Besucher jedoch nur um eine Seite vor- und zurückbewegen.

Außerdem wird nicht angezeigt, wo sich der Besucher gerade im Archiv befindet. Dies kann es für Besucher schwieriger machen, im Archiv Ihres Blogs zu navigieren.

Hier kommt die numerische Paginierung ins Spiel.

Anstelle von Links zu „Älter“ und „Neuer“ zeigt die numerische Paginierung eine Reihe von Zahlen, mit denen Besucher zu einer bestimmten Seite im Archiv springen können.

Die numerische Paginierung kann auch durch Hervorhebungen oder unterschiedliche Farben die aktuelle Seitenzahl anzeigen, so dass der Besucher immer genau weiß, wo er sich im Archiv befindet.

Bei WPBeginner verwenden wir eine numerische Paginierung und heben die aktuelle Seitenzahl in Orange hervor. Wir bieten auch direkte Links zu den 4 Seiten, die die aktuelle Seite des Besuchers umgeben.

Wir haben sogar einen Link zur letzten Seite in unserem Archiv, so dass Besucher schnell und einfach unsere frühesten Beiträge sehen können, wie Sie auf dem folgenden Bild sehen können.

Unserer Erfahrung nach erleichtert diese Art der numerischen Paginierung die Navigation auf Ihrer Website im Vergleich zu den Standardlinks „Ältere Beiträge“ und „Neuere Beiträge“.

Wenn Ihr WordPress-Theme eine „Ältere“ und „Neuere“ Paginierung hat, empfehlen wir immer, diese durch eine numerische Paginierung zu ersetzen.

In diesem Leitfaden werden wir zwei verschiedene Möglichkeiten vorstellen, wie Sie in Ihrem WordPress-Theme eine numerische Paginierung hinzufügen können. Wenn Sie es vorziehen, direkt zu einer bestimmten Methode zu springen, dann können Sie die Links unten verwenden.

• Methode 1. Hinzufügen einer numerischen Seitennummerierung in WordPress mit WP-PageNavi
• Methode 2. So fügen Sie manuell eine numerische Paginierung in Ihr WordPress-Theme ein

Methode 1. Hinzufügen einer numerischen Paginierung in WordPress mit WP-PageNavi

Der einfachste Weg, eine numerische Paginierung in WordPress hinzuzufügen, ist die Verwendung des Plugins WP-PageNavi.

Um dieses Plugin zu verwenden, müssen Sie immer noch einige Änderungen am Code Ihres Themes vornehmen, aber es ist viel einfacher als die vollständige Code-Methode, da WP-PageNavi Ihnen die vollständige Kontrolle über die Paginierung Ihrer Website gibt.

Als Erstes müssen Sie das Plugin WP-PageNavi installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nachdem Sie das Plugin aktiviert haben, gehen Sie zu Einstellungen “ PageNavi, um die Plugin-Einstellungen zu konfigurieren.

Hier können Sie den Standardtext für die Seitennavigation durch Ihren eigenen Text ersetzen. Sie können zum Beispiel den Text ändern, den Ihre Website für die Links „Erste Seite“ und „Letzte Seite“ verwendet.

Sie können auch die Links für die numerische Paginierung anpassen.

Im Abschnitt „Anzahl der anzuzeigenden Seiten“ können Sie festlegen, wie viele Seiten das Plugin im Paginierungsbereich Ihrer Website anzeigen soll.

Dieser Wert ist standardmäßig auf 5 gesetzt, was bedeutet, dass WP-PageNavi direkte Links zu 5 Seiten anzeigt.

Wie Sie auf dem Screenshot unten sehen können, sehen Sie auf Seite 4 Links zu den Seiten 2, 3, 4, 5 und 6.

Vielleicht möchten Sie mehr oder weniger Seiten anzeigen. Um diese Änderung vorzunehmen, geben Sie einfach die neue Zahl in das Feld „Anzahl der anzuzeigenden Seiten“ ein.

Standardmäßig zeigt das Plugin mehrere größere Zahlen an. So können sich Besucher mit nur einem Klick durch mehrere Seiten vorwärts bewegen.

Standardmäßig zeigt das Plugin drei größere Zahlen an, die sich jedes Mal um 10 erhöhen. Zum Beispiel: 10, 20 und 30.

Sie möchten ein anderes Intervall verwenden, z. B. 5 oder 20? Dann geben Sie das neue Intervall einfach in das Feld „Größere Seitenzahlen in Vielfachen von anzeigen“ ein.

Jede WordPress-Website ist anders, daher ist es eine gute Idee, verschiedene Einstellungen auszuprobieren, um zu sehen, welche Paginierungseinstellungen für Sie am besten funktionieren.

Wenn Sie Änderungen an den WP-PageNavi-Einstellungen vorgenommen haben, vergessen Sie nicht, zum Ende der Seite zu scrollen und auf die Schaltfläche Änderungen speichern zu klicken.

Als nächstes müssen Sie ein Template-Tag in Ihr WordPress-Theme einfügen. Dazu empfehlen wir, ein Child-Theme zu erstellen und dann den Code des Child-Theme zu bearbeiten.

Wenn Sie ein Child-Theme erstellen, können Sie Ihr WordPress-Theme sicher aktualisieren, ohne dass Ihre benutzerdefinierte numerische Paginierung verloren geht. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Erstellung eines WordPress-Child-Themes.

Unabhängig davon, ob Sie ein übergeordnetes oder untergeordnetes Thema bearbeiten möchten, benötigen Sie einen FTP-Client. Wenn Sie FTP zum ersten Mal verwenden, lesen Sie unsere vollständige Anleitung, wie Sie sich per FTP mit Ihrer Website verbinden.

Wenn Sie über FTP mit Ihrem WordPress-Hosting-Konto verbunden sind, können Sie den Code Ihres WordPress-Themes bearbeiten.

Diese Schritte hängen von Ihrem WordPress-Theme ab. In der Regel müssen Sie jedoch den Code in der Datei index.php oder archive.php sowie alle anderen Archivvorlagendateien in Ihrem WordPress-Theme bearbeiten.

Öffnen Sie einfach diese Dateien und suchen Sie dann nach den Tags previous_posts_link und next_posts_link.

Wenn Sie diese Tags finden, ersetzen Sie sie durch den folgenden Codeschnipsel:

<?php wp_pagenavi(); ?>

Einige Themes haben möglicherweise keinen previous_posts_link oder next_posts_link Tag.

Wenn Sie diese Tags in Ihrem Thema nicht finden können, suchen Sie stattdessen nach the_posts_navigation. In der Datei archive.php des Themas Twenty Twenty-One finden Sie zum Beispiel Folgendes:

<?php /*twenty_twenty_one_the_posts_navigation();*/ 

Sie können diese Zeile dann durch den folgenden Codeausschnitt ersetzen:

<?php wp_pagenavi(); ?>

Nachdem Sie diese Änderungen vorgenommen haben, speichern Sie sie und schließen Sie dann alle geöffneten WordPress-Theme-Dateien.

Wenn Sie nun Ihre WordPress-Archivseite besuchen, sollten Sie Ihre neue numerische Paginierung auf Ihrer Website sehen.

An dieser Stelle möchten Sie vielleicht die Farbe und den Stil der numerischen Paginierung ändern, damit sie besser zu Ihrem Thema oder dem Branding Ihrer Website passt.

Sie können dies tun, indem Sie den Code des Plugins bearbeiten.

Wir empfehlen jedoch, den WP-PageNavi-Code in die style.css-Datei Ihres Themes einzufügen und dann Ihre Änderungen innerhalb der Themedatei vorzunehmen. Auf diese Weise gehen Ihre Anpassungen nicht verloren, wenn Sie das WP-PageNavi-Plugin aktualisieren.

Um Ihren Plugin-Code zu kopieren, gehen Sie zu Einstellungen “ PageNavi. Suchen Sie dann den Abschnitt „pagenavi-css.css verwenden“ und klicken Sie auf die Optionsschaltfläche „Nein“ daneben.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Änderungen zu speichern.

Gehen Sie dann auf Plugins “ Plugin File Editor.

Öffnen Sie dann das Dropdown-Menü „Zu bearbeitendes Plugin auswählen“ und wählen Sie „WP-Page Navi“. Danach können Sie auf „Auswählen“ klicken.

Klicken Sie im rechten Menü auf die Datei pagenavi-css.css.

Kopieren Sie dann den gesamten Code in diese Datei.

Als Nächstes gehen Sie einfach auf Erscheinungsbild “ Editor für Themendateien.

Klicken Sie im rechten Menü auf die Datei style.css Ihres Themas.

Nun können Sie den Code der Datei pagenavi-css.css in die Datei style.css des Themas einfügen und Ihre Änderungen vornehmen.

Schauen wir uns ein Beispiel an. Hier ist eine modifizierte Version des Codes für die numerische Paginierung, die Sie in die style.css-Datei Ihres Themas einfügen können:

wp-pagenavi {
    clear: both;
}
 
.wp-pagenavi a, .wp-pagenavi span {
    color: #FFF;
    text-decoration: none;
    background-color:#6FB7E9;
    border: 1px solid #B2D1E5;
    padding: 5px 5px;
    margin: 2px;
}
 
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #E9F2F9;
    background-color:#6FB7E9;
}
 
.wp-pagenavi span.current {
    font-weight: bold;
    background-color:#3C8DC5;
}

In der folgenden Abbildung können Sie sehen, wie diese numerische Paginierung auf Ihrer Website aussehen wird.

Es lohnt sich, verschiedene Stile auszuprobieren, um zu sehen, welcher auf Ihrer WordPress-Website am besten aussieht.

Wenn Sie mit dem Aussehen Ihrer numerischen Paginierung zufrieden sind, klicken Sie auf die Schaltfläche Datei aktualisieren, um Ihre Änderungen zu speichern.

Methode 2. Manuelles Hinzufügen einer numerischen Paginierung in Ihrem WordPress-Theme

Eine andere Möglichkeit besteht darin, die numerische Paginierung in Ihrem WordPress-Theme mithilfe von Code manuell hinzuzufügen.

Viele WordPress-Themes verfügen über integrierte „Ältere“ und „Neuere“ Links oder eine standardmäßige numerische Paginierung. Das beliebte Astra-Theme zum Beispiel fügt automatisch eine eigene numerische Paginierung zu Ihren Archivseiten hinzu, wie Sie im folgenden Bild sehen können.

Sie können diese Methode verwenden, um die integrierte Paginierung eines Themas anzupassen. Sie können zum Beispiel das Styling ändern, um es besser an Ihre Website anzupassen.

Um eine numerische Paginierung manuell hinzuzufügen, öffnen Sie die Datei functions.php Ihres Themes. Hier können Sie entweder einen FTP-Client oder den Dateimanager Ihres WordPress-Hostings cPanel verwenden. Wenn Sie FTP verwenden, lesen Sie bitte unsere vollständige Anleitung zur Verbindung mit Ihrer Website per FTP.

Sobald Sie sich erfolgreich mit Ihrer Website verbunden haben, öffnen Sie die Datei functions.php und fügen Sie den folgenden Code ein:

function wpbeginner_numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<div class="navigation"><ul>' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '<li>…</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "\n", get_next_posts_link() );
 
    echo '</ul></div>' . "\n";
 
}

Dieser Code ermittelt die Anzahl der Seiten, die Sie in Ihrem WordPress-Theme anzeigen können.

Die nächsten Schritte hängen von Ihrem Thema ab.

Wenn Ihr Theme keine standardmäßige Paginierung eingebaut hat, können Sie einfach den folgenden Template-Tag in Ihre index.php, archive.php, category.php oder jede andere Seite einfügen, auf der Sie eine numerische Paginierung anzeigen möchten.

<?php wpbeginner_numeric_posts_nav(); ?>

Beachten Sie jedoch, dass die Stelle, an der Sie diesen Code einfügen, Auswirkungen darauf hat, wo die numerische Paginierung auf Ihrer Website angezeigt wird.

In der Regel möchten Sie die Paginierung am unteren Ende Ihrer Archivseiten anzeigen, weshalb Sie das Template-Tag in der Regel in den Fußzeilencode einfügen.

Verfügt Ihr Theme bereits über eine Form der Paginierung, z. B. Links zu „Ältere Beiträge“ und „Neuere Beiträge“?

In diesem Fall müssen Sie den Code für die Paginierung finden und ihn durch das obige Snippet ersetzen.

Ashe ist zum Beispiel eines der besten kostenlosen WordPress-Blog-Themes und fügt Ihren Archivseiten bereits Paginierungslinks für die erste und letzte Seite hinzu.

Um diese eingebauten Links durch eine numerische Paginierung zu ersetzen, müssen Sie die Dateien templates/grid.php und templates/blog-pagination.php des Themas bearbeiten.

In jeder dieser Dateien finden Sie einfach den folgenden Abschnitt:

<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

Sie können diese Zeile dann durch den folgenden Codeausschnitt ersetzen:

<?php wpbeginner_numeric_posts_nav(); ?>

Wenn Sie den Code eingefügt haben, vergessen Sie nicht, Ihre Änderungen zu speichern.

Der nächste Schritt ist die Gestaltung der benutzerdefinierten numerischen Seitennummerierung.

Um den Besuchern die Navigation im Archiv zu erleichtern, werden wir die aktuelle Seitennummer mit einer anderen Farbe hervorheben. Öffnen Sie dazu die Datei style.css Ihres Themas und fügen Sie den folgenden Code in diese Datei ein:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #6FB7E9;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

Danach speichern Sie Ihre Änderungen einfach, indem Sie auf die Schaltfläche Datei aktualisieren klicken.

Wenn Sie nun die Archivseite besuchen, sehen Sie die numerische Paginierung live auf Ihrer Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie eine numerische Paginierung in Ihr WordPress-Theme einfügen können. Sie können auch unseren Leitfaden zu den Themen “ Geld verdienen mit WordPress-Blogging “ und “ Wie man ein individuelles WordPress-Theme erstellt, ohne Code zu schreiben“ lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.