5 Tipps zum Einsatz des Plugins WP-PageNavi

5. November 2009 - WordPress Plugins - 11 Kommentare

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.

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

• WordPress-Plugin: WP-PageNavi
• WordPress-Codex: add_action()
• WordPress-Codex: remove_action()

Schlagwörter: WP-PageNavi