<?php

/*
 *  SEITENNAVIGATION MIT SEITENZAHLEN
 *
 *  Gibt einen HTML Strink zurück mit Seitenzahlen als Links
 *  in einem DIV-Wrapper 
 */
function jg_pagination_numbered( $is_nofollow = false ) {
	global $wp_query;

	/*
	 *  TEMPLATES
	 */
	$tpl_item = "
		<a href=\"%URL%\" class=\"f-pagination__page-item %ACTIVE%\" %NOFOLLOW% >%NUMBER%</a>
	 
	";

	$nofollow     = " rel=\"nofollow\" ";
	$class_active = " active ";

	/*
	 *  GET DATA
	 */
	$max_pages      = $wp_query->max_num_pages;
	// Aktuelle Seite: Seite 0 = Seite 1
	$current_page   = ( $wp_query->query_vars['paged'] ) ? $wp_query->query_vars['paged'] : 1;
	
	// Schreibe alle Seiten auf ein Array
	$items = [];
	for ( $i=1; $i <= $max_pages ; $i++ ) { 
		$items[$i] = [
			'url'        => get_pagenum_link( $i, false ),
			'is_current' => ( $i == $current_page ) ? true : false,
		];
	};
	
	/*
	 *  BUILD HTML
	 */
	$items_html = "";
	foreach ( $items as $key => $item) {
		// Alle Items zu einem Item-HMTL-String zusammenfügen	
		$tpl_data = [
			'%NUMBER%'   => $key,
			'%URL%'      => $item['url'],
			'%ACTIVE%'   => ( $item['is_current'] ) ? " active " : "",
			'%NOFOLLOW%' => ( $is_nofollow ) ? $class_active : "",
		];
		$items_html .= strtr( $tpl_item, $tpl_data );
	};
	
	
	return $items_html;
	
};
Diese Wordpress-Funktion erzeugt eine rudimentäre Seiten-Navigation 
<div class="uk-grid f-pagination">
	<div class="uk-width-medium-1-3">
		<div class="f-pagination__newer-posts"><?php 
			previous_posts_link( $newer_posts_title ); 
		?></div>
	</div>
	<div class="uk-width-medium-1-3" style="text-align:center;">
		<div class="f-pagination__page-items-wrapper">
			<?php echo jg_pagination_numbered(); ?>
		</div>
	</div>
	<div class="uk-width-medium-1-3">
		<div class="f-pagination__older-posts"><?php 
			next_posts_link( $older_posts_title ); 
		?></div>
	</div>
</div>
Der Code kann ins Template zwischen die alten Vor- & Zurück- Links gesetzt werden

Seitenzahlen-Navigation für WordPress

Für Besucher und für SEO ist es oft wichtig eine Seitenzahlen-Navigation zu haben. Damit ist es möglich über die Pagination direkt auf die Zielseite zu kommen. Und es hält für Google die Seitenhierarchie flach.

WordPress ist traditionell eine Plattform zum Bloggen. Daher ist es nicht verwunderlich, dass die standard Navigation zum Blättern der Seiten nur eine einfache Vor & Zurück Funktion hat mit:

previous_posts_link();
next_posts_link();

Dadurch ist es jedoch für den Besucher schwer, einmal mehrere Seiten vor oder zurück zu navigieren. Außerdem sieht er auch nicht wie viele Seiten noch kommen werden. Für WordPress Blogs, welche ständig aktuell sind und es auf den Tagesaktuellen Inhalt ankommt, ist dies auch ausreichend – Da der User eh die meiste Zeit auf der ersten Seite verbringt. Jeder andere Besucher, der z.b. eine Kategorie durchstöbern möchte, ist es verwirrend und unübersichtlich.

WordPress Pagination mit Seitenzahlen

Die Lösung ist relative einfach. Benötigt wird eine Funktion, welche die maximale Seitenanzahl für das aktuelle Query liest. Dann entsprechend viele Seiten-Links speichert und dabei markiert (flagged), welches die aktuelle Seite ist. Möglich wird dies über das WordPress Query Objekt:

global $wp_query; // Query Objekt
$wp_query->max_num_pages; // Maximale Anzahl an Seiten
$wp_query->query_vars['paged'] // Aktuelle Seiten

Mit diesen drei Zeilen bekommt man die beiden wichtigen Informationen. Das Funktionsbeispiel im Code-Kasten nutzt dann einen for-Loop um ein ARRAY() zu erzeugen, welches alle Seiten und deren Links speichert, sowie abgleicht, welche der Seiten die aktuelle Seite ist. Damit können wir , wenn der User auf der 2. Seite ist, diese auch in der Pagination hervor heben.

Das Seiten-Array kann man dann an eine andere Funktion übergeben oder mit einer foreach-Schleife direkt die HTML-Links erzeugen. Die Seiten-Links werden als HTML aneinander gereiht gespeichert und zum Schluss noch in einen umschließenden Wrapper-Div gelegt, welcher uns das CSS Styling leichter macht. Die Ausgabe ist dann ein HTML String mit Seitenzahlen als Link, welche zwischen die klassische Pagination gesetzt werden kann – Siehe zweites Code-Beispiel.

UPDATE 07.10.2017 : 

  • Ich habe die Funktion vereinfacht und Code soweit reduziert, dass es noch verständlich bleibt.
  • Das Wrapper HTML habe ich aus der Funktion entfernt, da ich denke, dass dies besser ins Template gehört
  • Für die Link-Basis wird jetzt die Funktion get_pagenum_link() von WordPress benutzt – Dadurch sind die Links immer richtig, auch wenn diese durch ein Plugin verändert werden oder man gar keine Permalinks eingeschaltet hat.
  • Außerdem kann man jetzt für SEO auch alle Seitenlinks als no-follow setzen, einfach die Funktion mit jg_pagination_numbered( true); aufrufen.

28. September 2017 | Wordpress