GeneratePress Hooks für Custom Fields

Überschriften in journalistische Form bringen – mit Kicker und Subline

Mehr Information ganz oben, vor und nach dem Titel, das stärkt den Antritt von WordPress-Blogposts (und ist ohne Extra-Plugin leicht umsetzbar)

Titel in journalistischer Form, Beispiel ZEIT (Screenshot)
Titel in journalistischer Form, Beispiel ZEIT (Screenshot)

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.

Der entscheidende Tipp vom GeneratePress Support: Elements > Hook !!!

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.

Elements > Element-Typ > neuen Hook erstellen

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:

Dem Hook-Element einen Namen geben, den PHP-Code einfügen und anpassen.

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.

Den Hook platzieren, PHP ausführen lassen, optional die Priorität ändern

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.

Unter Anzeigeregeln > Standort in alle Beiträge einhaken

Für unsere Dach- und Unterzeile wählen wir einfach Beitrag und All Beiträge, klicken auf [Standortregel hinzufügen], fertig.

Auflistung der selbst definierten Hook-Elemente

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:

Beispiel für die Formatierung der Titelzeilen im CSS

Ü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)

Autor von generateCLICKS, Gründer und Chef der Web-Agentur whkmedia. Wenn Wolfram sich nicht mit Websites und YouTube-Kanälen beschäftigt, ist er mit seiner Frau im Multivan unterwegs oder auf der Suche nach einem Espresso und einer knusprigen Laugenbrezel.