Artikel in Spalten aufteilen – 2 simple Möglichkeiten

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.

Viel Spaß, war es hilfreich freu ich mich. Weitersagen ist ja ausdrücklichst erlaubt und bei Fragen, einfach fragen. ;-)
8

8 Beiträge zu “Artikel in Spalten aufteilen – 2 simple Möglichkeiten

  1. Kommentar Autor
    Roger
    Kommentar
    http://0.gravatar.com/avatar/a941973f11f1e67848c95cb2cb5f7b7f?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Schöne Schritt-für-Schritt-Anleitung, das ist einfach nachzuvollziehen. Danke!

  2. Kommentar Autor
    Monika
    Kommentar
    http://1.gravatar.com/avatar/518f2a0fb595224fa459177d9e7c786b?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    das kann ich so nicht bestätigen Oliver, der Rand kann ja *row* sein

    lg

  3. Kommentar Autor
    Robert
    Kommentar
    http://0.gravatar.com/avatar/0cc6b111f422144f1057f466846553f8?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Schöne und tolle Anleitung . Habs gleich nachgebaut und in einer meiner Seiten angewandt

  4. Kommentar Autor
    Marco
    Kommentar
    http://1.gravatar.com/avatar/3d658d30d439cbfa30e35c7de7ec3a43?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Danke für die Anleitung! Wie kann ich festlegen, dass mir nur die Artikel aus bestimmten Kategorien angezeigt werden? Da ich kein PHP-Kenner bin, wäre ich für den entsprechenden Code sehr dankbar.

  5. Kommentar Autor
    Marko
    Kommentar
    http://0.gravatar.com/avatar/0cc6b111f422144f1057f466846553f8?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Danke , das hat mir jetzt aber viel geholfen . Hab lange nach dem gesucht ° Danke

  6. Kommentar Autor
    bert
    Kommentar
    http://1.gravatar.com/avatar/9c9e417625497b224a769ed8341b44ee?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    grosser sport die anleitung. da ich noch relativer newbie bin hab ich zwar fast ne stunde drangesessen, aber dennoch hinbekommen ;)