WordPress Formatvorlagen in ein Theme einbauen

Dieser Artikel ist ursprünglich am 11. 12. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Seit der Version 3.1 unterstützt WordPress Post Formats oder Formatvorlagen. Das sind Artikel, die nur aus einem Foto, einem Zitat oder einem Videos bestehen. Sie erscheinen in einem eigenen Design. In diesem Artikel erkläre ich, wie Du Formatvorlagen in Dein Theme integrieren kannst.

Post Formats werden oft mit Custom Post Types verwechselt. Post Formats unterscheiden sich von Custom Post Types dadurch, dass sie eng an den Artikel gebunden sind. Sie sind eigentlich nur Formatierungen innerhalb eines Artikels und keine eigenständige Artikel-Form.

Wer Tumblr oder Posterous kennt, weiß wie das aussieht:

Diese Formate werden von WordPress unterstützt:

  • aside Ein kleiner Content-Schnipsel, üblicherweise ohne Überschrift
  • gallery Eine Bildergalerie
  • link Ein Link zu einer anderen Seite
  • image Ein einzelnes Bild
  • quote Ein Zitat
  • status Eine kurze Statusmeldung, ähnlich wie ein Tweet bei Twitter
  • video Eine Video-Datei
  • audio Eine Audio-Datei
  • chat Ein kurzer Chat-Dialog

Ist das WordPress-Theme entsprechend vorbereitet, erscheint eine Auswahl-Liste mit den Formaten in der Bearbeitungsansicht des Artikels im Backend.

Post Formats über eine if-Anweisung ins Theme einbinden

Ist Dein Theme noch nicht vorbereitet, kannst Du die Funktion manuell in die functions.php eintragen:

add_theme_support('post-formats', array(
'aside', 'chat', 'gallery', 'image', 'link',
'quote', 'status', 'video', 'audio'));

Damit ist die Funktion freigeschaltet. In der Bearbeitungsansicht des Artikels erscheint jetzt das oben gezeigte Menü „Format“.

Damit das Element auch auf der Website angezeigt wird, musst Du in der index.php, single.php oder archive.php noch ein paar Zeilen Code einfügen.
In diesem Beispiel wird ein Bild-Element angezeigt und darunter erscheint der Titel des Beitrags:

if ( has_post_format( 'image' )) {
the_post_thumbnail('large');
echo the_title();
}

Diese Methode hat einen Nachteil: Der Code wird recht lang und übersichtlich, wenn man viele Formatvorlagen im Einsatz hat. Für jede Vorlage braucht es nämlich eine eigene if-Anweisung. Auch kann man die einzelnen Elemente nicht so gut per CSS formatieren.

Formatvorlagen über template_parts ins Theme integrieren

Ein anderer, etwas eleganterer Weg ist der Einsatz von template_parts. Diese Funktion wurde mit der WordPress-Version 3.0 eingeführt und man kann damit eine Datei (Template) wie einen Baustein verwenden.

Ein Beispiel: Im Loop der index.php ist die Datei content.php eingebunden. Sie ist für die Darstellung der Artikel zuständig.

/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;

Quelle: Theme Toolbox Für alle Formatvorlagen existiert eine eigene Datei. Das sind im Prinzip alles Kopien der Datei content.php umbenannt in content-link.php etcIm Theme-Ordner sieht das dann so aus: WordPress Formatvorlagen Je nachdem, welche Formatvorlage Du beim Schreiben des Artikels ausgewählt hast, wird das passende Template aufgerufen und automatisch angezeigt. Jedes dieser Templates kann man nun individuell gestalten. Man kann zum Beispiel die Überschrift weglassen oder Teile per CSS umformatieren. So bekommt jedes Artikelformat ein eigenes Aussehen.

Die Quick & Dirty Variante über CSS

Hier im Blog sehen die Linktipps so aus: Post Format Link Der Titel des Artikels erscheint nicht, der Link wird u.a. durch ein Icon besonders hervorgehoben. Ich habe es so gelöst, dass die h1 (der Titel des Artikels) per CSS ausgeblendet wird (display:none). Dem Link gebe ich in der HTML-Ansicht des Editors eine class=“link“. Die Formatierung habe ich in der style.css festgelegt. Damit das problemlos funktioniert, solltest Du dem div, das den Artikel umschliesst, eine Klasse zuweisen, die der Formatvorlage entspricht. Diese Klasse muss dynamisch erzeugt werden:

<?php post_class(); ?>

Ist das Link-Format ausgewählt wie im Linktipp oben, erzeugt dieser Code automatisch eine Klasse „format-link“. Auf diese Klasse kannst Du Dich dann im Stylesheet beziehen und zum Beispiel die h1 ausblenden: