Post navigation

WordPress Snippets · · Keine Kommentare

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.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler, freier Journalist und Autor. Er schreibt für ein bekanntes deutsches Webdesign Magazin und ist nebenbei Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

Schreibe einen Kommentar

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