WordPress: Überschriften mit Untertiteln

In vielen Zeitungen ist es üblich, unter die eigentliche Überschrift noch einen Untertitel zu setzen, um den folgenden Titel näher zu erläutern:

Um ein benutzerdefiniertes Feld zu erstellen geht man zur entsprechenden Box und erstellt unter „Ein neues benutzerdefiniertes Feld hinzufügen:“ ein neues Feld „untertitel„:

… und gibt den gewünschten Untertitel an. Auf der Seite des Autoren war dies schon alles. Natürlich müssen die Templates des benutzten Themes angepasst werden, damit die Untertitel auch an den enstsprechenden Stellen angezeigt werden. Dies erfordert etwas Handarbeit an den Dateien index.php, singel.php und evtl. header.php. Ich möchte die Änderungen exemplarisch am Default-Theme darstellen.

index.php

Die Datei index.php ist für die Ausgabe der (umgekehrt) chronologischen Artikel zuständig.

Folgende Zeilen stellen die Überschrift dar:

15
16
17
18

<div <?php post_class() ?> id="post-< ?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a></h2>
<small>< ?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
</div>

Hier fügen wir die folgenden Zeilen ein (Zeilen 18-23):

15
16
17
18
19
20
21
22
23
24
25
26

<div <?php post_class() ?> id="post-< ?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to < ?php the_title_attribute(); ?>">< ?php the_title(); ?></a></h2>
 
<div class="subtitle">
< ?php
  $subtitle = get_post_meta($post->ID, 'untertitel', $single = true);
  if($subtitle !== '') echo  $subtitle;
?>
</div>
 
<small>< ?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
</div>

Das Ergebnis:

Anpassen des Stylesheets

Schlussendlich muss noch das Stylesheet angepasst werden. Denn das obige Beispiel sieht nicht wirklich schön aus, doch durch eine einfache CSS-Definition in der style.css kann man das leicht ändern.

.subtitle {
	font-weight: bold;
}

Jetzt noch das Datum entfernen, indem man Zeile 25 (s.o.) löscht:

Obwohl dieses Beispiel sehr einfach gestaltet ist, sieht es doch schon sehr gefällig aus und mit etwas Designarbeit wird man ein wesentlich besseres Ergebnis erzielen können.

Weitere Templates ändern

single.php

Die Datei single.php ist für die Darstellung eines einzelnen Artikels zuständig. Zunächst ändern wir das die Datei entsprechend dem obigen Beispiel ab:

19
20
21
22
23
24
25
26
27
28
29
30
31

<div <?php post_class() ?> id="post-< ?php the_ID(); ?>">
<h2>< ?php the_title(); ?></h2>
 
<div class="subtitle">
< ?php
  $subtitle = get_post_meta($post->ID, 'untertitel', $single = true);
  if($subtitle !== '') echo  $subtitle;
?>
</div>
 
<div class="entry">
< ?php the_content('<p class="serif">Read the rest of this entry &raquo;'); ?>
</div></div>

Somit sieht die Darstellung hier genauso aus, wie auf der Hauptseite. Allerdings wird der Untertitel nicht im Titel des Browsers angezeigt:

Um dies zu ändern, muss die Datei header.php angepasst werden. Bisher sieht die Zeile zur Anzeige des Browsertitels so aus:

13

<title>< ?php wp_title('&laquo;', true, 'right'); ?> < ?php bloginfo('name'); ?></title>

Hier wird der Code für den Untertitel eingefügt. Das Ergebnis könnte folgendermaßen aussehen:

13
14
15
16
17
18
19

<title>
  < ?php wp_title('');
    $subtitle = get_post_meta($post->ID, 'untertitel', $single = true);
    if ($subtitle !== '') echo ': ' . $subtitle;
  ?>
  &laquo; < ?php bloginfo('name'); ?>
</title>

… und im Browser so:

Update: In diesem Artikel habe ich beschrieben, wie man den Untertitel auch im Feed unterbringt.