Text-Auszug im Blog begrenzen

Bei meinem Regionalmagazin zeigt das Theme auf der Startseite mehrere Widgets untereinander und je zwei nebeneinander an. In einer Variante der Widgets wird der erste Artikel mit einem Bild dargestellt und darunter ein Textauszug.

Standardmäßig wird dabei der gesamte, im Editor-Feld Auszug eingegebene Text angezeigt.

Das Problem, was dabei entsteht, kann man sich denken. Denn nicht immer sind die einleitenden Texte gleich lang. Das wiederum führt natürlich dazu, das die Länge der jeweiligen Kästen unterschiedlich ist. Gleiches trift auf die Höhe der nebeneinander liegenden Widgets unterschiedlich zu.

Am besten lässt sich das visuell erklären:

unterschiedlich langer Textauszug
Durch den unterschiedlich langen Textauszug verschiebt sich die Höhe des linken Widgets nach unten. Die folgenden Widgets fangen das nicht auf.

Man sieht sehr gut, das die Auszüge der nebeneinander liegenden Widgets unterschiedlich lang sind. Dadurch wird das linke Widget länger wie das rechte. Die darunterliegenden Widgets fangen den Unterschied nicht auf, und fangen daher weiter unten an, als die rechten Kästen.

Unterschiedlich lange Widgets nebeneinander

Mit einem Codeschnippsel, den ihr in die functions.php einfügt, könnt ihr das Problem beseitigen.

/** 
 * Erzeugt einen Auszug mit genau definierter Zeichenzahl. 
 * 
 * @param int $chars Menge der Zeichen. 
 * @param bool $echo Aus- oder Rückgabe 
 * @return string 
 */
function excerpt_chars($chars = 100, $echo = TRUE) 
{ 
    global $post; 

    $out = strip_tags($post->post_excerpt); 
    $out = substr($out, 0, (int) $chars); 
    $out = end_on_word($out) . ' …';
    $out = xwp_autop($out); 

    if ( $echo ) 
    { 
        echo $out; 
        return; 
    } 

    return $out; 
} 

/**
 * Entfernt unvollständige Worte am Ende eines Strings.
 * @author Thomas Scholz 
 * @param $str Zeichenkette
 * @return string
 */
function end_on_word($str)
{
	$str = trim($str);
    // Jedes Wort ein Eintrag im Array …
    $arr   = explode(' ', trim($str) );
    // … letztes Stück wegwerfen …
    array_pop($arr);
    // … den String wieder herstellen und Kommas trimmen.
    return rtrim( implode(' ', $arr), ',;');
}

Die Zeilen 8 bis 25 sorgen dafür, das der Textauszug begrenzt wird. Und zwar auf die Zahl an Zeichen, die ihr in Zeile 8 für die Variable chars festlegt.

Allerdings hat dieser Code noch einen groben Schönheitsfehler: Denn auch wenn Euer Text – wie in diesem Fall – 100 Zeichen oder weniger hat, wird an dessen Ende ein … angehängt. Das liegt daran, das die Funktion nicht überprüft, ob der Auszug gekürzt wurde.

Zuviel Text abgeschnitten ohne Wörter mittendrin zu trennen

Um diesen Fehler zu korrigieren muss die Zeile 14 geändert und eine weitere darunter eingefügt werden:

 if(strlen($post->post_excerpt)>100)
		$out = end_on_word($out) .' …'; 

Der Code in den Zeilen 32 bis 41 sorgt dafür, das der Text nicht mitten im Wort abgeschnitten wird.

Bis hierher haben wir jedoch erst dafür gesorgt, das es möglich wird, den Textauszug zu begrenzen. Nun müssen wir noch dafür sorgen, das WordPress das im Frontend auch umsetzt.

Dazu sucht Ihr Euch die Datei heraus, die den Inhalt auf der Startseite ausgibt. In meinem Falle ist das die content.php.

Hier müsst ihr den Befehl the_excerpt() suchen und mit excerpt_chars() ersetzen. Dann habt ihr Euer Vorhaben erfolgreich umgesetzt.

Bei mir sieht das Ergebnis jetzt so aus:

Textauszug gleichlang
Mit Hilfe des Codes ist der Textauszug gekürzt und somit behalten die beiden Widgets ihre Standardgröße

Schreibe einen Kommentar