Tag: WordPress

Eine Frage, die immer wieder in WordPress-Foren auftaucht, ist, wie man den Titel auf eine bestimmte Anzahl Zeichen kürzen und ein “…” anfügen kann.

Das Problem ist mit einigen Zeilen PHP schnell gelöst:

add_filter( 'the_title', 'short_title' );
function short_title( $title ) {
  $chars = 20;
  if ( strlen( $title ) > $chars ) {
    $title = substr( $title, 0, $chars );
    $title .= " …";
  }
  return $title;
}

Die Variable $chars muss auf die Anzahl Zeichen gesetzt werden, die man maximal anzeigen möchte und in Zeile 6 muss der Platzhalter für den ausgelassenen Text eingefügt werden (… ist typografisch richtige Version für drei Punkte, Ellipse genannt).

Nachteilig an dieser Lösung ist, dass der Titel mitten in einem Wort abgeschnitten werden könnte. Wenn man möchte, kann man die Funktion entsprechend erweitern:

add_filter( 'the_title', 'short_title' );
function short_title( $title ) {
  $chars = 20;
  if ( strlen( $title ) > $chars ) {
    $title = substr( $title, 0, $chars );
    $title = substr($title, 0, strrpos( $title, ' ' ) );		
    $title .= " …";
  }
  return $title;
}

Kopiert man diese Funktion in die funtions.php des Themes werden alle Aufrufe von the_title den eingefügten Angaben entsprechend gekürzt.

Die meisten Nutzer werden das <!--more-->-Tag kennen, das es erlaubt, einen Anreißer (engl. “teaser“) zu erzeugen. Dabei wird auf der Hauptseite des Blogs der Text oberhalb des Tags angezeigt und nach dem Anklicken des “More”-Links die einzelne Artikelseite, auf der dann zusätzlich der Text nach dem Tag angezeigt wird.

Es kann aber Situationen geben, in denen man einen gesonderten Anreißer erstellen möchte. So bietet es sich z.B. bei einem reinen Photo-Artikel an, als Anreißer eine Collage zu nehmen. Im eigentlichen Artikel passt diese Collage nicht mehr so richtig. Oder man möchte im Anreißer eine Zusammenfassung des Artikels geben, der aber im Artikel selber nur stören würde.

Um diese Teile des Artikels auf der Artikelseite auszublenden kann man das wenig bekannte <!--noteaser-->-Tag benutzen:

Teaser Text. <!--more--><!--noteaser-->Artikel Text.

Das <!--noteaser-->-Tag muss direkt nach dem <!--more--> folgen, ansonsten wird es nicht beachtet.

Bei der Benutzung des Tags sind allerdings einige Dinge zu beachten:

• Nach dem Anklicken des “more”-Links wird der Artikel bis an den oberen Rand des Browsers geschoben. Dies hat bei einem “normalen” more-Artikel den Sinn, den Text vor dem more aus dem Blickfeld des Lesers zu schieben. Mit noteaser gibt es allerdings keinen solchen Text mehr und es verwirrt den Leser, wenn der Text ganz oben dargestellt wird. Besser wäre es, wenn die Überschrift oben stehen würde.
• Der Text vor den <!--more--><!-&#45noteaser-->-Tags wird im Preview nicht angezeigt. Man muss also in zwei Stufen arbeiten: erst den Text wie üblich erstellen und erst ganz zum Schluss das <!--noteaser-->-Tag einfügen.
• Es werden alle Zeilenumbrüche mit übernommen, so dass man die Tags und den folgenden Text ohne Umbruch hintereinander schreiben sollte, damit auf der Artikelseite keine unschöne Leerzeile über dem Artikeltext dargestellt wird.

Diese Unzulänglichkeiten lassen sich evtl. durch ein neues Plugin verbessern… Mal schauen. Ansonsten ist das Tag eine sehr schöne Möglichkeit sein Blog “anders als die anderen” zu gestalten.