Untertitel für Artikel Überschriften in WordPress ganz einfach hinzufügen

In diesem Beitrag möchte ich das Plugin Subtitles vorstellen, mit dem du ganz einfach Untertitel für Artikel Überschriften in WordPress hinzufügen kannst. Die Untertitel sind sowohl für Beiträge und statische Seiten als auch Custom Post Types möglich.

Für Untertitel existieren wie so oft mehrere Plugins. Subtitles ist mein persönlicher Favorit, weil das Plugin ohne Code Anpassungen im Theme funktioniert und auf das Nötigste reduziert wurde – also sehr schlicht und simpel daher kommt.

Damit ist es ideal für Einsteiger geeignet, weil keine Theme Dateien bearbeitet werden müssen, um Template Funktionen zur Ausgabe des Untertitels hinzuzufügen. Gleichzeitig existieren für WordPress Entwickler einige Hooks und Filter, um das Plugin anzupassen.

Subtitles Download

Das Plugin kann über Github oder dem offiziellen WordPress Plugin Verzeichnis heruntergeladen werden. Es hat keine einzige schlechte Bewertung und ist derzeit auf über 9.000 Webseiten installiert.

Untertitel hinzufügen

Subtitles kommt ohne eigene Optionen aus und fügt lediglich ein neues Eingabefeld für den Untertitel unter dem normalen Feld für den Titel ein.

Das Feld fügt sich nahtlos in die Oberfläche von WordPress ein und wirkt daher fast wie ein Core Feature, nicht als Fremdkörper.

Ausgabe des Untertitels

Wie bereits erwähnt zeigt das Plugin den Untertitel selbständig und automatisch im Theme an. Das Plugin klinkt sich dazu einfach in die Funktion the_title() ein, welche üblicherweise im Theme den Titel des Beitrags oder Seite ausgibt.

Die Standard Themes wie beispielsweise TwentySixteen nutzen meistens die Klasse .entry-title und h1 zur Ausgabe des Titels auf einzelnen Beitragsseiten.

Ohne Nutzung des Plugins sieht der HTML Code des Titels deshalb meistens so oder so ähnlich aus, abhängig vom Theme:

<h1 class="entry-title">
	Überschrift des Beitrags
</h1>

Das Plugin ersetzt den normalen Titel und fügt zusätzlich den Untertitel ein. Beide Titel werden von span Elementen mit eigenen Klassen umschlossen und können so mit etwas CSS Code an das Styling des Themes angepasst werden.

<h1 class="entry-title">
    <span class="entry-title-primary">Überschrift des Beitrags</span>
    <span class="entry-subtitle">Ein passender Untertitel</span>
</h1>

Für die Klasse .entry-subtitle des Untertitels fügt das Plugin sehr sparsam etwas CSS Code hinzu.

span.entry-subtitle {
	display: block;
	font-size: 0.53333333333333em;
}

display: block bewirkt, dass Untertitel in einer eigenen Zeile dargestellt werden. Darüber hinaus wird die Schriftgröße für den Untertitel verkleinert.

Das Ergebnis:

Bis auf die Schriftgröße erbt der Untertitel das Styling des Titels, d.h. Schriftart, Farbe usw. sind genau gleich. Mit etwas CSS Code lässt sich aber natürlich ganz leicht das Styling noch weiter anpassen.

Ich finde z.B. eine andere Farbe sehr gut, welche den Untertitel noch klarer visuell abhebt (z.B. schwarzer Titel und grauer Untertitel).

Untertitel werden nicht angezeigt?

Das Plugin fügt die Untertitel automatisch ein, in dem die normalen Titel innerhalb des WordPress Loops gefiltert werden. Die Grundvoraussetzung ist deshalb, dass das verwendete Theme die Funktion the_title zur Anzeige der Überschriften verwendet.

Außerhalb des normalen Contents im WordPress Loop werden auch keine Untertitel angezeigt. In der Sidebar, in Navigationsmenüs oder in Footer Widgets fehlen die Untertitel also. Dort wären diese auch meistens unerwünscht.

Support für Custom Post Types hinzufügen

Standardmäßig fügt das Plugin das Eingabefeld für die Untertitel für Beiträge und statische Seiten hinzu. Support für Custom Post Types kann aber mit wenigen Code Zeilen hinzugefügt werden.

function theme_slug_add_subtitles_support() {
    add_post_type_support( 'custom-post-type-slug', 'subtitles' );
}
add_action( 'init', 'theme_slug_add_subtitles_support' );

Gleichzeitig kann das Plugin auch für die Standard Post Types des Cores entfernt werden, wenn Untertitel nur für Beiträge oder statische Seiten gebraucht werden.

function theme_slug_remove_subtitles_support() {
    remove_post_type_support( 'post', 'subtitles' );
    remove_post_type_support( 'page', 'subtitles' );
}
add_action( 'init', 'theme_slug_remove_subtitles_support' );

Hooks und Filter für Theme Entwickler

Das Plugin stellt vielfältige Filter, Hooks und Template Tags für WordPress Entwickler bereit. Damit kann beispielsweise das HTML Markup der Untertitel verändert werden oder die Anzeige auf bestimmte Seiten (z.B. Archive, Kategorien) beschränkt werden.

Eine Übersicht der Möglichkeiten und Code Beispiele befinden sich auf der Github Seite von Subtitles.