WordPress Artikel-Formatvorlagen/ Postformats

Formatvorlagen in WordPress ist die Funktion schlechthin, wenn es darum geht nur Zitate, Kurzmitteilungen, Links, Audiodateien, einzelne Bilder oder Galerien zu veröffentlichen.

Video

Im Video wird der komplette untere Code erklärt und die einzelnen Formatvorlagen, auch Postformat genannt, demonstriert.

Verschiedene Formatvorlagen

  • Standard (normaler Artikel)
  • Kurzmitteilung (aside) – Kurzmitteilung, vergleichbar mit Posts auf Facebook, Google+ oder mit tweets auf twitter
  • Bild (image) – Einfaches Bild
  • Video (video) – Einfaches Video
  • Audio (audio) – Einfache Audio Datei zum Abspielen
  • Zitat (quote) – Ein Zitat
  • Link (link) – Ein Link zu einer anderen Seite
  • Galerie (gallery) – Eine Galerie mit mehreren Bildern

Formatvorlagen aktivieren – functions.php

Zunächst einmal müssen wir die Formatvorlagen in der functions.php aktivieren, damit WordPress weiß, dass unser Theme unterschiedliche Postformate unterstützt.

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

Damit solche Formatvorlagen auch bei anderen Post Types funktionieren, die man mit create_post_type() in der functions.php aktiviert hat – wenn das nicht der Fall ist vergesst das Folgende einfach – muss man mit add_post_type_support dies aktivieren.

Ausgeben in der Loop

Nun müssen wir das ganze noch innerhalb der Loop ausgeben (beispielsweise index.php). Ein umständliches Beispiel könnte so aussehen. Weiter unten erstellen wir die optimale Variante. Diesen Code können wir aber noch an anderer Stelle verwenden.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div <?php post_class('article'); ?>>
    <?php if ( has_post_format( 'aside' )) { ?>
      //Ausgabe des aside
    <?php } else if (has_post_format('image')) {?>
	  //Ausgabe des image
	<?php } else if (has_post_format('video')) {?>
	  //Ausgabe des video
	<?php } else if (has_post_format('audio')) {?>
	  //Ausgabe des audio
	<?php } else if (has_post_format('quote')) {?>
	  //Ausgabe des quote
	<?php } else if (has_post_format('link')) {?>
	  //Ausgabe des link
	<?php } else if (has_post_format('gallery')) {?>
	  //Ausgabe des gallery
	<?php } else { ?>
	  //Ausgabe des Standard-Artikels
	<?php } ?>
  </div> <!-- .article -->
<?php endwhile; endif; ?>

Beispiel

Hier wird nochmal ganz genau deutlich, warum dieses Verfahren umständlich und unübersichtlich ist.

<div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div <?php post_class('article'); ?>>
					
					
	  <?php if ( has_post_format( 'aside' )) { ?>
	    <div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		<div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<div class="aside_content">
		  <a href="the_permalink();"><?php the_content(); ?></a>
		</div>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('aside'); ?>" class="aside_more">Weitere Kurznachrichten</a>
		</div>
							
							
	  <?php } else if (has_post_format('image')) {?>
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
	      <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('image'); ?>" class="image_more">Weitere Bilder</a>
		</div>
							
							
	  <?php } else if (has_post_format('video')) {?>
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	    <?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('video'); ?>" class="video_more">Weitere Videos</a>
		</div>
							
							
	  <?php } else if (has_post_format('audio')) {?>
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
	    <div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('audio'); ?>"class="audio_more">Weitere Audios</a>
		</div>
							
							
	  <?php } else if (has_post_format('quote')) {?>
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		  <a href="<?php the_permalink() ?>"><blockquote><span>&bdquo; </span><?php the_content(); ?><span>&rdquo;</span></blockquote></a>
		<div class="quote_author">&ndash; <?php the_title(); ?></div>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('quote'); ?>" class="quote_more">Weitere Zitate</a>
		</div>
							
							
	  <?php } else if (has_post_format('link')) {?>
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
	      <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<a href="<?php echo get_the_content(); ?>" class="link"><?php the_content(); ?></a>
		<?php if (has_post_thumbnail()) { ?>
		  <div class="artikelbild"> <?php the_post_thumbnail('array'); ?></div>
		<?php } ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('link'); ?>" class="link_more">Weitere Links</a>
		</div>
							
							
	  <?php } else if (has_post_format('gallery')) {?>
	    <div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
	      <a href="<?php echo get_post_format_link('gallery'); ?>" class="gallery_more">Weitere Galerien</a>
		</div>
		
	  <?php } else { ?>

						
		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div> 
		  <div class="meta">
		    <div class="author">Geschrieben von <?php the_author(); ?></div>
		    <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		    <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		  </div>
		  <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		  <?php if (has_post_thumbnail()) { echo '<div class="artikelbild">'; the_post_thumbnail('array'); echo '</div>'; }?>
		  <?php the_content('Weiterlesen'); ?>
	  <?php } ?>
	</div> <!-- .article -->
  <?php endwhile; endif; ?>
  </div> <!-- #content -->

