Dieser Beitrag zeigt dir, wie du eine Pagination für deine Blog-Startseite ohne Plugin erstellen kannst.

Unter Pagination versteht man diese Navigationsleiste am Ende deiner Blog-Startseite um noch weitere Blog Seiten anzuzeigen. Da steht dann meistens : Ältere Einträge « » Neuere Einträge .. , falls schon welche vorhanden sind.

Direkt im WordPress Codex gibt es dazu eine einfache Anleitung, wie man das ganze auch noch ein wenig schöner umsetzen kann und das ganz ohne Plugin 🙂 .

Zudem kannst du diese Pagination dann auch individuell über CSS stylen.

WordPress Paginationen sind eigentlich so gut wie in jedem WordPress Theme vorhanden. Du findest sie am Ende der Blog-Startseite, wenn du schon mehrere Beiträge verfasst hast. Allerdings ist das Styling ja eben Theme-abhängig.

Individuelle Pagination erstellen

Allerdings hat WordPress für die Pagination eine eigene Funktion erstellt. Mit dieser Funktion werden auch die CSS Klassen gleich mitgeliefert :-) . Das ist sehr praktisch, denn auf diese Weise brauchst du nur an der richtigen Stelle die WordPress Funktion einfügen.

Funktion in index.php einfügen

      
      <?php endwhile; ?>
      

      <?php the_posts_pagination( array(
    'mid_size' => 2,
     
    'prev_text' => __( '&laquo;', 'textdomain' ),
    'next_text' => __( '&raquo;', 'textdomain' ),
) ); ?>


      <?php endif; ?>

Diese Funktion einfach nach <endwhile> einfügen, in der index.php deines WordPress Themes ( ist allerdings themeabhängig ).

CSS für das Paginations Styling finden

WordPress erstellt die CSS Klassen automatisch. Wie diese heißen, das kannst du ganz einfach herausfinden, wenn du z.B. das Firebug Tool im Browser Firefox aktiviert hast.

Folgende Klassen werden erstellt:

<nav class="navigation pagination">
<div class="nav-links">
a.prev.page-numbers
a.page-numbers
.page-numbers.current
a.next.page-numbers 
</div>
</nav>

Der obige Code enthält nur die Klassen – übersichtshalber. Davon ist .page-numbers jene, worüber du den Style setzen kannst.

FAZIT:

Dadurch, das WordPress direkt die Funktion für die Pagination zur Verfügung stellt und auch autmatisch CSS Klassen generiert, ist es relativ einfach, für die Pagination ein individuelles Style zu erzeugen. Natürlich auch CSS3 Spielereien :-) .

Achtung: Allerdings ist es oft Browserabhängig, was wie angezeigt wird. Speziell wenn man Pseudoklassen mit a:hover dazuverwendet.