WordPress-Tipp: Style deine Seitennavi mit dem WP-PageNavi Plugin

Ein sehr beliebtes WordPress-Plugins ist das WP Page-Navi Plugin. Mit Hilfe des Plugins kannst du eine komplexere Seitennavigation für deinen WordPress-Blog einrichten. Da ich mir am Wochenende ein bisschen Zeit genommen habe, unsere Seitennavigation zu stylen, möchte ich dir das praktische Plugin und seine Funktionen heute kurz vorstellen.

Seitennavi mit dem WP-PageNavi Plugin

Die neue Seitennavigation auf dem Elmastudio-Blog.

Du kannst dir das Plugin direkt bei wordpress.org oder von der Plugin-Webseite herunterladen, und wie gewohnt installieren.

Die Funktionen deiner Seitennavi einstellen

Am besten nimmst du zur Einrichtung des Plugins die sehr hilfreiche Readme-Anleitung zur Hand.

Du musst folgenden Codeschnipsel in deine footer.php einfügen (an der Stelle, an der du deine Seitennavigation einsetzen möchtest).

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Jetzt findest du im Adminbereich deines Blogs unter »Einstellungen« die PageNavi-Optionen. Hier kannst du bestimmen, welcher Text in den Navi-Buttons angezeigt werden soll, und wie viele Seitenzahlen angezeigt werden.

Seitennavi mit dem WP-PageNavi Plugin

Die pagenavi-css.css stylen

Anschließend kannst du das Aussehen deiner Seitennavigation noch mit CSS stylen. Dazu solltest du die Datei pagenavi-css.css kopieren, und mit dem gleichen Namen in deinen eigenen Theme-Ordner abspeichern. So vermeidest du bei einem Plugin Update, das deine angepassten Styles verloren gehen. Die pagenavi-css.css in deinem Theme-Ordner kannst du jetzt nach Belieben anpassen.

Ich finde das Plugin sehr viel praktischer, als das standardmäßig integrierte »Neuere Beiträge, Ältere Beiträge«. Wie gefällt dir das WP-PageNavi Plugin? Kennst du ähnliche Plugins zur verbesserten Seitennavigation in WordPress? Schreib mir doch einen Kommentar, ich freue mich über deine Tipps!

