Journale wie SPIEGEL und ZEIT formatieren die Überschriften der Artikel nach ähnlichen Standards:
- Dachzeile, englisch Kicker: die Überschrift der Überschrift
- Schlagzeile, englisch Headline: die grosse und fette Überschrift
- Unterzeile, englisch Subline: die "Intro" aus ein bis zwei Sätzen
Nach der Unterzeile folgen
- Autor
- Datum
- Anzahl Kommentare (optional)
- Titelbild
- Text
Zur Abwechslung gibt es auch einen längeren Vorspann, englisch Lead. Aus mehreren Zeilen.
WordPress kennt für Blogposts erst mal nur die Überschrift, den Title.
Für Subtitles ist man auf Plugins angewiesen. Für Dach- und Unterzeilen habe ich kein Plugin gefunden. Mit GeneratePress braucht es das auch gar nicht.
Wir nutzen dafür eigene, individuelle Felder (Custom Fields).
Und diese Felder haken wir mit Hooks ins Layout.
Das Ganze eignet sich hervorragend für klickstarke Kurzfassungen (Excerpts) in Beitragslisten. Am besten gleich als clickable container formatiert, wie in dieser Anleitung beschrieben.
Custom Fields
Die Custom Fields, deutsch: Individuelle Felder, finden sich im Editor, wenn man ganz nach unten scrollt.
Sonst im Punkte-Menü sicherstellen, dass Individuelle Felder aktiviert sind:
Voreinstellungen > Bedienfelder > Zusätzlich
Zurück im Editor, ganz unten:
Den gewünschten Namen für ein neues individuelles Feld angeben.
In unserem Beispiel
- ein Custom Field namens Kicker
- und ein Custom Field namens Subline
Rechts davon die passenden Werte eintragen, z.B.
- Kicker = "GeneratePress Hooks für Custom Fields"
- Subline = "Mehr Information ganz oben, …"
Sind die Felder für einen Beitrag einmal angelegt, stehen sie auch in allen anderen Beiträgen zur Verfügung, um sie mit dort passenden Werten zu belegen.
Hook Elements
Die GeneratePress Elements sind im WordPress Backend doppelt verfügbar. Man kann entweder über das Menü links, in der Gruppe Design, oder direkt in der Kopfzeile darauf zugreifen.
So oder so landen wir bei der Auflistung der eventuell schon vorhandenen Elemente und dem Angebot, ein neues Element anzulegen.
Hier [Neues Element hinzufügen], den Element-Typ Hook auswählen und [Erstellen].
PHP-Code
Der PHP-Code für die Dachzeile, den Kicker ist
<?php
// Custom Field "Kicker" als Dachzeile vor der H1-Überschrift ausgeben.
// Im CSS als Klasse "kicker" formatiert.
$dachzeile = get_post_meta( get_the_ID(), 'Kicker', true );
if ( ! empty( $dachzeile ) ) {
echo '<p class="kicker">' . $dachzeile. '</p>';
}
?>Der PHP-Code für die Unterzeile, die Subline ist
<?php
// Das Custom Field "Subline" als Unterzeile der H1-Überschrift ausgeben
// GP Hook generate_after_entry_line, PHP, Beitrag > Alle Beiträge
// Im CSS als Klasse "subline" formatiert
$unterzeile = get_post_meta( get_the_ID(), 'Subline', true );
if ( ! empty( $unterzeile ) ) {
echo '<p class="subline">' . $unterzeile. '</p>';
}
?>Im WordPress-Backend sieht das Ganze so aus:
Zeilen, die mit // beginnen, gelten in PHP als Kommentarzeilen. Diese dürfen beliebig geändert oder auch gelöscht werden.
Die Namen in einfachen Anführungszeichen, hier 'Kicker' und 'Subline', müssen exakt den Namen der zuvor angelegten, individuellen Felder entsprechen.
Der Name in doppelten Anführungszeichen, hier "kicker" und "subline" definiert die CSS-Klasse, um den ausgegebenen Text zu formatieren.
Dollar-Zeichen markieren in PHP die Namen von Variablen, hier $dachzeile und $unterzeile. Auch diese Namen dürfen geändert werden.
Aber Achtung. Die Variablennamen kommen jeweils zwei Mal vor. Der Name muss identisch bleiben. Sonst am besten lassen, wie sie sind. Es sei denn, wie immer, man weiss genau, was man tut 🙂
Platzierung im Layout
Unter Hook die Platzierung auswählen.
Die Dachzeile soll vor der Überschrift platziert werden, also generate_before_entry_title.
Für die Unterzeile nach der Überschrift: generate_after_entry_title.
Für beide Hooks muss für PHP ausführen der Haken gesetzt sein.
Priorität ist vordefiniert 10.
Mit dieser Einstellung platziert GeneratePress die Dachzeile korrekt. Aber die Unterzeile wird erst nach Datum, Autor eingefügt.
Mit Priorität = 1 ist auch das gelöst und die Unterzeile erscheint wie gewünscht vor Datum, Autor.
Anzeigeregeln
Abschliessend müssen wir noch den Standort unserer Hooks angeben.
Diese Übersetzung von englisch location ist etwas missglückt.
Gemeint sind die Layouts der Website für Seiten und Beiträge.
Denn unter Standort können wir genau angeben, in welche Layouts wir unsere Hooks einhängen wollen, bestimmte Layouts ausschliessen usw.
Für unsere Dach- und Unterzeile wählen wir einfach Beitrag und All Beiträge, klicken auf [Standortregel hinzufügen], fertig.
Die Auflistung der angelegten Hook-Elemente zeigt dann alle wichtigen Einstellungen noch einmal im Überblick.
CSS
Und jetzt noch schnell in die Kosmetik-Abteilung.
Im PHP-Code sind Klassen angegeben. Wenn die im CSS nicht definiert sind, werden die Dach- und die Unterzeile im Standard-Absatzformat ausgegeben.
Um das zu ändern, ist
Design > Customizer > Zusätzliches CSS
der richtige Ort. Dort fügen wir folgenden Code ein:
/* Dachzeile */
.entry-header .kicker {
margin-bottom: 10px;
color: #ff3366;
font-size: 80%;
font-weight: 500;
}
/* Unterzeile */
.entry-header .subline {
margin-top: 15px;
font-weight: 400;
}Hier im CSS beginnen Kommentarzeilen mit /* und enden mit */.
Diese können wie im PHP-Code nach den eigenen Wünschen geändert oder weggelassen werden.
Klassen werden in Stylesheets mit einem Punkt und einem anschliessenden Namen notiert, hier: .kicker und .subline
Die Klassennamen müssen mit dem PHP-Code der Hooks übereinstimmen.
Zwischen den geschweiften Klammern sind dann alle Eigenschaften aufgelistet, die man gerne sieht, passend zum Style Guide der eigenen Website, versteht sich.
Das CSS-Beispiel von oben sieht im Frontend so aus:
Übrigens: Beim Ändern von Zusätzlichem CSS ist es ganz charmant, wie der WordPress Editor rechts eine Vorschau anzeigt. Hier sehe ich direkt, ob meine CSS-Formel greift und zu welchem Ergebnis sie führt.
Nur. Leider. Nicht immer.
Das .subline Beispiel sieht in der Vorschau aus wie die gerenderte Seite.
Das .kicker Beispiel nicht.
Egal, was ich probiere.
Die Vorschau zeigt sich unbeeindruckt.
Erst wenn ich die URL des Posts aufrufe oder rechts oben auf Vorschau in neuem Tab gehe, zeigt sich der gerade formulierte Style in seiner ganzen Pracht.
Aber: ok. Vielleicht habe ja nur ich das noch nicht begriffen. Jeder sachdienliche Hinweis, der zu meiner Erhellung führt, ist herzlich willkommen 🙂
Auf gar keinen Fall ist das ein Grund, zum Classic Editor zurückzukehren oder diese Dach- und Unterzeilen wieder zu vergessen.
Ausprobieren!
Quellen
Wikipedia: Journalistische Darstellungsform
Titelbild: Keine Website ist auch keine Lösung, ZEIT ONLINE 18.05.2018 (Screenshot)
GeneratePress Forum: How to add subtitle below the title of the blog post (Screenshot)
