Auf vielen Sites wird auf ältere Blogseiten nicht mit dem Standard-Verweis „Älterer Beitrag“ verlinkt, sondern mit einer paginierten Navigation. Das ist auch bei meinen betreuten Installationen das Mittel der Wahl und bisher habe ich dafür immer auf ein Plugin zurückgegriffen. In Version 4.1 schafft WordPress hier Abhilfe mit Einführung der Theme-Funktion the_posts_pagination()
.
the_posts_pagination() bringt euch schnell zur paginierten Navigation
Mit der neu eingeführten the_posts_pagination()
-Funktion kann sehr einfach eine paginierte Navigation für die Übersichtsseiten eines Blogs erstellt werden. Alles, was ihr dazu tun müsst, ist folgenden Code in die entsprechende Theme-Datei (oder -Dateien) zu schreiben:
the_posts_pagination()
Die Ausgabe dieser Zeile Code sieht so aus:
<nav class="navigation pagination" role="navigation">
<h2 class="screen-reader-text">Beitragsnavigation</h2>
<div class="nav-links">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://website.tld/?paged=2">2</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://website.tld/?paged=4">4</a>
<a class="next page-numbers" href="http://website.tld/?paged=2">Weiter</a>
</div>
</nav>
Code-Sprache: HTML, XML (xml)
Noch nicht perfekt, aber immerhin. Wir erhalten also in einem nav
-Element eine Überschrift für Screenreader-Nutzer und ein div
mit ein paar span
- und a
-Elementen. Und genau das ist meiner Meinung nach noch nicht optimal – eine Liste für die Navigationslinks wäre doch schöner, oder? Und auch das ist kein Problem: Die the_posts_pagination()
-Funktion setzt auf der paginate_links()
-Funktion auf (mit der das im Übrigen auch realisierbar wäre – ist mir leider bis heute nicht untergekommen, die Funktion).
Navigationspunkte als Liste ausgeben
Im Codex-Eintrag zu letztgenannter Funktion steht unter anderem in dem Argument-Array der Schlüssel 'type'
. Diesem wird standardmäßig der Wert 'plain'
zugewiesen, dessen Ausgabe wir oben bewundern können. Wird der Wert auf 'list'
geändert, dann bekommen wir als Ausgabe eine ungeordnete HTML-Liste und das sieht so aus (nur der Teil, der sich zu oberem Code geändert hat):
<div class="nav-links">
<ul class="page-numbers">
<li><span class="page-numbers current">1</span></li>
<li><a class="page-numbers" href="http://website.tld/?paged=2">2</a></li>
<li><span class="page-numbers dots">…;</span>;</li>
<li><a class="page-numbers" href="http://website.tld/?paged=4">4</a></li>
<li><a class="next page-numbers" href="http://website.tld/?paged=2">Weiter</a></li>
</ul>
</div>
Code-Sprache: HTML, XML (xml)
Wenn ihr dann das Linkformat noch von /?paged=2
in /page/2
ändern möchtet, müsst ihr nur diese Zeile als weiteres Wertpaar in das Array schreiben:
'format' => '/page/%#%',
Code-Sprache: PHP (php)
Zum Schluss sieht der Funktionsaufruf wie folgt aus:
the_posts_pagination( array(
'format' => '/page/%#%',
'type' => 'list'
) );
Code-Sprache: PHP (php)
Wenn ihr die Navigation nicht gleich ausgeben wollt, dann gibt es noch die neue Funktion get_the_posts_pagination()
.
Was haltet ihr von der neuen Funktion? Habt ihr euch bisher eine paginierte Navigation selbst gebaut, ein Plugin genutzt oder die Funktion paginate_links()
eingesetzt?
Hallo Florian,
mich würde interessieren wie ich die Klasse in (page-numbers) überschreiben könnte oder eine klasse anhängen. Kannst du mir da weiter helfen?
Hi Mischa,
so auf die Schnelle habe ich keine Möglichkeit gefunden, wie man das filtern kann. Aber überhaupt: Warum möchtest du denn andere Klassen haben?
Da ich mit Bootstrap arbeite müsste ich nur diese klasse mir pagination ersetzten und hätte mit null Aufwand eine gestylten Pagination.
Du könntest die Klasse zur Not mit jQuery/JavaScript ersetzen, aber vorher würde ich eher die CSS-Datei anpassen 😉
ja das denke ich auch. Lieber CSS anpassen. 🙂