27 Kommentare zu “WordPress-Tipp: Style deine Seitennavi mit dem WP-PageNavi Plugin

  1. Hmmm, dieses Plugin sieht interessant aus. Muss ich mir gleich merken, vielleicht kann ich es ja bei meiner neuen Website einsetzen (für den Fall, dass ich irgendwann wirklich Zeit dafür finde ;) Vielen Dank für den Tipp!

  2. Habe mir das Plugin angeschaut und ich finde es super. Nur, ich habe noch „ältere“ und „neuere“ Einträge zu stehen. Vielleicht kannst Du mir ja helfen.

  3. So. Ich glaube ich habs. :-) Habe den Schnipsel falsch reinkopiert. Danke für deinen super Ratschlag!

  4. @Sebastian: Vielen Dank für deinen Kommentar :-) Freut mich das dir der Tipp gefällt. Hab grad auch noch mal auf deinem Blog geschaut, sieht jetzt alles super aus :-)

    Viele Grüße
    Ellen

  5. mh :) ich habe es endlich auch geschafft, die pagenavi so einzubauen, dass es in der Archivansicht auch so ausschaut, wie auf der Startseite.

    Wünsche einfachmal nächträglich ein gesundes neues Jahr.
    :o)

  6. Hallo Ellen,
    leider weiß ich nicht wo ich den schnipsel einbauen soll?
    Du musst folgenden Codeschnipsel in deine footer.php einfügen (an der Stelle, an der du deine Seitennavigation einsetzen möchtest).
    könntest du dies etwas genauer erklären?
    lieben gruß ingo

  7. Hallo Ellen

    Bin grad eben auf das Page-Navi-Plugin gestossen und habe es in mein Yoko eingebaut. Der Hinweis „ältere Artikel“ muss ja jetzt aber weg. Wie kriege ich das hin? Ich bin froh um einen Hinweis. Schön wäre es auch, die Abstände nach oben und gegen unten ein bisschen verringern zu können.
    Gruss aus der Schweiz und herzlichen Dank, Dominik

  8. Vielen Dank, das war genau wonach ich gesucht habe.

    Viele Grüße
    Daniela alias Lady Adored

  9. Vielen Dank für die tolle Erklärung des Plugins und zum Einbau. Ich hab es auch auf Anhieb hingekriegt.
    Nur habe ich jetzt leider auch noch die alten Hinweise „ältere Beiträge“ – „neuere Beiträge“ stehen. Ich habe gesehen, dass das auch schon in anderen Kommentaren erwähnt wurde, nur leider steht nirgends wie man das weg bekommt.
    Es wäre auch schön, wenn man die Pagenavi etwas mittiger setzen könnte.
    Leider habe ich von php keine Ahnung und bin für jede Hilfe dankbar.

    Grüße

    Manuela

    • Hallo Manuela,

      du müsstest in deinen Theme-Dateien (je nach Theme unterschiedlich z.B. index.php, archive.php, category.php, page.php) nach folgendem Code schauen und diesen dort löschen:

      <?php twentyeleven_content_nav( 'nav-below' ); ?>
      

      Dies ist der Code im TwentyEleven Theme. In anderen Themes sieht der Code vielleicht eventuell eher so aus:

      <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts') ); ?></div>
      <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>') ); ?></div>
      

      Hoffe so klappt es mit dem PageNavi-Plugin.

      Viele Grüße,
      Ellen

      • Hallo Ellen, erst einmal vielen Dank für das tolle Yoko-Theme! Nach langer Suche habe ich für meine Autoren-Homepage endlich das passende gefunden.

        Bin nun beim Basteln und habe eben WP-PageNavi eingefügt, es ist auch korrekt zu sehen, nur bekomme ich wie Manuela die alten Hinweise nicht raus. Habe in der archive.php zwar den Code gefunden, der oben angegeben ist und diesen auch dann gelöscht, aber die Hinweise „ältere/neuere Artikel“ werden noch immer angezeigt.
        Hast du vielleicht einen Tipp, was da noch falsch sein könnte?

        LG, Naike

        • Ich hab’s gerade hinbekommen. Der angegebene Code stand beim Yoko-Theme nicht nur in der archive.php, sondern auch in der index.php noch einmal genauso. Dort nun auch gelöscht, die alten Hinweise sind weg! :o)

  10. Vielen Dank, Ellen! Das hat auf Anhieb geklappt.
    Ich hab das TwentyEleven Theme und es stand in der index.php.

  11. Hallo allerseits, danke für die Anleitung, Ellen, jetzt hat es auch bei mir geklappt! Herzliche Grüsse, Dominik

  12. Danke – ich hab mir die Funktion schon gewünscht – jetzt hab ich sie :-)
    Schöne Grüße

  13. Hallo Ellen,
    ich habe ein kleines Problem mit der Anzeige der Seitennummern. Siehe http://www.a-part-of-life.de/?paged=2 .
    Die Anzeige bzw. Ziffer der aktuellen Seite wird riesengroß dargestellt. Woran könnte das liegen?
    Komischerweise ist die Anzeige bei Seite 1 so wie sie sein soll.

    Vielleicht hast Du eine Idee.

    LG
    Bernd

    • Schon etwas älter, aber scheinbar ist das Problem ja noch vorhanden.
      Siehe in deiner style.css:
      .wp-pagenavi span.current, .wp-pagenavi a { color: #868686; font-size: 30px; border: none !important; }
      font-size: 30px macht die Zahl so groß.

  14. Hallo Ellen,

    ich habe nach Installation des Plugins ein Problem mit der Anzeige der Seitenzahlen.
    Es existieren z. B. 3 Seiten – angezeigt wird aber nur Seite 1 von 1. Woran könnte das liegen?

    Liebe Grüße
    Linda

    • Hi,

      gleiches Problem habe ich auch, suche schon seit Stunden nach der Lösung.

      Hast Du das lösen können? … wenn ja, schreibe bitte wie.

      Danke Matthias

  15. Erstmals vielen Dank für den Plugin. Nun habe ich eine Frage.
    Kann ich mit dem Tool meine Suchergebnisse, die ich mittels PHP erstellt habe, auf mehrere Seiten verteilen? Wenn nein, kennt jemand einen Plugin dafür?

    Bin für jede Hilfe dankbar.

    MsGrüßen,
    Azad

  16. Hallo :-)
    Danke für die Vorstellung dieses Plug-in.
    Ich habe es auf meiner Seite eingebaut. Seltsamerweise sind die Seitenzahlen verschieden groß, aber das stört mich nicht so sehr.
    Meine Frage:
    Ich würde diese Seitennavigation gerne auch oben auf meiner Seite einbauen.
    Geht das? An welcher Stelle muß ich den Code einfügen?
    (bitte möglichst genau, ich beschäftige mich erst seit knapp 2 Monaten mit html und php)
    Danke fürs darüber nachdenken.
    Sonnige Grüße
    Konnie

  17. Hi Ellen,

    vorweg, Deine Seite und vor allem Deine Artikel sind für mich nicht nur echt cool, sondern auch verdammt hilfreich. Besonders Dein Wissen über WP hat mir schon mehrmals richtig gut geholfen. So wie jetzt bei dem Page-Navi. Fange mit WordPress seit 4 Monaten an richtig damit zu arbeiten und fast immer, wenn ich „a small problem“ habe besuche ich eure Seite. Also, an dieser Stelle von mir ein DANKE für soviel Engagement!
    Matthias

  18. Hallo Ellen,

    vielen Dank für den Tipp! Ich schaue gerne auf Deine Seite, weil Du die Dinge verständlich erklärst. Dein Tipp mit dem PlugIn hat mir die Scheu genommen, es einfach auszuprobieren. Mein Theme hatte die gesagte Zeile ganz wo anders versteckt, aber mit suchen/finden „previous_posts_link“ über den ganzen Theme-Ordner habe ich es in entsprechender php gefunden und via Child-Theme anpassen können. Dann am pagenavi-css.css geschraubt – es funktioniert wunderbar! Erfreulich auch, dass es ein PlugIn ist, dass auch erst kürzlich ein Update hatte.
    Danke und Viele Grüße
    Emji

  19. Hallo Ellen,

    vielen Dank für die vielen Tips und die tollen Themes. Eine Frage habe ich zu dem Theme ARI. Und zwar habe ich seitTagen versucht eine „Pagination“ in den Posts zu erstellen, welche sich nur auf die Kategorien auswirken. Habe einige Plugins sowie auch Lösungen ohne Plugins ausprobiert. Leider scheitert es bei jedem der Versuche.

    Es klappt ohne Probleme in der Kategorie-Ansicht. Jedoch nicht inder Post-Ansicht. Das bedeutet, das der Betrachter „nicht weiß“ wieviel ihn in dieser Post beim Drücken auf „Next“ o. „Prev“ erwaret.

    Ich habe die Versuche immer wieder in der single.php ausprobiert. Leider ohne Erfolg. Kennst du eine Lösung dafür ?

  20. Hallo Ellen,
    vielen vielen Dank für die Anleitung. Hatte das Plugin damals schon. Aber als ich das Theme gewechselt hatte, wollte es mir einfach nicht mehr einfallen, wie ich es damals angestellt hatte :D
    Hat mir jedenfalls sehr weiter geholfen. Vielen Dank^^

  21. Hallo Ellen,
    herzlichen Dank für Deine Anleitung. Endlich! Die einzige, die mir wirklich geholfen hat. Seit der Themeumstellung auf Radiate waren die Seitenzahlen verschwunden und stattdessen konnte man mit „ältere“ und „neuere“ Blättern. Wer hat sich sowas nur ausgedacht ;-) Nicht besonders nutzerfreundlich.
    Deine Anleitung hat auf Anhieb funktioniert und dank Deiner Kommentatoren konnte ich auch überall von der Seite die hartnäckigen „ältere“ und „neuere“ vertreiben.
    Schöne Grüße
    Eva

    • Hallo Eva,

      herzlichen Dank für dein tolles Feedback. Es freut mich total, dass ich dir weiterhelfen konnte :)

      Viele Grüße,
      Ellen

Hinterlasse eine Antwort

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