5 Tipps zum Einsatz des Plugins WP-PageNavi

5. November 2009 - WordPress Plugins - 11 Kommentare

5 Tipps zum Einsatz des Plugins WP-PageNavi

Das WordPress-Plugin WP-PageNavi von Lester ‘GaMerZ’ Chan sollte in keinem inhaltsreichen Blog fehlen. Standardmäßig fügt das Plugin einem Theme ein Stylesheet hinzu, dass ich persönlich relativ mau finde. Hier ein paar Tipps dieses abzuschalten und zu verschönern.

Der Standard

Auf vielen Blogs ist es zu bewundern, das Standard-Stylesheet des WP-PageNavi-Plugins in vollendetem Blau-Schwarz, das für viele vielleicht nicht so optimal zum Theme passt. Meine Themes auf ThemeShift.com sind allesamt mit diesem Plugin kompatibel, d. h. das Standard-Stylesheet wird mit einer an das Theme angepassten Formatierung ersetzt.

Aussehen mit Standard-Stylesheet

Aussehen mit Standard-Stylesheet

1. Standard-Stylesheet deaktivieren

Zunächst müssen wir also das Standard-Stylesheet loswerden, dass beim Aktivieren des Plugins dem Head-Bereich des Themes hinzugefügt wird. Wenn im Theme-Ordner kein Stylesheet namens pagenavi-css.css vorhanden ist, wird das gleichnamige Stylesheet aus dem Plugin-Ordner verwendet.

Um dem User nun die Arbeit abzunehmen und später eigene Styles zu verwenden, deaktiviere ich zunächst den Stylesheet-Aufruf von WP-PageNavi, indem ich folgende Zeilen in die functions.php des Themes schreibe:

<?php
    // remove default css for wp-pagenavi
    remove_action('wp_head', 'pagenavi_css');
    remove_action('wp_print_styles', 'pagenavi_stylesheets');
?>

Bemerkung:
Ich verwende hierzu zwei verschiedene Anweisungen, da das Plugin in der Version 2.4 die WordPress-Action add_action('wp_head', 'pagenavi_css') und in der aktuellen Version 2.5 add_action('wp_print_styles', 'pagenavi_stylesheets') verwendet. Um sicher zu gehen, kann ich mit remove_action beide Möglichkeiten deaktivieren.

2. Eigene Styles anlegen

Um das Aussehen der Plugin-Ausgabe dem Theme anzupassen, kann man beispielsweise folgende Styles verwenden:

.wp-pagenavi {
    /* hier die Styles für den Container-div */
}
.wp-pagenavi .pages {
    float: right;
}
.wp-pagenavi a {
    margin: 0 5px 0 0;
    padding: 4px 5px;
    color: #505050;
    text-align: center;
}
.wp-pagenavi .current {
    margin: 0 5px 0 0;
    padding: 4px 8px;
    background: #505050;
    color: #fff;
    text-align: center;
}

Bemerkung:
Das Ergebnis würde in etwa so aussehen, wie die Seitennavigation dieses Blogs – zu sehen auf der Startseite unten oder im Artikelbild dieses Beitrags.

3. Aufruf der Seitennavigation

Standardmäßig ist das Plugin in einem Theme noch nicht installiert. Daher muss zunächst abgefragt werden, ob das Plugin aktiviert ist. Wenn das nicht der Fall ist, wird die Standardnavigation von WordPress (z. B. ältere Posts – neuere Posts) angezeigt.

<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); else: ?>
    <p style="float:left">
    <?php next_posts_link(__('&amp;laquo; Previous entries','mytheme')); ?>
    </p>
    <p style="float:right">
    <?php previous_posts_link(__('Next entries &amp;raquo;','mytheme')); ?>
    </p>
<?php endif; ?>

4. Anlegen von paging.php

Um die Seitennavigation, die eh in allen Archiv-Templates (index.php, archive.php, author.php & search.php) gleich ist, zentral zu verwalten, empfehle ich im Theme-Ordner eine neue Theme-Datei bspw. mit dem Namen paging.php anzulegen und den Aufruf der Seitennavigation in dieser vorzunehmen.

Diese paging.php kann dann aus jeder Theme-Datei mit folgendem Aufruf angesprochen werden:

<?php include( TEMPLATEPATH . '/paging.php'); ?>

Bemerkung:
Falls die Datei in einem Unterordner des Theme-Ordners angelegt wird, muss der Pfad entsprechend angepasst werden.

5. Container um Seitennavigation

Manchmal ist es notwendig einen weiteren Container um die Seitennavigation zu erstellen, um das HTML-Gerüst weiter zu verschachteln.

Die Navigation (next_posts_link() oder eben wp_pagenavi()) produziert, wenn nur eine Seite vorhanden ist, keinen Output. Ein weiterer Container um die gesamte Navigation würde jedoch im Code enthalten sein.

Um sozusagen zu Fuß vorher abzufragen, ob eine Seitennavigation überhaupt benötigt wird, kann vorher abgefragt werden, ob der aktuelle WordPress-Loop mehr als eine Seite produziert.

<?php global $wp_query; if($wp_query->max_num_pages > 1) : ?>
    <!-- Hier das Paging -->
<?php endif; ?>

Gesamter Code

Der gesamte Code der paging.php mit den Abfragen, ob Navigation nötig und ob das Plugin aktiviert ist, könnte wie folgt aussehen:

