PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

WordPress More-Tag sinnvoll ersetzen & Funktionalität beibehalten

| 4 Kommentare

Wenn man den sogenannten More-Tag verwendet um Blog-Artikel zu kürzen, fügt WordPress auf der eigentlichen Artikel-Seite einen HTML-Anker ein, auf den „beim weiterlesen“ verlinkt wird. Oft besteht das Bedürfnis genau an dieser Stelle etwas einzufügen – sei es Werbung oder einfach nur eine dezente Trennlinie.


Status Quo

Von Haus aus fügt WordPress ein span-Element mit dem schon erwähnten Anker ein. Dieses lässt sich jedoch kaum an die eigenen Bedürfnisse anpassen, da es nur eine eindeutige ID besitzt und nicht etwa eine CSS-Klasse, die für alle „more-spans“ gilt.

1
<span id="more-1234"></span>

Beim ersetzen des More-Tags wird oft ein häufiger Fehler gemacht: Er wird so ersetzt, das die Anker-Funktionalität verloren geht, indem man ihn einfach mit Werbung oder was auch immer ersetzt.

Dabei müsste man an der Stelle des span-Elements ein anderes Element beibehalten, dass die Anker-Funktion erfüllt, indem es die more-ID übernimmt.

Natürlich könnte man auch einfach den gewünschten Inhalt hinter das span-Element einfügen Dann hat man jedoch immer noch ein überflüssiges Element, dass man sich genauso gut sparen könnte.

Die Lösung

Meine Lösung sieht daher so aus, dass ich das span-Element entferne und danach eine horizontale Linie, also ein hr-Element, einfüge. Diese Linie übernimmt die Anker-Funktion. Dazu ist folgender Filter nötig, der in die functions.php eures Themes übernommen werden kann:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function my_more_tag($content) {
    if (!is_single())
        return $content;
    
    $replacement = '<hr id="$1" class="more" />';
    
    return preg_replace(
        '/<span id\=\"(more\-\d+)"><\/span>/',
        $replacement,
        $content
    );
}
 
add_filter('the_content', 'my_more_tag');

Natürlich könnt ihr die fünfte Zeile auf eure Bedürfnisse anpassen und beispielweise noch einen Werbebanner einfügen. Durch das hinzufügen der Klasse „more“ lässt sich das hr-Element mit CSS anpassen.

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!