kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Pagination in WordPress

In den Einstellungen von WordPress kann festgelegt werden wie viele Beiträge auf einer Seite angezeigt werden sollen. Häufig sind es ca. zehn Artikel. Wenn diese Zahl erreicht ist, blendet das WordPress-Theme eine Seitennavigation („Nächste Seite“ / „Vorherige Seite“) ein, damit der Besucher auch ältere Beiträge erreichen kann. Leider kann über diese Links keine Seite übersprungen werden. Auch ist dem Besucher oft unklar, auf welcher Seite er sich befindet. Mit einer Pagination ersetzt ihr die Standard-Seitennavigation durch eine benutzerfreundlichere Version.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

functions.php - Template für Pagination definieren

Öffnet die functions.php des Themes und fügt folgenden Code ein. Mit diesem Snippet wird das Template der Pagination definiert – ein <nav>-Element mit ungeordneter Liste:


/* pagination  */
function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;  
     global $paged;
     if(empty($paged)) $paged = 1;
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         { $pages = 1; }
     }   
 
     if(1 != $pages)
     {
         echo "<nav class=\"pagination\"><ul>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a></li>";
         if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a></li>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<li><span class=\"current\">".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive \">".$i."</a></li>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<li><a href=\"".get_pagenum_link($paged + 1)."\">&rsaquo;</a></li>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a></li>";
         echo "</ul></nav>\n";
     }
}

Pagination im WordPress-Theme aufrufen

Öffnet nun das Template in dem die Pagination eingebunden werden soll. Das ist häufig die index.php, die tag.php, die category.php oder die archive.php. Fügt folgenden Code dort ein, wo die Pagination erscheinen soll und ersetzt[EUER INDIVIDUELLER LOOP] mit der Variablen die ihr für WP-Query o.ä. vergeben habt.

Auch eine Einbindung außerhalb des Loops ist möglich.

<?php if (function_exists("pagination")) {pagination([EUER INDIVIDUELLER LOOP]->max_num_pages); } ?>

Individueller Loop mit Pagination

Wenn ihr einen angepassten Loop oder einen Custom Post Type von WordPress mit einer Pagination ausstatten wollt, verwendet am besten einen WP_Query(). Wir haben in einem separaten Beitrag beschrieben, wie der WP_Query so angepasst wird, dass er zu einer Pagination kompatibel ist. WP_Query() mit Pagination.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

11 Kommentare

  1. MaWoSch

    Verfasst am 9. Oktober 2012 um 11:39 Uhr.

    Danke für den Tipp mit der schlanken functions.php Lösung. Ich nutze derzeit auf meinem Blog ein Plugin. Wobei ich ein paar Codezeilen direkt im Theme immer bevorzuge. Mal schauen, vielleicht baue ich um.

    • Jonas Hellwig

      Verfasst am 9. Oktober 2012 um 12:15 Uhr.

      Das ist exakt die Pagination die auch hier im Blog verwendet wird.

  2. Tolle Hilfe

    Verfasst am 12. Oktober 2012 um 9:46 Uhr.

    Das ist wirklich mal hilfreich. Viele WordPressblogs haben zwar inzwischen ein tolles Design, aber die Pagination vom Basictheme. Wertet einen Blog auf!!

  3. Marcus

    Verfasst am 12. Oktober 2012 um 11:10 Uhr.

    Hey wenn ich das einbinde komme ich nur auf die 404.php
    alle Links laufen auf folgende referenz:
    /page/2

    wo ist der Fehler ?

    • Jonas Hellwig

      Verfasst am 12. Oktober 2012 um 16:26 Uhr.

      Prüfe bitte mal deine Permalink-Struktur (Einstellungen → Permalinks). Hast du dort Standard gewählt? Wenn ja, ändere die Struktur mal in sprechende URLs ab.

  4. René Grosche

    Verfasst am 18. Oktober 2012 um 15:08 Uhr.

    Wie immer tolle Sache :)

    copy pass // stylen // läuft *i like*

    Wo bleibt die DVD mit best of WP ;) Mein Kaufsegen hast du :)

  5. Cathrin

    Verfasst am 4. Februar 2013 um 13:34 Uhr.

    Vielen Dank – code funktioniert bestens. Auf jeden Fall benutzerfreundlicher als die Standard-Einstellung.

  6. Kilian

    Verfasst am 13. August 2013 um 16:30 Uhr.

    Toller Beitrag! Mal ne richtig doofe Frage, aber wie verhindere ich mit einer intelligent (also nicht manuell) Lösung, das Page 2, 3, (…), indexiert werden?

    Ich habe bei bestimmten taxonomie cats bis zu 10 Seiten, möchte aber das Google immer Seite 1 indexiert und den Rest nur liest.

    Vielen Dank

  7. Kathrin

    Verfasst am 19. Mai 2014 um 3:59 Uhr.

    Ich hab mal eine Frage… und zwar, kann man auch ein Pagination auch in der page.php einbauen? Oder Muss ich das über Category machen?

    Lg Kathrin

  8. Tanja

    Verfasst am 10. Januar 2017 um 11:02 Uhr.

    hallo jonas,
    ich arbeite mich gerade durch deinen CD-Workshop „WP Themes entwickeln“ (gut gemacht ;-) …) und wollte diese pagination in mein – auf dieser wissensgrundlage – neues basistheme einbauen. aber es funktioniert nicht (und im original „programmkino“-theme auch nicht.) nav wird nicht generiert – öde leere im quellcode. in meinen alten theme-vorlagen hingegegen läuft es. an was kann das liegen?

    liebe grüße, tanja

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.