Kommentare 43

Flexibleres Bloggen durch Artikel-Formate (Post Formats) in WordPress 3.1

In den nächsten Tagen soll die neue WordPress-Version 3.1 veröffentlicht werden. Ein ganz besonderes Highlight für WordPress Theme-Designer bei diesem Update ist das neue Post Formats Feature, in der deutschen WordPress-Version (Artikel)-Formatvorlagen genannt. Vielen Blog-Fans ist die Unterteilung von Artikeln in verschiedene Formate bestimmt bereits vom Blog-System Tumblr bekannt. Bei Tumblr kann man schon lange Artikel als Text, Zitat, Bild, Video etc. markieren. Die Artikel werden dann mit Hilfe von CSS unterschiedlich gestylt.
Die Tumblr-Funktion ist so beliebt, dass man inzwischen den Ausdruck “tumblr-like blogging”, also Bloggen im Tumblr-Stil mit den unterschiedlichen Artikel-Formaten verbindet. Und ab WordPress 3.1 können auch WordPress-Blogger von dieser flexibleren Art des Bloggens profitieren. Hier also ein erster Vorab-Einblick in das praktische, neue WordPress-Feature.

1. Die Artikel-Formate im Überblick

  • Standard: Das Standard-Format von Artikeln, wie bisher gewohnt.
  • Aside: Eine Nebenbemerkung oder Notiz, gewöhnlich ohne die Artikel-Überschrift angezeigt.
  • Gallery: Ein Artikel mit Bildergalerie. Matt Mullenweg nutzt dieses Post Format bereits auf seinem Blog und verwendet Gallery-Posts im Sinne eines Fotoalbum (ähnlich wie Flickr-Alben).
  • Link: Ein Link auf eine andere Seite.
  • Image: Ein Artikel aus einem einzelnen Bild.
  • Quote: Ein Zitat, im HTML mit blockquote markiert oder alternativ ein Artikelinhalt als Zitat, der Titel kann die Zitatquelle oder der Autor des Zitats sein.
  • Status: Eine kurze Statusmeldung, ähnlich wie die 140-Zeichen Nachricht bei Twitter.
  • Video: Ein Artikel bestehend aus einem Video.
  • Audio: Ein Audio-Datei mit Player.
  • Chat: Eine Gesprächsprotokoll, ähnlich wie bei Google Buzz oder Skype-Chat.

Die Auswahl eines Artikel-Formats kannst du während des Schreibens eines Artikels im Adminbereich durch Anklicken eines Radio-Buttons in einem extra Feld bestimmen.

WordPress 3.1 Post Formats
In diesem Bespiel ist das Artikel-Format “Aside” ausgewählt.

Die Eingabe der Artikel-Inhalte ändert sich durch die neuen Post Formats nicht. Es müssen weiterhin Titel etc. ausgefüllt werden. Der Theme-Autor kann dann in seinem Theme selbst bestimmen, ob alle Inhalte auch wirklich angezeigt werden sollen. Beim Artikel-Format Link kann z.B. auf die Ausgabe der Artikel-Überschrift verzichtet werden, da das Artikel-Format Link ja nur eine kurze Mitteilung eines intereressanten Links sein soll.

Wichtig: Die Post Formats sind mit Absicht in die oben aufgeführten Formate unterteilt. Es ist nicht angedacht, diese Formate zu individualisieren und eigene hinzuzufügen. Nur so kann es gewährleistet werden, dass ein Theme kompatibel mit anderen Themes bleibt.

2. So kannst du die Post Formats in ein Theme integrieren

Die Einbindung der neuen Artikel-Formate in einem WordPress-Theme ist eigentlich ganz einfach. Als erstes fügst du folgende Funktion in die functions.php Datei des Themes ein:

// Support Post Formats.
	add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat',  ) );

Du musst natürlich nicht alle Post Formats unterstützen. Alle Formate, die du für dein Theme nicht verwenden möchtest, löscht du einfach aus dem Code-Schnipsel.

CSS-Klassen für Artikel-Formate

Nachdem du den Code in deine functions.php eingefügt hast, kannst du die unterschiedlichen Formate beim Schreiben eines Artikels im Admin-Bereich bereits auswählen. Den Artikeln wird dann automatisch eine entsprechende CSS-Klasse im Format .format-gallery (bzw. format-link, format-aside etc.) zugewiesen. Dazu musst du allerdings darauf achten, dass dein Theme die Funktion post_class im Code verwendet, der den Post umschließt.

