WordPress Snippets

Tschüss WP-PageNavi: WordPress Pagination ohne Plugin erstellen

Tschüss WP-PageNavi: WordPress Pagination ohne Plugin erstellen

Du möchtest die alten »Ältere Beiträge | Neuere Beiträge« Links mit einer coolen Nummernliste ersetzen? Kein Problem, den seit der WordPress-Version 4.1 benötigst Du dafür das bekannte Plugin WP-PageNavi nicht mehr. Jetzt geht das ganz einfach mit Bordmitteln.

WordPress Pagination ohne Plugin – der Code

  • WordPress Version: inkl. 4.7
  • PHP-Version: inkl. PHP 7

Der Code für die Nummernliste ist so schlank und schmal, dass Du ihn gleich direkt in der index.php einsetzen kannst. Vorteilhaft für alle Arbeiten direkt an den Template-Dateien wäre es, dafür ein Child-Theme anzulegen.

Füge den folgenden Code direkt dort ein, wo die Pagination angezeigt werden soll.

<?php the_posts_pagination( array(
 'mid_size' => 3, //Wie viel Buttons werden angezeigt, bevor der Platzhalter »...« erscheint.
 'type' => 'list', // Anzeige als Liste
 'prev_text' => __( '&laquo; Neuer', 'textdomain' ),
 'next_text' => __( 'Älter &raquo;', 'textdomain' ),
 ) ); ?>

Damit die Liste ein Design bekommt, benötigt es noch etwas CSS. Hier das CSS, das ich hier nutze, Du musst es noch auf Deine Blog-Farben anpassen:

nav.pagination{position:relative;display:block;margin-top:20px}
.page-numbers{margin:0;padding:0}
.page-numbers li{list-style:none;margin:0 6px 0 0;padding:0;display:inline-block}
.page-numbers li span.current{padding:10px 15px;background:#9FC65D;border:1px solid #9FC65D;display:block;line-height:1;color:#fff}
.page-numbers li a{padding:10px 15px;background:#eee;color:#555;text-decoration:none;border:1px solid #eee;display:block;line-height:1}
.page-numbers li a:hover{background:#9FC65D;border-color:#9FC65D;color:#fff}
.screen-reader-text {
 clip: rect(1px,1px,1px,1px);
 position: absolute!important;
 height: 1px;
 width: 1px;
 overflow: hidden;
}

Das Ergebnis des Code kannst Du auf meiner Blogübersicht unten bewundern.

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

2 Kommentare Kommentar hinzufügen

  1. Super, hat es funktioniert!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen