Ein eigenes WordPress Theme erstellen 6 – Beitrags- und Seitennavigation und den Archivtitel mit Beschreibung hinzufügen

Seit WordPress v4.1 stehen uns einige Standardlösungen zur Seiten- und Beitragsnavigation zur Verfügung.

  • the_post_navigation()
  • the_posts_navigation()
  • the_posts_pagination()

Wie wir diese drei Funktionen richtig und sinnvoll in unserem Theme einsetzen können, werden wir in diesem Artikel behandeln.

Was bewirken diese drei Funktionen?

the_post_navigation() verwenden wir um zwischen Beiträgen der selben Kategorie hin und her zu Navigieren. Standardmäßig wird hierbei der Titel des nächsten bzw. des vorigen Beitrages angezeigt. Sofern eine single.php des Themes vorhanden ist, würde diese Funktion dort hingehören, man kann aber auch mittels if ( is_single() ) { the_post_navigation(); } diese Funktion direkt in die bereits vorhanden index.php integrieren.

the_posts_navigation() erfüllt einen gänzlich anderen Zweck. Im WordPress Dashboard unter Einstellungen – Lesen finden wir die Einstellung „Blogseiten zeigen maximal“ standardmäßig 10 Beiträge. Sofern es im Loop des Themes nicht anders festgelegt ist, werden also jeweils nur 10 Beiträge angezeigt. Das betrifft nicht nur die Hauptseite, sofern nicht ohnehin eine statische Seite als Hauptseite gewählt wurde, sondern auch sämtliche Archivseiten wie Kategorieseiten, Suchergebnisse usw. Um auch den 11ten Beitrag zu erreichen müssen wir daher den Seitenumbruch nach dem 10ten Beitrag navigieren. Die Webseiten URL ändert sich durch die Navigation ab der 2ten Seite ebenfalls indem zB page/2/ angehängt wird. Standardmäßig wird mit Ältere Beiträge und Neuere Beiträge zwischen den Seiten navigiert.

the_posts_pagination() erweitert grob gesagt nochmals den Funktionsumfang von the_post_navigation() um eine numerische Navigation. Mit Zurück und Weiter wird hier standardmäßig navigiert, wobei wir diesen Text natürlich ändern können, sowie mit den Seitenzahlen, mit denen wir direkt zur gewünschten Seite kommen. Ohne irgendwelche Tweaks würde das für die 5te von 10 Seiten zB so aussehen: Zurück 1 ... 4 5 6 ... 10 Weiter.

Ob wir nun the_posts_navigation() oder the_posts_pagination() verwenden ist eine reine persönliche Entscheidung. In diesem Tutorial verwenden wir in der index.php die Funktion the_posts_pagination() als Standard und the_posts_navigation() für sämtliche Archivseiten. Realisieren könnten wir dies in der index.php mit folgendem Code.

// Archivseiten zB Kategorieseiten, Datumsarchiv etc.
if ( is_archive() ) {
    the_posts_navigation();
}
// Hauptseite und Suchergebnisse
else {
    the_posts_pagination();
}

Jetzt gehen wir noch einen Schritt weiter und fügen auch noch die Beitragsnavigation hinzu.

// Beitragsnavigation
if ( is_single() ) {
    the_post_navigation();
}

Auf diese Weise ersparen wir uns das separate anlegen einer single.php. Sollte sich das Design der Webseite in der Beitragsansicht aber wesentlich unterscheiden, so mag es aber durchaus Sinn machen eine single.php mit dementsprechenden Anpassungen zu erstellen. Das selbe gilt in diesem Fall für die Archivseiten. Schlagwortarchive oder Kategoriearchive usw. können ebenfalls komplett unterschiedlich dargestellt werden und könnten daher ebenfalls über eine eigene Template Datei angesprochen werden wie zB archive.php, category.php, tag.php usw. siehe hier.

Da wir hier in diesem Tutorial keine dieser Dateien anlegen, sollten wir aber auch noch die Anzeige des Archivtitels und der Archivbeschreibung, sofern vorhanden, bei Archivseiten ermöglichen. Auch in diesem Fall bietet uns WordPress ab v4.1 eine relativ unkomplizierte Lösung an – the_archive_title() und the_archive_description(). Die index.php wird hierbei um folgenden Code ergänzt.

// Archivtitel und Archivbeschreibung
if ( is_archive() ) {
    echo '<header class="page-header">';
        the_archive_title();
        the_archive_description();
    echo '</header>';
}