WordPress 3.1 Post Formats
Die post_class Funktion in der loop.php Datei von TwentyTen.

Den angezeigten Inhalt der Artikel-Formate bestimmen

Im WordPress-Loop, der ja für die Darstellung der Artikel deines Blogs sorgt, musst du jetzt noch bestimmen, wie die verschiedenen Artikel-Formate angezeigt werden sollen. In einem Artikel des Formats “aside” (also einer Notiz oder Nebenbemerkung) kannst du z.B. auf die Integration der Überschrift (the_title) verzichten. In einem Gallery-Post möchtest du eventuell auf die Anzeige des Datum und des Autors verzichten usw.

Dazu öffnest du jetzt die loop.php Datei deines Themes. Über die Funktion has_post_formats und einem PHP if-Statement, kannst du dann deine Bedingungen für die unterschiedlichen Formate festlegen. Hier ein Code-Beispiel:

if ( has_post_format( 'aside' )) {
				echo the_content();
			}

			elseif ( has_post_format( 'chat' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

Auch in der loop.php Datei des Standard-Theme TwentyTen wird die Funktion has_post_format bereits genutzt. Hier stehen aside-Posts und gallery-posts zur Verfügung.

Die Artikel-Formate gestalten

Ein schönes Beispiel für die Verwendung von Link-Posts, kurzen Notiz-Artikeln oder Bildergalerie-Artikeln kannst du dir z.B. auf dem Blog von Matt Mullenweg anschauen.

WordPress 3.1 Post Formats
Matt Mullenweg nutzt Thumbnails für die Darstellung einer Bildergalerie auf seines Blog.

Jede Menge Inspirationen für das Gestaltung verschiedener Artikel-Formate findest du natürlich auch bei den vielen Tumblr-Themes. Ein tolles Beispiel ist z.B. das sehr beliebte Tumblr-Theme Solaris.

WordPress 3.1 Post Formats
Styling der Artikel-Formate mit Icons und unterschiedlichen Farben von Solaris.

WordPress 3.1 Post Formats
Auch im Lightweight Tumblr-Theme werden Artikel mit Icons markiert.

Eine Übersicht aller Themes gibt’s im Tumblr Theme Garden.

Weitere Artikel über Post Formats in WordPress 3.1

Wie gefällt dieser dieses neue WordPress-Feature für die bald zur Verfügung stehende WP-Version 3.1? Denkst du, dass du die Formate in deinem Blog nutzen wirst und kannst du dir vorstellen, dein Theme mit den neuen Formaten und entsprechendem CSS-Styles auszustatten? Über dein Feedback und weitere Tipps zu den neuen Post Formats in WordPress 3.1 freue ich mich sehr!

Übrigens, wenn du die Beta-Version WordPress 3.1 Release Candidate 4 schon vorab auf einer WordPress-Testinstallation ausprobieren möchtest, kannst du dir einfach das WordPress Beta Tester-Plugin installieren.

43 Kommentare

  1. Hallo Ellen,

    klingt ja echt interessant, alles wird man sicherlich nicht benötigen aber wenn man nur mal ein Video oder Bild posten will oder halt einen Link, ist das echt ne coole Lösung. So wird der Blog dann auch viel flexibler.

    Werde mich gleich mal bei Tumblr umschauen, mal sehen, was es da so gibt.

    • Hallo Frank,

      vielen Dank für dein Feedback, ja, es kommt sicher immer auf das jeweilige Theme an, welche der Post Formats man nutzen möchte. Toll, ist die neue Funktion dann sicher auch, für speziellere Themes, z.B. Musik- oder Video-Themes :-)

      Bei Tumblr gibt es wirklich bereits tolle Beispiele, wie man das Design der Formate umsetzen kann. Wir werden dazu auch noch einmal einen Follow-up Artikel machen :-)

      Viele Grüße,
      Ellen

    • Hallo Gerhard,

      ja, ich freue mich auch schon sehr auf dieses Update! Ich denke, dass Bloggen mit WordPress durch die verschiedenen Formate einfach sehr viel flexibler und optisch noch ansprechender wird :-)

      Viele Grüße,
      Ellen

  2. Wow! Na dann freue ich mich mal auf WP 3.1.
    Ich kannte diese Funktion noch nicht, da ich kein Tumblr nutze – Aber das dürfte für viele Blogs eine sehr wichtige Neuerung sein.
    Sobald ich auf WordPress 3.1 update, werde ich dies auch integrieren und zummindest für einen Teil der Möglichkeiten eigene Styles definieren. Am wichtigsten erscheint mir im Moment “Image”, “Quote” und “Status”…

    • Hallo Stefan,

      vielen Dank für deinen Kommentar. Ja, bisher sind unterschiedliche Artikel-Formate vor allem bei Tumblr sehr beliebt. Ich finde es auch klasse, dass die Integration der Formate recht einfach ist und jeder sein Theme-Design dann entsprechend anpassen kann. Neben Bildern, Zitaten und Statusmeldungen freue ich mich auch sehr auf die Formate: Bildergalerie und Links :-)

      Viele Grüße,
      Ellen

      • Ich habe jetzt beschlossen, auf meinem Blog nur das Format “Zitat” zu verwenden. So kann ich einzelne Zitate ohne großes Statement auf dem Blog posten und sie sind ein bisschen vom Rest abgehoben.
        Die zusätzlichen Formate benötige ich nicht wirklich – Außerdem wird es verwirrend, wenn ich zu viele verschiedene Artikeltypen auf einmal einführe…

  3. Hi Ellen,
    danke für den, wie immer, höchst informativen Überblick!
    So richtig interessant werden die Post-Formate m.E. ja erst in Kombi mit einem Frontend-Editor, wie z.B. im P2-Theme (http://p2theme.com/).
    Wobei ein Frontend-RichText-Editor vielleicht noch interessanter im Sinne der Benutzererfahrung wäre. Steht seit längerem auf meinem Plugin-schreiben-Zettel, müsste mir nur endlich mal die Zeit dafür nehmen… Ach, Zeit!

    • Hallo Caspar,

      vielen Dank für deinen Kommentar. Stimmt, die Idee eines Frontend-Editors passt auf jeden Fall auch klasse zum Konzept der Post Formats.

      Ich finde es auch klasse, wie viele Möglichkeiten die neuen Formate bieten, man kommt gleich auch jede Menge neue Ideen. Persönlich freue ich mich auch ganz besonders auf die neuen Design-Optionen und darauf, dass unterschiedliche Artikel-Formate einen Blog meiner Ansicht nach sehr viel lebendiger machen können :-)

      Viele Grüße,
      Ellen

    • Hallo Wolfgang,

      vielen Dank für dein Feedback zum Artikel :-) Ja, ich bin auch schon sehr gespannt und freue mich schon auf die tollen, neuen Gestaltungsmöglichkeiten. Auch für spezielle Themes passen die Formate super, vor allem da man ja selbst wählen kann, welche man im Theme anbietet.

      Viele Grüße,
      Ellen

  4. Sehr schön recherchiert und erklärt!

    Ich nehme an, dass die finale Version des neuen TwentyTen-Themes schon für die Verwendung aller Formate vorbereitet ist. Die Version 1.2 unterstützt ja bisher nur Standard, Aside und Gallery.

    • Hallo Matthias,

      vielen Dank für dein nettes Feedback zum Artikel :-)

      Wie jottlieb von WordPress Deutschland ja auch schon bestätigt hat, wird das TwentyTen vorerst nur Standard, Gallery und Aside (oder doch Status, ich bin mir auch nicht 100% sicher?) unterstützen. Natürlich können weitere Formate immer noch selbst hinzugefügt werden, und bestimmt werden die Optionen auch in TwentyTen mit der Zeit noch erweitert.

      Viele Grüße,
      Ellen

    • Hallo Eva,

      ja, ich denke auch, dass die Post Formats besonders für die Theme-Designer eine tolle, neue Option sind. Ich freue mich auch schon sehr auf jede Menge Themes mit schönen Artikel-Stylings :-)

      Viele Grüße,
      Ellen

  5. Kann man denn auch nur einen bestimmten Posttype anzeigen? Ich stelle mir vor, dass man ins Menü klickt und dann z.B. nur alle Galerie- oder alle Link-Einträge sieht.

    Interessant wäre auch zu wissen, wie es sich entwickelt, bestimmte Post-Types weiterzustricken, z.B. das nur die Twitter-ähnlichen Meldungen auf Twitter exportiert werden. Da gibts bestimmt 1000 Ideen

    • Hallo Andi,

      ich bin mir nicht sicher, ob es im Adminbereich bereits eine Filterfunktion für die neuen Formate geben wird. In der Artikel-Übersicht werden die jeweiligen Formate aber auf alle Fälle angezeigt. Im Frontend des Themes kann man diese Option dann auf alle Fälle auch selbst integrieren, wenn man das Theme etwas anpassen würde.

      Die Möglichkeit Twitter-Meldungen mit WordPress Link-Artikeln oder Statusmeldungen zu verknüpfen hört sich klasse an, vielleicht wird es ja bald ein Plugin für so eine Option geben. Ich denke auch, dass es jede Menge tolle Möglichkeiten gibt, die Post Formats zu nutzen :-)

      Viele Grüße,
      Ellen

  6. Im TwentyTen von WP 3.1 sind bisher nur drei der Post Formats unterstützt (Standard, Galerie und Status glaube ich).

    In der deutschen Version von WordPress werden sich die Post Formats übrigens “(Artikel)-Formatvorlagen” nennen.

    • Hallo jottlieb,

      vielen Dank für deinen Kommentar und deine weiteren Infos zu den Post Formats. Ich hab den offiziellen Namen »(Artikel)-Formatvorlagen« für die deutschsprachige Version auch noch im Artikel mit angegeben.

      Jetzt kann ja das 3.1 Release kommen, ich freue mich wirklich schon sehr auf das Update :-)

      Viele Grüße,
      Ellen

  7. Na das wird ja spannend :)

    Übrigends: ich lese eure Beiträge seit einiger zeit regelmäßig. Dabei muss euch nicht mal abspeichern, weil ich ständig über Google auf euren Blog stoße 8-)
    Ich recherchiere täglich über Web-Themen. Und Elmastudio ist ziemlich oft ganz oben (1-3) bei Google zu finden. Der empfohlene Artikel ist meistens auch das Ende der Recherche ;)

    Weiter so!!

    • Hallo Jonathan,

      vielen Dank für dein tolles Feedback, es freut uns sehr, dass dir die Beiträge hier auf dem Blog so gut gefallen :-) Und das unsere Artikel sogar schon recht oft über Google gefunden werden können, ist natürlich auch echt klasse.

      Viele Grüße,
      Ellen

  8. Sascha

    Super Artikel. Vielen Dank.
    Was mir allerdings noch nicht ganz klar ist, ist der Unterschied zu Custom Post Types. Kann mir das jemand kurz und knap zusammenfassen ??

    Gruss Sascha

    • @Sascha:
      Die Post Formats regeln nur mehr oder weniger das Styling normaler Artikel im Blog.
      Mit Custom Post Types kannst du direkt eigene Artikel- oder Seitentypen mit eigenen Kategorien oder Tags erstellen, welche unabhängig von den normalen Artikeln oder Seiten erscheinen.

    • @Sascha als Nachtrag zu jottliebs Erklärung:

      Stell Dir die normalen Artikel in WP einfach als Autos vor.
      Post Formats sind dann sowas wie verschiedene Fahrzeugklassen: Kleinwagen, Kombi, Limousine, Pickup, Lastwagen usw. – sehen komplett verschieden aus in Form, Farbe und Größe, und sind trotzdem alles Automobile.

      Custom Post Types bieten hingegen, wie jottlieb bereits sagte, die Möglichkeit, völlig andere Inhaltstypen als die üblichen Artikel mit ihren Kategorien und Tags zu kreieren. Sie erscheinen dann auch nicht im Artikel-Query, sondern benötigen eine eigene Abfrage im Template.
      Wenn die normalen Artikel in WP unsere Autos sind, die sich mit Hilfe der Post Formats klassifizieren und stylen lassen, dann können Custom Post Types eben alles andere sein als Autos – also z.B. Milchtüten, Hosen, Regenschirme oder Kohlrabiknollen.

  9. Die Info kommt genau rechtzeitig! Ich bin gerade dabei meinen Blog neu zu stylen und habe vor ein paar Kategorien etwas abzugrenzen. Da kommt mir das echt sehr gelegen :)

    Ich denke mal, dass es ja nur ein Eintrag in der functions.php ist, wenn man noch eigene Formate hinzufügen möchte oder Irre ich mich da?

  10. Sandra

    Hui, da freue ich mich aber schon besonders darauf. Mich hat das immer ein wenig gestört, dass man bei WordPress beim Thema Artikel sehr eingeschränkt war und das Design bei Posts mit umständlichen if else-Schleifen ändern musste.

  11. Hallo Ellen,
    bin durch google auf deinen Blog gestossen und auf diesen Artikel. Erstmal danke für die vielen interessanten Artikel. Zu diesem hier hab ich eine eventuell ganz dumme Frage, sorry (ich bin totaler WordPress Anfänger): den Screenshot ganz oben wo man die Post-Categories auswählen könnte finde ich so nicht in meinem Backend. Was muss ich tun? Liegt es daran, dass ich mein Theme noch nicht wie von dir beschrieben bearbeitet habe? Ich habe gestern auf WP 3.1 erneuert, aber im “Artikel”-Editor erschienen keine neuen Optionen. Hab ich da was falsch verstanden?

    Dankeschön!

    Hintergrund: ich will eine Seite mit relativ vielen Videoverwesen/Galerien erstellen und so wäre dieses neue Feature willkommen zwischen normalen Posts/VideoPosts/FotoPosts etc zu sortieren oder unterschiedlich weiterzuverarbeiten…

  12. Vielen Dank für diesen Artikel. Ich bin jetzt endlich auch dazu gekommen, die Artikel-Formate in mein Theme einzubauen.
    http://www.wlabs.de/blog/micro
    Wie Andi oben schon erwähnt hat, wäre es sehr interessant, wenn man die Artikel im Frontend auch einfach nach dem Format sortieren könnte.

    Und was mir noch nach einigen Recherchen aufgefallen: Die Artikel-Formate sind ganz normale Taxonomien wie Tags und Kategorien, aber sie lassen sich dennoch nicht in Custom Post Types einbauen.
    Hier besteht noch etwas Nachholbedarf für die Zukunft.

    Aber ansonsten eine gute und hilfreiche Funktion.

  13. Hallo Ellen,

    welchen Vorteil habe ich, wenn ich von Tags auf Custom Post Types bzw. Custom Taxonomies umsteige?

    Aktuell tagge ich auf meinem Film-Blog http://www.mojoba.de Filme mit “Regisseure”, “Schauspieler” und “Stimmung”.

    Das kannst du dir in der rechten Sidebar unter “Filmtipps sortiert” anschauen.
    Die URLs habe ich mit “Custom Permalinks” entsprechend angepasst.

    Deine Antwort würde mich sehr freuen.

    Viele Grüße
    Lucien

    • Hallo Lucien,

      Custom Post Types sind noch einmal eine etwas andere Sache als die hier vorgestellten Post Formats. Hier kannst du mehr nachlesen:
      http://www.elmastudio.de/tag/custom-post-types/

      Du könntest also z.B. mit Hilfe der Custom Post Types ein eigenes Format für Filmbesprechungen anlegen. Da es in deinem Blog ja aber bereits speziell um Filme geht, ist das eigentlich ja nicht nötig, da du deine normalen Artikel ja schon entsprechend anlegen kannst :-)

      Viele Grüße,
      Ellen

  14. Nic

    Danke für den Artikel. Ich “kämpfe” seit Tagen damit, meinem Blog “Post Formats” beizubringen. Bisher leider erfolglos :-(
    Dabei ist es eigentlich ganz simpel … :-) Sollte jedenfalls.

    Hintergrund: ich möchte eine optische Trennung zwischen den eigenen Artikeln und “externen” (Artikelanrissen) haben.

    In der punctions.php ist Dein Code-Snipped eingebaut und ich bekomme auch die Auswahlliste bei der Artikelerstellung angezeigt. Nur: es gibt keine loop.php bei meinem Theme…, bin also nicht in der Lage, Deiner Anleitung weiter zu folgen.
    An welcher Stelle kann ich nun weiterschrauben?

    (WP 3.1.3. – Theme Arras)

  15. Pingback: Blogworkshop | Blogwerkstatt

  16. Hallo,

    ich versuche zur Zeit, dass zu begreifen, was oben erklärt wird. Ich weiß jedoch nicht, wo ich das oben genannte Codeschnipsel einfügen soll. Ich habe bei meinem selbsterstelltem Theme keine “loop.php”. Der Loop, in denen die Artikel ausgegeben werden, befindet sich in der index.php, single.php und der page.php. Vielleicht weiß da ja einer eine Lösung, wie man mit diesem Fall weiter umgeht.

  17. Pingback: Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger: Teil 2 | Elmastudio

Schreibe eine Antwort