Wie kann ich Artikel über 3 Spalten verteilen?

Muhsaft

Hi ich möchte gerne meine Artikel über 3 Spalten verteilen. Das soll dann mal so aussehen:
http://www.gawoo.de/test/

Momentan sieht es aber so aus:
http://henning.he.ohost.de/

Mein Ansatz bis jetzt:

PHP

<? $post_counter = 1; ?>
<div class="row floatleft">
     <?php while (have_posts()) : the_post(); ?>
     <? if($post_counter == 1 or 4 or 7 or 10 or 13 or 16) { ?>
          <?php $imagefarbe = get_post_meta($post->ID, 'farbe', true); ?>
          <div id="post-<?php the_ID(); ?>" class="exzerpt" style="background: url(<?php echo $imagefarbe; ?>) no-repeat">
              <?php $imagegrau = get_post_meta($post->ID, 'grau', true); ?>
              <a href="<?php the_permalink() ?>"><img src="<?php echo $imagegrau; ?>" alt="" /></a>
              <h3><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
              <?php the_excerpt(); ?>
              <p>Vom <?php the_time('j. F Y') ?>
              <a href="<?php the_permalink() ?>">{<?php comments_number('0', '1', '%' );?>} Weiterlesen</a></p>
              <!--<?php trackback_rdf(); ?>-->
          </div>
     <? } ?>
     <? $post_counter++ ?>
     <?php endwhile; ?>
</div>

Alles anzeigen

Und das eben in drei Loops für die drei Spalten. Es funzt so aber leider nicht.:-? Kann mir jemand sagen, wo mein Denkfehler liegt?

Mit besten Grüßen
Muhsaft

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

dpixl

sehr schönes layout!

man kann per wp_query auf einer page posts aus bestimmten kategorien anzeigen lassen (anleitung bei texto.de oder direkt im codex). dann kannst du ein page template erstellen und dort 3 divs floaten und in jedes div eine wp_query zu einer bestimmten kategorie. die post titles kannst du dann zur entsprechenden single verlinken.

ist allerdings rein spekulativ, könnte aber funktionieren :mrgreen:

mostho

