WordPress – Readmore Links anpassen
Weil ich gerade dran gewesen bin, will ich euch diese nette Option nicht vorenthalten. Wenn es um Individualisierung von WordPress Templates geht lohnt sich immer ein Blick in den WordPress Codex (https://codex.wordpress.org/Main_Page) oder in die neue Funktionsreferenz (https://developer.wordpress.org/reference/) von WordPress. Ich weiß nicht ob es nur mir so geht, aber ich lande irgendwie doch immer wieder auf der alten WordPress Codex Seite.
Worum geht es? Ich möchte die „Weiterlesen“ Links der Seite anpassen, die etwa auf der Startseite, in den Kategorien oder im Archiv zum tragen kommen. Ein bisschen umstylen und eine eigene CSS Klasse reicht mir dabei schon aus. Zusätzlich bediene ich mich auch an den Klassen des Bootstrap Frameworks und bei der Symbolik bei Font Awesome.
Im Grunde muss nur die functions.php deines Templates erweitert werden. Den Rest machst du dann direkt im Template und im CSS.
Aussehen soll es dann in etwa so:
Die functions.php
// CSS Klassen für Readmore Link ergänzen function posts_link_attributes_next() { return 'class="page-readmore_next btn btn-sm btn-dark mr-2"'; } function posts_link_attributes_previous() { return 'class="page-readmore_previous btn btn-sm btn-dark mr-2"'; } add_filter('next_posts_link_attributes', 'posts_link_attributes_next'); add_filter('previous_posts_link_attributes', 'posts_link_attributes_previous');
Die Ausgabe im Template
<?php echo next_posts_link( "Ältere Beiträge"); ?> <?php echo get_previous_posts_link( "Neue Beiträge" ); ?>
Das passende CSS dazu
.page-readmore_next, .page-readmore_previous { font-weight: bold; } .page-readmore_next::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f100"; margin-right: 10px; } .page-readmore_previous::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101"; margin-left: 10px; }
Voraussetzung für das CSS ist hier das Bootstrap Framework in der Version 4.5.x.
Verfasst am 04.04.22, durch Jens.