Texto.de – Mein WordPress Magazin

Hie und da mag man Artikel in Spalten aufteilen. Entweder bei einer Kategorieübersicht oder auf der Startseite oder weil man ein Fotoblog hat. Hier einfache Lösungen und dann das nötige CSS dazu.

Artikel in Spalten innerhalb der Kategorie 

Auf dem Bild sieht man die Artikel in Spalten wie ich es derzeit auf WebDesign-in.de verwende. Das Thumb ist innerhalb von the_excerpt und die Beschreibung des Bildes im benutzerdefinierten Feld “headmeta”, dies erzeugt mein Fotoplugin das ich dort verwende.

Doch ich nutze dies auch, um ganz normale Artikel in Spalten aufzuteilen, weil dort steht dann der Kurztext im Auszug (the_excerpt) und die Angabe des benutzerdefinierten Feldes liefert dann eben keine Ausgabe, insofern stört es nicht.

Man muss natürlich keine Definitionsliste wie ich verwenden. Es hat sich für mich nur als praktisch erwiesen.

Ich habe einen simplen Counter eingebaut, der mir die Anzahl der dls zählt, sind es mehr als zwei dann erscheint der “Nach Oben” Link. Klar kann man da auch ein simples br class clear einbauen, doch ich biete auch ein Design für Handhelds an und da braucht man oft den “Nach Oben” Link, weil scrollen mit Handhelds sehr unpraktisch ist.

So nun meine catagory.php auf WebDesign-in.de und anschließend die Codeteile erklärt.

Artikel in Spalten aufteilen – Möglichkeit 1

Vorteil dieser 1. Möglichkeit ist, man kann die Spaltenanzahl ganz leicht selber ändern, indem man nicht durch 2, sondern durch 3 oder 4 dividieren läßt.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post();  ?>
<dl class="cat <?php $pcounter++;?>">
<dt  id="post-<?php the_ID(); ?>" >
<a href="<?php the_permalink() ?>" rel="bookmark" title=" '<?php the_title(); ?>'"><?php the_title(); ?>
 <?php comments_number('','(1)','(%)'); ?> </a></dt>
<dd><?php echo get_the_excerpt(); ?>
<br /><?php $key="headmeta"; echo get_post_meta($post->ID, $key, true); ?></dd>
</dl>
<?php if ($pcounter % 2 == 0) { ?>
<p  class="top"><a href="#topp" title="zum Seitenanfang">Top</a></p>
<?php } ?>
<?php endwhile; endif; ?>

Der Loop beginnt:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post();  ?>

Beginn der Definitionsliste mit dem Counter.

<dl class="cat <?php $pcounter++;?>">

Der Link zum Artikel und die Anzahl der Kommentare in Klammern dazu.

<dt  id="post-<?php the_ID(); ?>" >
<a href="<?php the_permalink() ?>" rel="bookmark" title=" '<?php the_title(); ?>'"><?php the_title(); ?>
 <?php comments_number('','(1)','(%)'); ?> </a></dt>

Den Auszug (the_excerpt) anzeigen und darunter das benutzerdefinierte Feld namens “headmeta”.

<dd><?php echo get_the_excerpt(); ?>
<br /><?php $key="headmeta"; echo get_post_meta($post->ID, $key, true); ?></dd>

Ende der Definitionsliste

</dl>

Wenn der Anzahl durch 2 teilbar ist, dann zeige an: (Logisch hat der “Nach Oben” Link im html Header sein Gegenstück )
Hier kann man eben dann durch 3 teilen oder 4 oder wie man eben mag und Platz hat.

<?php if ($pcounter % 2 == 0) { ?>
<p  class="top"><a href="#topp" title="zum Seitenanfang">Top</a></p>
<?php } ?>

Ende des Loops:

<?php endwhile; endif; ?>

Das CSS für dieses Beispiel 1:

dl.cat{float:left;text-align:left;margin:5px 6px 2px 4px;width:39%;}
dl.cat dt,
dl.cat dd{margin:4px auto;}
dl.cat dd{font-weight:lighter;font-size:0.9em; }
.top{text-align:right;margin-right:1em;clear:both;}

Wichtig ist, dass .top clear both enthält, sonst würden die Spalten ineinanderfließen oder sehr unschön aussehen, vor allem, weil diese Spalten ja selten gleich hoch sind.

Artikel in Spalten aufteilen – Möglichkeit 2

Mag man nur zwei Spalten haben, dann kann man jeweils 2 Spalten in eine eigene Schachtel (div) geben und innerhalb dieser Schachtel nochmals zwei Divs verwenden. Dabei läßt man PHP wieder zählen und gestaltet dann via CSS.

<?php $column = 1; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post();  ?>
<?php if ($column == 1) echo "<div class=\"row\">"; ?>
      <div class="post column<?php echo $column;?>" id="post-<?php the_ID(); ?>">
 
<!--alles was Du innerhalb des Loops anzeigen läßt-->
    </div><!--post end-->
 
 
 
<?php if ($column == 1) echo "</div>"; (($column==1) ? $column=2 : $column=1); endwhile; ?>
<?php else: ?>
Sorry not found...
<?php endif; ?>

Vor dem Loop gibt man an, dass $column 1 ist:

<?php $column = 1; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post();  ?>

Gleich nach dem Beginn des Loops öffnet man die 1. Schachtel. Ich nannte sie Zeile (row) und dieses Div soll ja nur erscheinen, wenn es die 1. Spalte ist.

<?php if ($column == 1) echo "<div class=\"row\">"; ?>

Jetzt gab ich zum div class post die class column1 oder column2 dazu, den 1 oder 2 lasse ich PHP dazuschreiben.

<div class="post column<?php echo $column;?>" id="post-<?php the_ID(); ?>">

Jetzt alles was Du anzeigen lassen magst, die Überschrift, den Autor, die Zeit, den Inhalt, etc.

Der WP Loop endet mit endwhile und da muss PHP jetzt rechnen, einmal “wenn eine 1 dann tu dies”, und die 1 und 2 abwechselnd angeben.

<?php if ($column == 1) echo "</div>"; (($column==1) ? $column=2 : $column=1); endwhile; ?>

Jetzt alle anderen Teile, wie “Tut mir leid, da ist nichts was Du suchst und das Ende:

 
<?php else: ?>
Sorry not found...
<?php endif; ?>

Das CSS für dieses Beispiel 2:

.row { clear: both; }
.column1 { width: 39%; float: left; padding: 0 10px; }
.column2 { width: 39%; float: left; padding: 0 10px; }

Die Zeile (row) muss das Floaten wieder aufheben, sonst gibt es eben ein sehr kreatives Erscheinungsbild Alles andere kann man frei gestalten.

edit am 20.06.08

Wer nur die Artikel in der Einzelansicht in Spalten aufteilen mag, kann dies mit dem Plugin Newspaper-Style-Posts machen.

Viel Spaß, war es hilfreich freu ich mich über einen Social Bookmark oder einen Link. Weitersagen ist ja ausdrücklichst erlaubt und bei Fragen, einfach fragen.