Nutzer und Leserinnen von Blogs kennen die WordPress Beitragsnavigation und wissen sie wahrscheinlich auch zu schätzen. Unter jedem Beitrag erscheinen zwei Links, die auf den vorherigen und den nächsten Beitrag verweisen. Das ist grundsätzlich eine tolle Sache. Es macht nämlich immer Sinn, mehrere Möglichkeiten der Navigation anzubieten.
Doch hat die Sache hat auch einen Haken. Websites, die gar nicht bloggen, aber dennoch Beiträge nutzen, können den Standard der Beitragsnavigation oft gar nicht gebrauchen. Der versteht unter »vorheriger« und »nächster« nämlich was anderes als der Rest der Welt. Was also tun? Die Beitragsnavigation etwa ganz entfernen? Mitnichten!
Update: Dieser Beitrag bezog sich im Jahr 2016 auf das damals aktuelle Standardtheme Twenty Sixteen.
Nun zeige ich Möglichkeiten der Anpassung für Twenty Twenty-One. Zudem zeige ich, wie Sie Beiträge (und ihre Navigation) einer Kategorie im Gegensatz zu allen anderen Beiträgen ausgeben können.
Zum Schluss zeige ich noch, wie Sie für Twenty Twenty-Two einen Template Teil für die Blocknavigation erstellen und in das passende Template einbinden können.
Der Standard der WordPress Beitragsreihenfolge
Die Beitragsnavigation orientiert sich an der grundsätzlichen Reihenfolge der Beiträge, wie sie auf der Blog- oder auf den Archivseiten erscheinen. Und hier lautet der Standard: chronologisch absteigend. Oder anders gesagt: mit abfallender Aktualität.
WordPress zeigt also immer Ihren aktuellsten Beitrag zuerst. Und in dem Moment, da Sie einen neuen Beitrag veröffentlichen, nimmt der die Poleposition ein. Der ehemals aktuellste wird zum zweitaktuellsten und so weiter.
Die Idee hinter dieser Sortierung ist jedenfalls die des Blogs, das Nachrichten präsentiert. Und auf einem Blog geht wie in einer Zeitung Aktualität vor allem anderen. Nachrichten von gestern sind kalter Kaffee. Ganz oben haben die nix verloren.
Was hat das nun mit der WordPress Beitragsnavigation zu tun?
Die Beitragsnavigation folgt demselben Prinzip. Allerdings wirkt hier die Begrifflichkeit des »vorherigen« und des »nächsten« Beitrags immer wieder befremdlich. Vorherig bedeutet hier nämlich, dass es zu dem zum nächstälteren Beitrag, also nach unten geht.
Umgekehrt heißt nächster Beitrag, dass es zu dem aktuelleren Beitrag geht, also zu dem Beitrag, der in der Liste über dem aufgerufenen steht.
Sicherlich nicht nur rein sprachlich, sondern auch wegen der Lesegewohnheit müsste es aber andersherum sein.
Vorherig müsste zu dem Beitrag gehen, der in der Liste über dem aufgerufenen steht. Vorherig müsste also nach oben führen. Und nächster sollte zu dem nächsten Beitrag in der Liste gehen. Links würde es also (zurück) nach oben gehen, rechts (weiter) nach unten.
Beispiel: Fußball-Artikel (Theme Twenty Sixteen)
Im konkreten Beispiel hatte ich 2016 aus Gründen der damaligen Aktualität das Thema Fußball und das Theme Twenty Sixteen gewählt. Hier ging es um Trikots (Fußball 1), Schuhe (Fußball 2) und Bälle (Fußball 3). Diese Beiträge stellen also Produkte dar, weshalb Aktualität hier überhaupt keine Rolle spielt.
Damals hatte ich gezeigt, dass Sie zwar über das Ändern des Datums der Veröffentlichung die Reihenfolge der Beiträge auf der Archivseite der entsprechenden Kategorie ändern können. Auf diese Weise also dafür sorgen können, dass die Fußball-Beiträge in der Reihenfolge Trikots (ältester Beitrag), Schuhe, Bälle (aktuellster Beitrag) erscheinen.
In der Beitragsnavigation sorgt die WordPress Logik aber dafür, dass es von den Schuhen (Beitrag 2) zurück zu den Bällen (Fußball 3) und weiter zu den Trikots (Fußball 1) geht.
Website-Betreiber, die zwar Beiträge und Kategorien für die Gestaltung nutzen, aber gar nicht wirklich bloggen wollen, bleibt also gar nichts anderes übrig, als einen Eingriff in die PHP-Datei zu nehmen, die die Darstellung der WordPress Beitragsnavigation definiert.
Wie immer gilt: Wer PHP-Dateien modifizieren möchte, muss ein Child-Theme erstellen, weil die Änderungen nach dem nächsten Theme-Update sonst verloren wären!
Twenty Sixteen und die WordPress Beitragsnavigation
Durch einen Eingriff in die Templates des Themes habe ich gezeigt, wie sich die WordPress Beitragsnavigation anpassen lässt.
Twenty Sixteen (und so auch Twenty Fifteen) ruft die Beitragsnavigation in der single.php am Ende des Loops auf:
// Previous/next post navigation.
the_post_navigation( array(
'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentysixteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Next post:', 'twentysixteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentysixteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Previous post:', 'twentysixteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
) );Auch wenn hier kein deutsches Wort vorkommt, sorgt doch die Übersetzungsfunktion dafür, dass im Frontend im Rahmen eines einzelnen Beitrags neben dem Titel auch die Begriffe Zurück und Weiter erscheinen.
Möchten Sie nun die Logik dieser Navigation an die eigenen Bedürfnisse anpassen, lautet die Definition wie folgt:
the_post_navigation( array(
'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Zurück' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Vorheriger Beitrag' ) . '</span> ' .
'<span class="post-title">%title</span>',
'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Weiter' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Nächster Beitrag' ) . '</span> ' .
'<span class="post-title">%title</span>',
) );Indem Sie bei 'next_text' statt ( 'Next', 'twentysixteen' ) einfach ( 'Zurück' ) einsetzen (und genauso bei 'prev_text' statt ( 'Previous', 'twentysixteen' ) einfach ( 'Weiter' ) wählen), vertauschen Sie die Logik. Auch Vorleseprogramme für Sehbehinderte erhalten dann die passende Information: Bei 'next_text' erkennt der Screenreader ( 'Vorheriger Beitrag' ), bei 'prev_text' liest er ( 'Nächster Beitrag' ) vor.
Im Frontend sieht das Ganze entsprechend Ihrer Sortierung sehr logisch aus:
Bemerke: Dieses Vorgehen beeinflusst die Beitragsnavigation für Ihre gesamte Website. Sollten Sie also zudem tatsächlich bloggen, würden die Navigation auch hier diesem Prinzip folgen!
Beispiel: »unser Team« (Theme Twenty Twenty-One)
Dieser Problematik, nämlich dass die Änderung der Beitragsnavigation gleich die gesamte Website beeinflusst, trägt das folgende Beispiel Rechnung.
Im Rahmen des Relaunches einer WordPress Website mit dem Theme Twenty Twenty-One stand ich vor der Aufgabe, sowohl die Beitragsnavigation für alle Beiträge als auch die Reihenfolge der Beiträge für nur eine Kategorie zu ändern. Diese eine Kategorie ist »unser Team«.
Während also alle anderen Beiträge der von mir bevorzugten vor/zurück-Logik in der Beitragsnavigation folgen sollen, gilt dies nicht für die Beiträge der einen Kategorie »über uns«. Denn wenn diese Team-Beiträge in umgekehrter Reihenfolge erscheinen, passt die Standard-Navigation plötzlich sehr gut!
Nur eine Kategorie in aufsteigender Chronologie
Als ich die Website vor ungefähr acht Jahren erstellt hatte, bestand das Team aus drei Personen. Neben der Chefin, die auch namengebende Gründerin ist, gab es zwei Angestellte. Damals sorgte ich über das Datum der Veröffentlichung dafür, dass die Chefin immer an erster Position zu sehen war. Nicht nur auf der Team-Seite, sondern auch auf der Team-Kategorieseite.
Acht Jahre später kommen nun aber zwei weitere Angestellte hinzu. Wenn ich jetzt möchte, dass die Chefin noch immer an erster Stelle erscheint, müsste ich die neuen Kolleginnen entweder auf ein Datum vor dem der Chefin setzen. Oder ich ändere die Reihenfolge der Beiträge.
Damit die Chefin noch immer an erster Stelle auf der Kategorie-Seite für »unser Team« erscheint, habe ich mich für die umgekehrte Reihenfolge der Beiträge entschieden. Statt von neu nach alt sollen die Beiträge nun von alt nach neu erscheinen.
Dafür sorgt eine Funktion:
// change posts order for certain categories
function my_change_posts_order( $query ){
if ( ! is_admin() && ( is_category('unser-team') ) && $query->is_main_query() ) {
$query->set( 'order', 'ASC' );
}
};
add_action( 'pre_get_posts', 'my_change_posts_order');Ohne die Einschränkung 'unser-team' bei 'is_category' würde WordPress übrigens die Reihenfolge für alle Beiträge aller Kategorien ändern. Betrifft es mehrere Kategorien, würde die Einschränkung ( is_category(array ('unser-team', 'andere Kategorie')) ) lauten.
Und sollten Sie eine Sortierung nach Alphabet bevorzugen, und zwar von A nach Z, würde es $query->set( 'order', 'DSC' ); und $query->set( 'orderby', 'name' ); lauten.
Quelle für diesen Code ist übrigens: https://wordpress.stackexchange.com/questions/327823/how-to-change-posts-order-on-category-and-tag-archives.
Nun gibt WordPress die Beiträge der Kategorie »unser Team« also in umgekehrter Reihenfolge aus. Die Chefin bleibt so immer die Erste in der Liste, selbst wenn zukünftig noch weitere Kolleg/innen hinzukommen.
Das war aber erst der erste Streich.
Ausgabe der Body und Post Class
Der zweite Streich ist nötig, um für die Änderung der Beitragsnavigation den Unterschied zwischen diesen Team-Beträgen gegenüber allen anderen möglich zu machen.
Die folgende Funktion sorgt dafür, dass alle Beiträge in ihrem body-Element ihre Kategorie ausgeben. Und dies als »schöner Name«, also nicht nur per Nennung der ID.
// add category nicenames in body and post class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');Ändern der WordPress Beitragsnavigation für Twenty Twenty-One
Nun, da die Team-Beiträge in umgekehrter Reihenfolge ausgegeben werden und sie sich über die Body/Post Class ansprechen lassen, kann es der Beitragsnavigation an den Kragen gehen.
Auch bei Twenty Twenty-One findet sich der Code für die Beitragsnavigation in der single.php. Grundsätzlich funktioniert sie auch nicht so viel anders als die der alten Standardthemes. Der Code sieht im Detail nur anders aus:
// Previous/next post navigation SINGLE ORIGINAL
$twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' );
$twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' );
$twentytwentyone_next_label = esc_html__( 'Next post', 'twentytwentyone' );
$twentytwentyone_previous_label = esc_html__( 'Previous post', 'twentytwentyone' );
the_post_navigation(
array(
'next_text' => '<p class="meta-nav">' . $twentytwentyone_next_label . $twentytwentyone_next . '</p><p class="post-title">%title</p>',
'prev_text' => '<p class="meta-nav">' . $twentytwentyone_prev . $twentytwentyone_previous_label . '</p><p class="post-title">%title</p>',
)
);Durch die Anpassung findet der Unterschied zwischen der einen Kategorie (unser-team) im Gegensatz zu allen anderen statt:
// Previous/next post navigation.
$twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' );
$twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' );
$twentytwentyone_next_label = esc_html__( 'Next post', 'twentytwentyone' );
$twentytwentyone_previous_label = esc_html__( 'Previous post', 'twentytwentyone' );
if (in_category('unser-team')) :
the_post_navigation(
array(
'prev_text' => '<p class="meta-nav">' . $twentytwentyone_prev . $twentytwentyone_previous_label . '</p><p class="post-title">%title</p>',
'next_text' => '<p class="meta-nav">' . $twentytwentyone_next_label . $twentytwentyone_next . '</p><p class="post-title">%title</p>',
'in_same_term' => 'true',
)
);
else:
the_post_navigation(
array(
'prev_text' => '<p class="meta-nav">' . $twentytwentyone_next_label . $twentytwentyone_next . '</p><p class="post-title">%title</p>',
'next_text' => '<p class="meta-nav">' . $twentytwentyone_prev . $twentytwentyone_previous_label . '</p><p class="post-title">%title</p>',
'in_same_term' => 'true',
)
);
endif;Das if (in_category('unser-team')) : sorgt dafür, dass alles, was direkt folgt, allein den Team-Beiträgen gilt. Alles was dem else : folgt, dient dann den Beiträgen aller anderen Kategorien. endif; schließt die Abfrage ab.
Und wieder gilt: Haben Sie die Reihenfolge auch noch für weitere Kategorien geändert, können Sie diese hier ergänzen. Dann heißt es nicht (in_category('unser-team')), sondern ( in_category(array ('unser-team', 'andere Kategorie')) )
Wenn Sie genau hinschauen, werden Sie feststellen, wo die Unterschiede zwischen den beiden Navigationen im Detail liegen.
Im Fall der Team-Beiträge ändert sich in der Tat nichts gegenüber dem Original. Denn durch die Umkehr der Reihenfolge der Beiträge passt die originale Navigation ganz wunderbar.
Bei der Beitragsnavigation für alle anderen Beiträge hingegen sind die Angaben für prev_text und next_text vertauscht.
Überdies zeigen beide Angaben nun die Option des Navigierens in gleicher Kategorie.
Link in same Category in der WordPress Beitragsnavigation
Es gibt nämlich noch einen weiteren Aspekt der WordPress Beitragsnavigation, der für Website-Betreiber bedeutsam ist. Vor allem für solche, die Beiträge und Kategorien nutzen, ohne tatsächlich zu bloggen. Es geht um das Verlinken innerhalb derselben Kategorie.
Die Standard-Beitragsnavigation macht keinen Unterschied, zu welcher Kategorie ein einzelner Beitrag gehört. Sie interessiert sich bekanntlich nur für die Chronologie. Spätestens beim letzten Beitrag der einen Kategorie wird sie also automatisch einen Beitrag einer anderen Kategorie anzeigen. Sagen wir von Fußball 3: Bälle geht es direkt zu den Tennisröckchen.
Um dies zu vermeiden, braucht es zur Ergänzung der vorhandenen PHP-Definition nur eine weitere Angabe, nämlich:
'in_same_term' => 'true',Diese Definition funktioniert übrigens auch für die alten Standardthemes und wird dort auch nur am Ende ergänzt.
CSS für die WordPress Beitragsnavigation mit Twenty Twenty-One
Nun sieht das Ganze aber noch nicht gut aus. Es braucht CSS-Anpassungen, damit links und rechts alles passt. Und dies auch wieder für die Team-Beiträge anders als für den Rest:
.unser-team .post-navigation .nav-links
{
flex-direction: row;
}
.post-navigation .nav-links
{
flex-direction: row-reverse;
}
@media only screen and (min-width: 592px) {
.navigation .nav-links .nav-next {
text-align: left;
}
.navigation .nav-links .nav-previous {
text-align: right;
}
.unser-team .navigation .nav-links .nav-next {
text-align: right;
}
.unser-team .navigation .nav-links .nav-previous {
text-align: left;
}
} Im Ergebnis bedeutet der Eingriff für das Team:
Auch bei allen anderen Beiträgen passt die Logik. Hier nochmal am Beispiel des Fußballs:
Denn nun geht es links per vorheriger Beitrag immer nach oben – auch wenn dies zu einem älteren Beitrag führt (wie im Fall der Team-Beiträge). Und rechts geht es immer zum nächsten Beitrag nach unten.
Dies entspricht üblichen Lesegewohnheiten und ist somit für mein Verständnis auch logisch.
WordPress Beitragsnavigation für Twenty Twenty-Two (Full Site Editing)
Zum Schluss noch die Erkenntnis, dass natürlich auch ein Block Theme wie Twenty Twenty-Two eine Beitragsnavigation zeigen kann. Wenngleich die Twenty Twenty-Two Templates diese erst einmal nicht nutzen. Entsprechende Blöcke stellt WordPress aber zur Verfügung.
Tatsächlich ist es im Rahmen des Full Site Editings relativ einfach, die beiden Links zu vertauschen. Recht komplex hingegen ist das Vorgehen, eine solche Navigation überhaupt erst einmal zur Verfügung zu stellen. Sinnvoll ist es hier auf jeden Fall, das Ganze als Template Teil zu erstellen und dann diesen Template Teil in das Template für einzelne Beiträge einzubinden. Und so geht das:
1. Template Teil »Post Navigation vertauscht« erstellen
Für das Erstellen eines Template Teils rufen Sie den Website Editor auf und klicken auf Template Teile. Nun sehen Sie die Liste der vorhandenen Template Teile. Oben rechts gibt es einen Button »Hinzufügen«, über den Sie einen eigenen Template Teil erstellen können.
Ihrem neuen Template Teil geben Sie einen eindeutigen Namen. In meinem Fall ist dies »Post Navigation vertauscht«. Und weil die Post Navigation ein Teil des Contents werden soll, wählen Sie als Bereich »Allgemein«.
2. Template Teil bearbeiten
Nun haben Sie einen neuen Template Teil, der aber noch keinerlei Inhalt hat. Den fügen Sie nun hinzu. Und natürlich funktioniert hier alles über Blöcke.
- Sie erstellen einen Spaltenblock mit zwei Spalten gleicher Größe.
- In der linken Spalte fügen Sie einen Absatzblock mit dem Text »vorheriger Beitrag« ein.
- Darunter fügen Sie den nächster-Beitrag-Block ein und wählen die Einstellung »Den Titel als Link anzeigen«. »Das Label als Teil des Links übergeben« bleibt deaktiviert.
- In der rechten Spalte fügen Sie einen Absatzblock mit dem Text »nächster Beitrag« ein. Dem Text geben Sie die Ausrichtung rechtsbündig.
- Darunter fügen Sie den vorheriger-Beitrag-Block ein und wählen auch hier die Einstellung »Den Titel als Link anzeigen«. Und auch hier bleibt »Das Label als Teil des Links übergeben« deaktiviert. Auch für diesen Block wählen Sie die rechtsbündige Ausrichtung.
Eine Option für das Navigieren innerhalb derselben Kategorie bieten die beiden vorherig/nächster-Blöcke leider nicht.
Nun speichern Sie Ihren Template Teil zweimal.
3. Den Template Teil in das Single Template einbinden
Ihren neuen Template Teil müssen Sie nun nur noch in das Template für Einzelne Beiträge an passender Stelle einbinden. Hier bietet sich der Bereich zwischen dem Beitragsinhalt beziehungsweise den Meta-Angaben und den Kommentaren an. Dazu wählen Sie den Block Template Teile, der Ihnen Ihre neue Post Navigation zur Auswahl anbietet.
Schlussendlich sollten Sie diesem Block nur noch die weite Ausrichtung zuordnen und ihr Single-Template zweimal speichern. Nun sollten alle Beiträge diese Navigation unter dem Beitragsinhalt zeigen.
Beitragsbild und Screenshots: Britta Kretschmer
Schreibe einen Kommentar