Da (http://forum.wordpress-deutschland.org/jobboerse/6081…html#post284263) gibts eine Lösung, die zumindest auf der ersten Seite funktioniert. Vielleicht hilft DIr das weiter.

Muhsaft

Erstmal danke Für die schnellen Antworten.:D
Ich hab die doku zu wp_query durchgelesen und leinder keine passende option gefunden.
@mosstho: Naja es sollte schon auf allen Seiten funktionieren.^^

Mitlerwiele sieht es bei mir so aus:

PHP

<?php while (have_posts()) : the_post(); ?>
<? if($post_counter == 1 or 4 or 7 or 10 or 13 or 16) { ?>
<?php $imagefoto = get_post_meta($post->ID, 'foto', true); ?>
    <div id="post-<?php the_ID(); ?>" class="exzerpt" style="background: url(<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?><?php echo $imagefoto; ?>&w=300&q=85) no-repeat">
    <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?><?php echo $imagefoto; ?>&w=300&q=85&f=2" alt="" /></a>
    <h3><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
    <?php the_excerpt(); ?>
    <p>Vom <?php the_time('j. F Y') ?>
    <a href="<?php the_permalink() ?>">{<?php comments_number('0', '1', '%' );?>} Weiterlesen</a></p>
    <!--<?php trackback_rdf(); ?>-->
<? $post_counter++ ?>
</div>
<? } else { ?>
    <span style="display:none;"><?php the_title() ?></span>
<? $post_counter++ ?>
<? } ?>
<?php endwhile; ?>

Alles anzeigen

Und nach vie experimentieren bin ich mir auch recht sicher, dass der Fehler irgendwie hier liegt:

PHP

<? if($post_counter == 1 or 4 or 7 or 10 or 13 or 16) { ?>

Seht ihr da nen Fehler? Kann man oder Verknüpfungen so machen?

kaiser

also so kompliziert musst du gar nicht denken. das geht auch ohne query-Tricks mit reinem css. einfach nur für den div, der die artikel umfasst eine zB width: 800px und display: block; clear: both; und für die divs mit den artikeln drinnen width: zB 200px; float: left; height: auto; padding-right: zB 40px;

hab´s schnell mit firebug getestet und funktioniert. probleme gibt´s nur mit dem umgebenden container-div, weil leider auch andere die class .content haben und die von den änderungen auch beeinflusst werden.

kaiser

Noch ein paar Anmerkungen am Rande: (& schau dir wirklich einmal blueprint an. macht dir vieles einfacher.)

* Wirf alle divs in einen großen container-div mit margin: 940px auto; Erst darin dann alles andere mit float: left; ausrichten.
* Vergib für header, content, sidebar, footer eigene id´s und jeweils einen container-div mit display: block; clear: both; margin-bottom: 0;
* Für den Hintergrund-Streifen kannst Du auch einfach auf body ein background-image legen. Ist einfacher und sicherer als nur dewegen dort gleich einen div mit einer anderen breite als die restlichen Inhalte zu machen.

Muhsaft

Yes ich hab es geschafft.:mrgreen:
Restklassen,darauf hätte ich auch früher kommen können. So ist das ganze auch anpassbarer als mit einer endlichen Zahlenfolge.

PHP

<? if($post_counter % 3 == 1) { ?>

Jeweils gleich 1, 2 ,oder 0

kaiser: das war auch mein erster Gedanke und das klappt auch auf meinem Testblog wo es sich immerwieder um den gleichen Text handelt. Sobald aber ein Artikel einen Absatz länger ist als der rest hält er in der Nächsten Zeile aller Artikel auf. Hmm schwer zu erklären.

So soll es sein:

Code

1    2    3
4    5    6
7    8    9

Jetzt ist Artikel 2 eine Zeile länger als 1 und 3 dann wird daraus:

Code

1    2    3
          4
5    6    7
8    9

Deshalb die komplizierte Lösung.Ansonsten könnte man noch nach jedem 3. Artikel ein clear:both; einfügen, aber dann würde es nicht mehr alles so schön ineinander schnappen.

kaiser

du kannst die Excerpt-Länge (schreibt man wirklich mit c statt z ;) ) aber auch via wp-funktion mit einem filter kontrollieren. dann hätte jeder artikel in der übersicht autom dieselbe länge, was für ein aufgeräumtes layout vermutlich nicht allzuschlecht ist (stichwort: orientierung): http://codex.wordpress.org/Template_Tags/the_excerpt

frage am rande: das mit dem clear:both) auf was genau willst du das drauf legen?

Monika

aufgeräumtes Layout

selbst wenn man die excerpt Länge beschränkt auf gewisse Zeichenanzahl hat man dann noch den Artikeltitel und diesen auch nur xyz Zeichen lang machen wegen des Aussehens halt ich für ( sehr übrspannt ) :mrgreen:

man kann den Boxen aber ein min height und max height mitgeben

und mit overflow hidden arbeiten

ich finde jedoch die Lösung mit clear both auch ganz gut, weil es dann zumindest jeweils eine neue Zeile gibt

lg

kaiser

der monika-ansatz ist ziemlich gut. probieren wir es mit einer kombination: min/max-height so machen, dass du immer etwas platz unter einem artikel (selbst mit langer überschrift) hast, dann bist auf der sicheren seite. excerpt-länge würde ich aber in jedem fall beschränken. zuviel text liest sonst ja eh niemand.. dir berühmte 60% regel ;)

Blaui

Mmh, leider kann man deine Vorschau-Bilder nicht mehr sehen!

Aber bei deinen Problem, warum setzt du nach der 3 nicht einen clear rein?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wie kann ich Artikel über 3 Spalten verteilen?

Jetzt mitmachen!