<?php global $wp_query; if($wp_query->max_num_pages > 1) : ?>
    <?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); else: ?>
    <p style="float:left">
    <?php next_posts_link(__('&amp;laquo; Previous entries','mytheme')); ?>
    </p>
    <p style="float:right">
    <?php previous_posts_link(__('Next entries &amp;raquo;','mytheme')); ?>
    </p>
    <?php endif; ?>
	
<?php endif; ?>

Fazit

Diese etwas komplexere Einbindung einer Seitennavigation bietet mir gerade beim Erstellen von WordPress-Themes ein gesundes Maß an Flexibilität, was den Aufbau und die Einbindung in das Theme angeht. Wenn ein Theme-Benutzer nun das Plugin verwenden sollte, braucht er es nur zu installieren und zu aktivieren. Die übrige Arbeit ist bereits getan – ein weiterer kleiner Gewinn an Nutzerfreundlichkeit also.

Relevante Links

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Kommentare

  • Barbara - am 14. November 2009 - Antworten

    Dein Blog wurde mir gestern von einem meiner Besucher als Quelle für gute WordPress-Tipps empfohlen. Deine Tipps zum PageNavi-Plugin habe ich gerade mit Interesse gelesen. Meine Website wird demnächst komplett überarbeitet, und WP-PageNavi habe ich mir schon mal vorgemerkt :) Liebe Grüsse und ein schönes Wochenende!

  • Andy - am 27. November 2009 - Antworten

    Klasse TIP! Lese öfter dein Feed und hab schon das eine oder andere mal was brauchen können. Oben hast du nen kleinen Fehler “<??php" zwei mal. Nicht das jemand Probleme hat beim kopieren!
    besten Gruß Andy

  • KChristoph - am 27. November 2009 - Antworten

    Schön, die angebotenen Themen. Ich werde für meine geplante Umstellung all’ meiner kleinen Gebilde in Ruhe schauen. Monatelang habe ich nichts passendes gefunden, frisch und klar, jetzt kommen sehr viele auf mich zu …

  • Jan - am 10. Dezember 2009 - Antworten

    Danke für die gut geschriebenen Infos. Experimentiere gerade mit diesem Plugin. Leider klappts es noch nicht so ;-) Es sind 3 Seiten vorhanden, aber egal auf welche Seite ich wechsele, als aktive (Current) Seite ist immer die Seite 1 markiert :-( . Irgendwo muss da bei mir ein Fehler sein.

  • Nils - am 13. Dezember 2009 - Antworten

    Moin, habe gerade deine Tipps befolgt. Lief alles wunderbar. Vielen Dank für den Artikel.
    Nils

  • Fabian Knopf - am 2. Februar 2010 - Antworten

    Vielen Dank für diesen Post!

  • Ralf - am 9. März 2010 - Antworten

    Das ganze funktioniert auch OHNE Plugin!
    CUSTUM FUNCTIONS.php:

    /* NUMBERED NAV MENU */
    function numbered_page_nav($prelabel = '', $nxtlabel = '', $pages_to_show = 8, $always_show = false) {
    	global $request, $posts_per_page, $wpdb, $paged;
    	$custom_range = round($pages_to_show/2);
    	if (!is_single()) {
    		if(!is_category()) {
    			preg_match('#FROM\s(.*)\sORDER BY#siU', $request, $matches);
    		}
    		else {
    			preg_match('#FROM\s(.*)\sGROUP BY#siU', $request, $matches);
    		}
    		$blog_post_count = $matches[1];
    		$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $blog_post_count");
    		$max_page = ceil($numposts /$posts_per_page);
    		if(empty($paged)) {
    			$paged = 1;
    		}
    		if($max_page > 1 || $always_show) {
    			echo "Page $paged of $max_page";
    			if ($paged >= ($pages_to_show-2)) {
    				echo '1... ';
    			}
    			for($i = $paged - $custom_range; $i = 1 && $i <= $max_page) {
    					if($i == $paged) {
    						echo "$i";
    					}
    					else {
    						echo ' '.$i.' ';
    					}
    				}
    			}
    			if (($paged+$custom_range) < ($max_page)) {
    				echo ' ...'.$max_page.'';
    			}
    			echo "";
    		}
    	}
    }
    remove_action('thesis_hook_after_content', 'thesis_post_navigation');

    CSS:

    /* NUMBERED PAGE NAV */
    .page-nav { font-size: 1.35em; font-weight: bold; margin: 1em 0; padding: 0; overflow: hidden; }
    .page-nav-intro { float: left; padding: .3em .5em; margin: 0 1em 1em 0; background: #ffffff; border: .1em solid #ccc; }
    .page-number { float: left; padding: .3em .5em; margin: 0 .2em; background: #fff; border: .1em solid #ccc;  }
    .current-page-number { float: left; padding: .3em .5em; margin: 0 .2em; background: #ffffff; border: .1em solid #ccc; }

    Das ganze sieht auch wesentlich schöner aus als dieses Plugin.
    Hier kann man es sehen:
    http://www.alanbangs.de/

  • Gerd - am 10. April 2010 - Antworten

    Danke für den Tipp :)

  • Heenri - am 18. April 2010 - Antworten

    Geiler Post. Vielen Dank. Das Plugin ist echt klasse und dank dir jetzt sowieso!!!

  • Seo Bunny - am 15. Dezember 2010 - Antworten

    Halloooooooooo

    Hat alles wunderbar funktioniert! Danke!

Deine Meinung