Der Quellcode dieses Codes sieht wiefolgt aus.

<header class="page-header">
    Kategorie: Allgemein
    <p>Beschreibung der Kategorie Allgemein</p>
</header>

Da wir unseren Archivtitel aber noch ein wenig styling gönnen, ist es sinnvoll diesen noch in einem Kontainer, Überschriftentag oder ähnliches zu packen. Dies können wir, wenn wir uns die Referenz zu the_archive_title() anschauen auch direkt innerhalb der Klammern erledigen.

aus

the_archive_title();

wird

the_archive_title( '<h1>', '</h1>' );

Zusätzlich könnte man hier den h1 Tag noch um eine Klasse oder ID erweitern, unbedingt notwendig ist es aber nicht. Nach dem selben Prinzip könnten wir auch noch bei the_archive_description() vorgehen.

Aber nocheinmal zurück zu the_posts_pagination(). Wir ändern jetzt den angezeigten Text von Zurück und Weiter auf Ältere Beiträge und Neuere Beiträge mit einem Doppel Kleiner/Größer Zeichen indem wir einen array() hinzufügen.

the_posts_pagination( array(
    'prev_text' => '&laquo; ' . __( 'Neuere Beiträge', 'zoechbauer' ),
    'next_text' => __( 'Ältere Beiträge', 'zoechbauer' ) . ' &raquo;',
) );

Wenn wir zusätzlich noch 'mid_size' => 2, hinzufügen wird in diesem Beispiel aus ... 4 5 6 ... auf einmal ... 3 4 5 6 7... . Je nach Zahl erhöht sich die Spreizung dementsprechend. Den selben Vorgang könnten wir auch für den Beginn und das Ende der Pagination anwenden zB mit 'end_size' => 2,. Aus ...Beiträge 1 ... wird dann ...Beiträge 1 2 ... . Wollen wir überhaut alle Seiten der Pagination anzeigen können wir das mit 'show_all' => true, lösen. Weitere Anpassungsmöglichkeiten können wir wie immer im Codex von WordPress finden.

Nach diesen ganzen Anpassungen sieht jetzt unsere index.php wiefolgt aus.

<?php
// Theme: Zoechbauer Basis Theme

// header.php
get_header();

echo '<main id="content" role="main">';

// WordPress Loop
if ( have_posts() ) { // Beiträge vorhanden

    // Archivtitel und Archivbeschreibung
    if ( is_archive() ) {
        echo '<header class="page-header">';
            the_archive_title( '<h1>', '</h1>' );
            the_archive_description();
        echo '</header>';
    }

    while ( have_posts() ) {
        the_post();
        // content.php - bei Post-Formaten auch content-image.php, content-aside.php ...
        get_template_part( 'content', get_post_format() );
    }
    comments_template(); // Kommentare

    // Archivseiten zB Kategorieseiten, Datumsarchiv etc.
    if ( is_archive() ) {
        // Ältere und neuere Beiträge
        the_posts_navigation();
    }
    // Hauptseite und Suchergebnisse
    else {
        // Numerische Navigation (Pagination)
        the_posts_pagination( array(
            'prev_text' => '&laquo; ' . __( 'Neuere Beiträge', 'zoechbauer' ),
            'next_text' => __( 'Ältere Beiträge', 'zoechbauer' ) . ' &raquo;',
            // Spreizung von der aktiven Seite ausgehend
            'mid_size' => 2,
            // Spreizung von der ersten bzw. letzen Seite ausgehend
            'end_size' => 3,
            // Änderung der Navi auf eine Liste
            // Zeigt alle vorhanden Seiten in der numerischen Navigation an - wird statt mid_size und end_size verwendet
            // 'show_all' => true,
            'before_page_number' => '<span class="screen-reader-text">' . __( 'Seite', 'zoechbauer' ) . ' </span>',
        ) );
    }
    // Beitragsnavigation
    if ( is_single() ) {
        // Voriger und nächster Beitrag
        the_post_navigation();
    }
} // Beiträge vorhanden - Ende

else { // Wenn keine Beiträge vorhanden
    // content-none.php
    get_template_part( 'content', 'none' );
} // Wenn keine Beiträge vorhanden - Ende

echo '</main>';

// sidebar.php
get_sidebar();

// footer.php
get_footer();
?>

Im diesem Artikel beschreibe ich, wie man für verschiedene Post-Formate und Seiten auch verschiedene Inhalte bereitstellt.




Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.