Suche Menü

WordPress: Artikel-Auszüge mit Vorschaubild nebeneinander darstellen

WordPress: Eine einfache Möglichkeit auf der Startseite Beiträge mit Vorschaubild in zwei Spalten darzustellen.

Die Artikel Auszüge erhalten ein Vorschau-Bild (Thumbnail), eine Überschrift, einen Einleitungstext und den weiterlesen Link. Im Beispiel benutze ich als Startseite die Datei „template-home“, hierfür wurde die „page.php“ umgebaut und als Startseite festgelegt.
Getestet mit WordPress 3.5.

wordpress artikel nebeneinander

Um zwei Artikel nebeneinander darstellen zu können bedarf es zuerst ein wenig CSS, man benötigt einen Container mit der Klasse .artikelbox diese erhält die class

.artikelbox { background-color: #f1efef; }
.boxlinks, .boxrechts { width: 39%; float: left; padding: 0 10px; }

Die Änderungen im Template
Zunächst legen wir das umfassende „<div class=“artikelbox clearfix“>“ an und weisen der Variable $box den Wert rechts zu.

<div class="artikelbox clearfix">
<?php $box = rechts; ?>
<?php query_posts('showposts=2'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<?php if ($box == rechts) ?>
<article class="post box<?php echo $box;?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array( 250,164), array( 'class' => 'recent-posts-thumbs' )); ?></a>
<h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?>
</article>
<?php if (($box==rechts) ? $box=links : $box=rechts); endwhile; ?>
<?php endif; ?>
</div>

Die dritte Zeile – „<?php query_posts(‘showposts=2′); ?>“ – ist dafür zuständig, dass auf dieser Seite zwei Artikel ausgegeben werden, diesen Wert kann man natürlich variieren oder man lässt Ihn ganz weg, dann greift der Wert, welcher im Dashboard eingestellt wurde.

Die Zeile 7 ist zuständig für die Ausgabe des Thumbnail-Bildes. Hier  „the_post_thumbnail(array( 250,164)“ kann die Größe des Thumbnail-Bildes geändert werden und über die CSS-Klasse „( ‚class‘ => ‚recent-posts-thumbs‘ )“ das Aussehen des Thumbnails.

img:hover.recent-posts-thumbs { opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */ }

Nun beginnt der Loop:
Wenn unsere Variable den Wert rechts hat, dann bekommt das article-Element die Klasse .boxrechts zugewiesen. Im Artikelauszug sind die Artikelüberschrift das Thumbnail sowie der Auszug des beitrags mit weiterlesen Link.
Anschließend endet der Ausgabeteil des ersten Beitrags, und mit Hilfe von PHP wird dem nächsten Artikelauszug die Klasse .boxlinks zugewiesen.

artikelnebeneinander in wordpress

Ein Danke geht an das Tutorial Artikel nebeneinander darstellen von Anne Mühlbauer, deren Vorgehensweise ich hier als Grundlage verwendet und etwas umgebaut habe.