Kommentare 21

WordPress 3.1 Artikel Formatvorlagen im Theme einrichten – so funktioniert’s

Es gibt verschiedene Lösungsansätze, um die neuen, Tumblr-ähnlichen Formatvorlagen (Post Formats) in einem WordPress-Theme umzusetzen. Im bereits vorgestellten WordPress Blank-Theme “Toolbox” werden die Formate mit hilfe der WordPress-Funktionen get_template_part und get_post_formats aufgerufen.

Diese Vorgehensweise ist meiner Ansicht nach sehr übersichtlich. Außerdem ist es leicht, die Artikelformate anschließend individuell zu gestalten, da man für jedes Format eine eigene Template-Datei im Theme-Ordner anlegt (z.B. content-link.php, content-chat.php usw.). Im folgenden Artikel habe ich noch einmal kurz alle benötigten Schritte zusammen gefasst, um die post Formats in einem Theme einzubinden.

1. Die Artikelformate im Theme unterstützen

Im ersten Schritt musst du die Artikel-Formatvorlagen Option in deinem Theme zur Verfügung stellen. Dazu fügst du folgenden Code in deine functions.php Datei ein:

/**
 * Add support for the Aside and Gallery Post Formats
 */
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'quote', 'video', 'image', 'status', 'chat', 'audio' ) );

Möchtest du nicht alle Formate nutzen, löscht du die entsprechenden Bezeichnungen einfach aus dem Code-Schnipsel. Anschließend kannst du im Admin-Bereich des Artikels die Artikel-Formatvorlagen in einem extra Feld auswählen. In der deutschen Sprachversion heißen die Formatvorlagen dann übrigens Standard, Kurzmitteilung, Galerie, Link, Zitat, Video, Bild, Statusmitteilung, Chatprotokoll und Audio.

2. Unterschiedliche Artikel-Formatvorlagen anlegen

Nachdem die Artikel-Formate unterstützt werden, musst du sie natürlich auch noch in deinen Theme-Dateien individuell anlegen. Schließlich sollen die Formatvorlagen ja unterschiedliche Informationen ausgeben können und auch optisch individuell gestaltet sein. Ich finde es daher sehr sinnvoll, wie im Toolbox-Blank Theme eigene Template-Dateien für die Formatvorlagen anzulegen.

Dein ganz normales Standard-Artikelformat legst du in der Template-Datei content.php an. Dort fügst du den Post-Div mit den gewünschten Inhalten an (z.B. Titel, Content, zusätzlichen Angaben zum Datum, der Anzahl der Kommentare, dem Autor, Kategorien, Schlagwörter etc.).

Um die Ausgabe eines weiteren Artikel-Formats, z.B. dem Link-Format zu bestimmen, legst du jetzt eine weitere Template-Datei namens content-link.php an. Am einfachsten ist es, du kopierst einfach die content.php Datei und gibst der Datei einen neuen Namen.

Dann kannst du in der neuen content-link.php Datei bestimmen, welche Informationen du für deine Link-Tipps Artikel anzeigen möchtest und auf welche du verzichten willst. Da es sich bei den Links ja um kurze Artikel in Form einer Notiz handelt, kannst du z.B. auf die Ausgabe von Schlagwörtern (tags), Autoren-Infos oder die Anzahl der Kommentar bzw. die Angabe “Kommentare sind deaktiviert” verzichten.

WordPress Post Formats Anleitung

So sieht die Gestaltung des Artikel-Formats Link auf dem Elmastudio-Blog aus.

Hinweis

Wichtig ist, dass du immer die Angabe der Post-CSS Klasse post_class integrierst, denn nur so werden die CSS-Klassen für Artikel-Formate automatisch von WordPress ausgegebenen, und du kannst deine Artikel-Formatvorlagen im Stylesheet (z.B. mit .format-link) entsprechend bestimmen.

3. Post Formats im Loop aufrufen

Hast du deine Format-Template Dateien (content-link, content-gallery.php etc.) fertig angelegt, musst du jetzt nur noch im Loop bestimmen, dass auch immer das entsprechende Format des Artikels aufgerufen wird.

Dazu kannst du die WordPress-Funktionen get_template_part und get_post_format nutzen. In der index.php, category.php oder archive.php Datei rufst du also mit Hilfe des folgenden Codes im Loop die Post Formats auf, falls diese vorhanden sind:

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>					
	<?php get_template_part( 'content', get_post_format() ); ?>
<?php endif; ?>

Falls keine Template-Dateien angelegt sind, wird das Standard-Artikelformat content.php verwendet.

Wichtig ist also, dass die Angaben für die Artikel im Admin-Bereich trotz unterschiedlicher Artikelformaten gleich bleiben. So kann gewährleistet werden, dass auch bei einem Theme-Wechsel die Blog-Artikel noch alle wichtigen Informationen und Daten enthalten und diese auch angezeigt werden können (z.B. falls das neue Theme die Artikel-Formatvorlagen noch nicht unterstützt). Welche Informationen im Theme angezeigt werden und welche nicht, kannst du dann als Theme-Autor über die entsprechenden Template-Dateien content-link.php etc. individuell festlegen.

Die CSS-Klassen der Artikel-Formatvorlagen

Außerdem ist über die CSS-Klassen .format-link, .format-gallery usw. ein individuelles Styling der Artikel-Formate möglich. Auf diese Weise kannst du deine Artikelformate dann z.B. mit Hilfe von Icons, unterschiedlichen Farben, Schriftgrößen oder Schriftstilen unterscheiden. Hilfreiche Inspirationen dazu haben wir bereits im Artikel “Design-Inspirationen für Artikel-Formatvorlagen (Post Formats) in WordPress 3.1″ zusammen gestellt.