Formatvorlagen in eigene Templates auslagern

Um die umständliche Methode zu umgehen, erstellen wir für jede Formatvorlage eine eigene Template Datei.

Standard – content.php

In der Template Datei content.php werden die ganz normalen Artikel, also der Standard, definiert. Im folgenden Code wird das Datum, der Autor, die Kategorie, die Tags, der verlinkte Titel, ein Artikelbild und der Inhalt ausgegeben.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div> 
		  <div class="meta">
		    <div class="author">Geschrieben von <?php the_author(); ?></div>
		    <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		    <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		  </div>
		  <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		  <?php if (has_post_thumbnail()) { echo '<div class="artikelbild">'; the_post_thumbnail('array'); echo '</div>'; }?>
		  <?php the_content('Weiterlesen'); ?>

Kurzmitteilung | content-aside.php

In der content-aside.php wird die Template Datei für die Kurzmitteilungen festgelegt. Der wesentliche Unterschied zu oben besteht darin, dass es sowohl keinen Titel gibt, als auch keine Artikelbilder. Zusätzlich wird ein Link mit get_post_format_link() ausgegeben, der zum Archiv mit allen Kurzmitteilungen führt. Die Funktion get_post_format_link() wird weiter unten genauer erklärt.

	    <div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		<div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<div class="aside_content">
		  <a href="the_permalink();"><?php the_content(); ?></a>
		</div>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('aside'); ?>" class="aside_more">Weitere Kurznachrichten</a>
		</div>

Bild | content-image.php

Diese Template Datei hat im Gegensatz zu content-aside.php einen Titel.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
	      <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('image'); ?>" class="image_more">Weitere Bilder</a>
		</div>

Video | content-video.php

Die Theme Datei content-video.php unterscheidet sich bis auf den get_post_format_link zu weiteren Videos nicht.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	    <?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('video'); ?>" class="video_more">Weitere Videos</a>
		</div>

Audio | content-audio.php

Die Template Datei content-audio.php ist bis auf den get_post_format_link zu weiteren Audio-Dateien identisch.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
	    <div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('audio'); ?>"class="audio_more">Weitere Audios</a>
		</div>

Zitat | content-quote.php

In der Datei content-quote.php wird the_title zur Angabe des Zitierten verwendet, während the_content das Zitat ausgibt.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		  <a href="<?php the_permalink() ?>"><blockquote><span>&bdquo; </span><?php the_content(); ?><span>&rdquo;</span></blockquote></a>
		<div class="quote_author">&ndash; <?php the_title(); ?></div>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('quote'); ?>" class="quote_more">Weitere Zitate</a>
		</div>

Link | content-link.php

Mithilfe von get_the_content() wird der Inhalt zur Ausgabe des Links verwendet. get_the_content() liefert hingegen zu the_content() kein HTML und ist für dieses Vorhaben daher bestens geeignet. Eine genauere Erklärung findest Du weiter unten.

		<div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
	      <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<a href="<?php echo get_the_content(); ?>" class="link"><?php the_content(); ?></a>
		<?php if (has_post_thumbnail()) { ?>
		  <div class="artikelbild"> <?php the_post_thumbnail('array'); ?></div>
		<?php } ?>
		<div class="meta_bottom">
		  <a href="<?php echo get_post_format_link('link'); ?>" class="link_more">Weitere Links</a>
		</div>
			

Galerie | content-gallery.php

