Steffen Voß - Technologie & Gesellschaft

Tipps & Tricks : So baust Du Dachzeilen in WordPress ein

Screenshot vom Code für die Dachzeilen
Screenshot vom Code für die Dachzeilen

Steffen Voß

Dachzeilen machen es wesentlich einfacher, verständliche, kurze Überschriften zu formulieren. Ein kurzes Stichwort gibt den Rahmen für die eigentliche Überschrift. Obwohl das sehr einfach ist, sind Dachzeilen in den meisten mir bekannten Redaktionssystemen nicht vorgesehen. Für WordPress habe ich mir das jetzt nachgerüstet.

Bislang habe ich für die Dachzeilen hier auf kaffeeringe.de immer einfach die „Eigenen Felder“ genutzt. Ich habe eines „Subtitle“ genannt und das dann im Template aufgerufen. Dafür aber, dass ich inzwischen hunderte Artikel mit Dachzeilen versehen habe, war das aber immer ein Provisorium.

Das herbstliche Urlaubswetter im Urlaub hat mir die Zeit gegeben, dieses Provisorium mal permanent zu machen: Ich habe das Eingabefeld für die Dachzeile fest in das Formular für neue Beiträge eingebaut, an der richtige Stelle: Über der Überschrift. So kann ich jetzt gleich sehen, ob Dachzeile und Überschrift zusammen funktionieren.

Ich weiß, dass es dafür auch Plugins gibt. Ich bin bei meiner Lösung mit ein paar Zeilen Code ausgekommen. Dafür muss ich mir kein Plugin installieren.

1. function.php

In der function.php meines Themes habe ich zwei Funktionen eingefügt. Die erste Funktion zeigt das zusätzliche Formfeld über der Überschrift an. Die zweite Funktion speichert die Eingabe und aktualisiert das „Eigene Feld“. Der Inhalt wird also so gespeichert, dass es auch noch funktioniert, wenn ich mal das Theme wechsel. Ich könnte dann wieder einfach das Formular für die „Eigenen Felder“ nutzen.

1
2
3
4
5
6
7
8
9
10
11
12
// Subtitles
function subtitleAddToForm($post_ID) {
  $customfields = get_post_custom_values('subtitle', $post_id);
  echo '<label id="subtitle-prompt-text" class="screen-reader-text" for="subtitle">Dachzeile</label>';
  echo '<input id="subtitle" spellcheck="true" autocomplete="off" name="subtitle" size="30" type="text" value="'. esc_attr( $customfields[0] ) .'" placeholder="Dachzeile" />';
}
add_action( 'edit_form_top', 'subtitleAddToForm', $post_ID);

function subtitleUpdate($post_ID){
  update_post_meta($post_ID, 'subtitle', trim($_POST['subtitle']));
}
add_action('save_post', 'subtitleUpdate', $post_ID);

2. Templates

Im Header setze ich dann Dachzeile und Überschrift zusammen, damit der Seitentitel richtig ist:

1
2
3
4
5
6
7
8
9
10
$subtitle = get_post_meta($post->ID, 'subtitle', true);
<title><?php $title = wp_title('',false);
if ($title && is_single()) {
  $subtitle = get_post_meta($post->ID, 'subtitle', true);
  if ($subtitle) { echo $subtitle. ": "; }
    echo($title);
  } else {
    echo($title);
  }
?></title>

In den Templates für die index.php, die single.php und die page.php sieht es so aus, dass ich Dachzeile und Überschrift in das gleiche h2-Tag oder h3-Tag setze, die Dachzeile per span absetze und den Doppelpunkt dazwischen ausblende.

1
2
3
4
5
6
7
$subtitle = get_post_meta($post->ID, 'subtitle', true);
<h2>
  <a href="<?php the_permalink(); ?>" rel="bookmark" title="Link auf <?php the_title_attribute(); ?>">
    <?php if ($subtitle) {?><span class="subtitle"> <?php echo $subtitle; ?> <span class="hide">:</span></span> <?php } ?>
    <?php the_title(); ?>
  </a>
</h2>

3. CSS

Ohne Formatierung steht dann da: „Dachzeile: Überschrift“. Das CSS macht das dann schön:

1
2
3
4
5
6
7
.subtitle {
  display: block;
  font-size: .7em;
}
.hide {
  display:none;
}

Ich hoffe, diese Lösung gefällt Dir. Wenn ja – sag es weiter:

Kommentare

Abbc
Abbc:

Funktionsnamen sollten meines Wissens nach immer mit Verben beginnen. Also statt subtitleAddToForm -> addSubtitleToForm. Weil Funktionen immer etwas tun.

14.8.2017 um 12:23
Steffen Voß
Steffen Voß:

Danke für den Hinweis! Da lern ich auch noch etwas 😉

Außerdem hat mich Lars auf Twitter darauf hingewiesen, dass Dachzeilen eher „overline“ oder „kicker“ heißen. Ich hab den Begriff „Subtitle“ schon immer komisch gefunden. Ich hab ihn aber vor bestimmt 10 Jahren als plausibelste Übersetzung im Netz gefunden und seither überall benutzt. Mir war dann auch egal, wie die Variable heißt… 😉

14.8.2017 um 15:12

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?