Wie gefällt dir die neue Funktion der Artikel-Formatvorlagen? Hast du noch mehr Tipps, Fragen, oder kennst du weitere interessante Artikel und Anleitungen zur Umsetzung der Post Formats? Über dein Feedback und deine Tipps freue ich mich sehr!

21 Kommentare

  1. Mmmh, da muss man sich aber schon ein bisschen “reinfuchsen”.
    Hab mir den Artikel auf jeden Fall mal gebookmarked. ;)

    Möchte dieses Jahr mal ein komplett eigenes Theme erstellen, da sind die Formatvorlagen sicherlich hilfreich.

    • Hallo Nico,

      vielen Dank für dein Feedback :-) Wenn du die Artikel-Formate in dein Theme einbinden möchtest, kann ich dir auf jeden Fall das Toolbox-Theme als Grundlage für dein eigenes Theme sehr empfehlen. Es ist meiner Ansicht nach sehr übersichtlich strukturiert und ohne viel “schnick schnak” auf gebaut :-) Die Post Formats kannst du bei Toolbox super einrichten und es ist gar nicht so kompliziert :-)

      Das richtige Design und die CSS-Styles zu finden ist natürlich schon etwas aufwendiger, aber ich denke es lohnt sich auf alle Fälle :-)

      Viele Grüße,
      Ellen

  2. Cloud

    Ok, dass mit den eigenen Templates kannte ich so noch nicht. Ich habe in der loop.php mit “if ( has_post_format( ‘aside’ ))…” gearbeitet. So sind es weniger Daten, aber diese Lösung hier ist natürlich viel übersichtlicher…

    • Hallo Cloud,

      ja stimmt, dein beschriebener Lösungsansatz ist auf jeden Fall auch möglich. Die Idee eigene Templates zu erstellen funktioniert ist denke ich dann besonders hilfreich, wenn du viele Formatvorlagen mit unterschiedlicher Gestaltung in dein Theme einbinden willst.

      Der Artikel “Smarter Post Formats” von Dougal Campbell ist zu diesem Thema übrigens auch super hilfreich :-)

      Viele Grüße,
      Ellen

  3. Ja, diese Postformats machen das schön einfach verschieden Templates zu haben, und dabei kann man dennoch viele Kategorien haben!

    Mit den CSS Klassen ist es auch sehr einfach, das hab ich schon ausprobiert, vor allem gut, weil, wenn man was nicht definiert auf die normale Klasse zurückgegriffen wird!

    Jedoch bei Toolbox, hab ich das mit diesen HTML5 oder so noch nicht ganz raus :D

    • Hallo Chrissy,

      vielen Dank für dein Feedback und deinen Erfahrungsbericht. Ja, wir wollen in den nächsten Tagen auf alle Fälle auch noch die Post Formats für Elmastudio umsetzen. Und wie du ja auch beschrieben hast, eigentlich ist es gar nicht so schwierig, wenn man sich erst einmal die Übersicht verschafft hat :-)

      Über HTML5 werde ich glaube ich in den nächsten Tagen auch noch einen Artikel machen, da ich mich hier auch gerade etwas mehr einarbeite. Kennst du die Webseite HTML5 Doctor? Das Glossar dort finde ich sehr hilfreich :-)

      Viele Grüße,
      Ellen

    • Hallo Jan,

      vielen Dank für dein nettes Feedback, es freut mich, dass dir der Artikel gefällt :-) Den LifeWriter habe ich leider selbst noch nie genutzt, daher habe ich da keine Erfahrungen. Weiß eventuell jemand anderes mehr?

      Viele Grüße,
      Ellen

  4. Hallo Ellen! Toll, Euer ganzer Auftritt. Habe als WordPress-Anfänger schon viel von Euren gefilterten Tipps gelernt.
    Meine Frage: Ich möchte die Artikelformate für eine Pinwand benutzen, sodass für den jeweiligen Artikel ein individuelles “Zettel-Format” ausgewählt werden kann. Meine Frage: Kann man den Formatvorlagen auch andere Namen als ‘quote’, ‘video’, ‘image’, ‘status’ etc. geben?
    http://www.lindnerbettina.de/seminarhaus/?page_id=1133
    Herzliche Grüße! Bettina

  5. Alex

    Hi,

    ich versuche mir im Template den Link zum Archiv der jeweiligen Formatvorlage ausgeben zu lassen. Leider bekomme ich mit

    nur den Namen ohne Link zum Archiv.

    Hat jemand Rat?
    Vorab vielen Dank, alex

  6. Hi Ellen,
    super Artikel – ich muss dir dafür danken. Habs gut hinbekommen, auch wenn es etwas kniffelig ist.. Habs aber gut hinbekommen. Großes Dankeschön! Ich arbeite immer mehr mit WordPress. Eigenprogrammiertes ist noch lange nicht so ausgepfeilt wie WordPress..

    Sag mal, hast du einen Aritkel über das Gestalten von Kommentaren?

    Gruß, Sam :)

  7. Michael

    Hallo Ellen,

    irgendwie will das bei mir nicht funktionieren. Ich habe eine neue Vorlage erstellt und die Anpassung in der function.php vorgenommen. Aber beim Erstellen eines neuen Artikels steht die Formatvorlage nicht zur Auswahl. Theme: TwentyTwelve

  8. Olli

    Hallo Ellen,

    gibt es auch die Möglichkeit eigene Vorlagen zu erstellen?
    Zum Beispiel anstelle von Galerie noch eine Vorlage für “Galerie Slider” o.ä.

    Bisher löse ich dies über “Custom Fields” – würde aber keine Einwände für selbst definierte Formatvorlagen haben – im Gegenteil.

    Viele Grüße
    Olli

Schreibe eine Antwort