Die Template Datei content-gallery.php ist bis auf den get_post_format_link mit obigen Dateien identisch.

	    <div class="date"><?php the_time('l, d. F Y, h:i'); ?></div>
		<div class="meta">
		  <div class="author">Geschrieben von <?php the_author(); ?></div>
		  <div><span>Kategorie(n):</span> <?php the_category(', '); ?></div>
		  <?php the_tags('<div><span>Tags:</span> ', ', ', '</div>'); ?>
		</div>
		<div class="clear"></div>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<div class="meta_bottom">
	      <a href="<?php echo get_post_format_link('gallery'); ?>" class="gallery_more">Weitere Galerien</a>
		</div>

Ausgeben mit der Loop (optimal)

Mithilfe dieser übersichtlichen Loop ist es nun möglich, die einzelnen Posts mit unterschiedlichen Formatvorlagen auszugeben. Der folgende Code findet demnach in der index.php, single.php, category.php, tag.php usw. Platz. get_template_part() ist somit eine nützliche Funktion, die Übersicht schafft und Arbeit erspart.

		<div id="content">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				<div <?php post_class('article'); ?>>
					<?php get_template_part( 'content', get_post_format() ); ?>
				</div> <!-- .article -->
			<?php endwhile; endif; ?>
		</div>

Taxonomie/ Archiv für Formatvorlagen

<?php get_header(); ?>
  <div id="main">
    <div id="content">
	  <?php if ( has_post_format( 'aside' )) { ?>
	    <strong>Archiv für Audios</strong>
	  <?php } else if (has_post_format('image')) {?>
		<strong>Archiv für Kurznachrichten</strong>
	  <?php } else if (has_post_format('video')) {?>
		<strong>Archiv für Videos</strong>
	  <?php } else if (has_post_format('audio')) {?>
	    <strong>Archiv für Audios</strong>
	  <?php } else if (has_post_format('quote')) {?>
		<strong>Archiv für Zitate</strong>
	  <?php } else if (has_post_format('link')) {?>
		<strong>Archiv für Links</strong>
	  <?php } else if (has_post_format('gallery')) {?>
		<strong>Archiv für Galerien</strong>
	  <?php } else { ?>
		<strong>Archiv für Artikel</strong>
	  <?php } ?>
				
	  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div <?php post_class('article'); ?>>
		  <?php get_template_part( 'content', get_post_format() ); ?>
		</div> <!-- .article -->
	  <?php endwhile; endif; ?>
    </div>
 
    <div id="sidebar">
      <?php get_sidebar(); ?>
    </div><!-- #sidebar -->
					
    <div class="clear"></div>
  </div><!-- #main -->
<?php get_footer(); ?>

Neue Funktionen

Archive für einzelne Formatvorlagen

Die Funktion get_post_format_link() wurde in den Template Dateien oben häufiger verwendet. Diese gibt einen Link aus, unter dem man das Archiv der jeweiligen Formatvorlage erreichen kann. In unserem Fall wird ein Link zu „aside“ im Browser ausgegeben. Je nach Formatvorlage muss man natürlich den Parameter zwischen den “ austauschen. Die Template Datei des Archivs lautet zum Beispiel für die Formatvorlage Galerie: taxonomy-post_format-post-format-gallery.php

<a href="<?php echo get_post_format_link('aside'); ?>">Mehr Kurznachrichten</a>

get_the_content()

Im Gegensatz zu the_content liefert get_the_content keine HTML Tags.

Beispiel Ausgabe zu the_content
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
Beispiel Ausgabe zu echo get_the_content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

post_class()

Die Funktion post_class ermöglicht das Ausgeben von Formatvorlagen spezifischen Klassen. Somit ist es innerhalb der Loop möglich einzelne Postformats anzusprechen und zu designen. Die Klasse, die man in die (‚ ‚) schreibt, wird zusätzlich hinzugefügt.

<?php post_class('article'); ?>

get_template_part()

Die Funktion get_template_part() ruft das passende Template für die richtige Formatvorlage auf. Get_post_format() ist die Funktion, die die Formatvorlage bestimmt (in unserem Beispiel unten „Video“)

<?php get_template_part( 'content', get_post_format() ); ?>
//bspw. Datei mit dem Namen content-video.php

Quellen

http://codex.wordpress.org/Post_Formats
http://codex.wordpress.org/Function_Reference/add_post_type_support
http://codex.wordpress.org/Function_Reference/get_post_format_link
http://codex.wordpress.org/Function_Reference/get_post_format
http://codex.wordpress.org/Function_Reference/get_template_part
http://codex.wordpress.org/Template_Hierarchy

Weitere interessante Links

http://alexking.org/blog/2011/10/25/wordpress-post-formats-admin-ui

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.