Support » Allgemeine Fragen » Posts in responsives grid-layout verpacken

  • Hallo Leute,
    Ich hab folgendes Problem:
    Meine Webseite baut nicht auf ein WordPress-Theme auf, sondern ich schreibe meines selber. Weil die Seite responsive sein soll, verwende ich ein grid-layout mit 12 Spalten. Links und rechts sollen jeweils 2 Spalten weiß bleiben, deshalb hab ich für den Inhalt insgesamt 8 Spalten. Diese Spalten möchte ich mit Posts einer bestimmten Kategorie befüllen, jeder Post soll 2 Spalten für sich beanspruchen d.h. ich habe dann 4 Posts in einer Zeile. Zur Veranschaulichung mal ein bisschen Code:

    <div class="row group">     //1.Zeile
    <div class="col span_2"></div>  //zwei Spalten leer
    <div class="col span_2">Post1</div>  //1. Post über 2 Spalten
    <div class="col span_2">Post2</div>  //2. Post über 2 Spalten
    <div class="col span_2">Post3</div>  //3. Post über 2 Spalten
    <div class="col span_2">Post4</div>  //4. Post über 2 Spalten
    <div class="col span_2"></div>  //zwei Spalten leer
    </div>
    <div class="row group">     //2.Zeile
    <div class="col span_2"></div>  //zwei Spalten leer
    <div class="col span_2">Post5</div>  //5. Post über 2 Spalten
    <div class="col span_2">Post6</div>  //6. Post über 2 Spalten
    <div class="col span_2">Post7</div>  //7. Post über 2 Spalten
    <div class="col span_2">Post8</div>  //8. Post über 2 Spalten
    <div class="col span_2"></div>  //zwei Spalten leer
    </div>

    So soll das immer weitergehen, also dass nach 4 Posts eine neue Zeile begonnen wird. Das würde ich in einer for-Schleife machen.

    Mein Problem ist jetzt aber, wie bekomme ich die einzelnen Posts in meine divs? Ich hab versucht das über die Post-ID mit einem Array zu machen, das hat aber nicht funktionert. Ich möchte die einzelnen Posts angreifen können, am besten über ein Array. Über die Post-ID ist das ja eher schwierig, da diese nicht pro Kategorie aufsteigend geordnet sind.

    Hier mein bisheriger Code:

    <div class="page-news clearfix">
    <?php
    $newsPosts = new WP_Query('cat=12');
    if($newsPosts->have_posts()):
      while($newsPosts->have_posts()):
        $newsPosts->the_post();
        ?>
    	<div class="row group">
    		<div class="col span_2"></div>
    			<div class="col span_2">
    				<h2> <?php the_title(); ?></h2>
    					<?php the_content(); ?>
    			</div>
    			<div class="col span_2">
    				<h2> <?php the_title(); ?></h2>
    					<?php the_content(); ?>
    			</div>
    			<div class="col span_2">
    				<h2> <?php the_title(); ?></h2>
    					<?php the_content(); ?>
    			</div>
    			<div class="col span_2">
    				<h2> <?php the_title(); ?></h2>
    					<?php the_content(); ?>
    			</div>
    			<div class="col span_2"></div>
    		</div>
    
    		<?php
      endwhile;
    else:
        ?>kein inhalt<?php
    endif;
    
    ?>
    
    </div><!-- page-projects-left -->

    Ich bin leider noch nicht so vertraut mit PHP, was man wahrscheinlich hier schon sieht. Ich hab jetzt immer den ganzen Inhalt in meinen Spalten, weil ich eben nicht wusste, wie ich das mit den einzelnen Posts machen kann. Deshalb gibt er mir pro Zeile den gleichen Post in allen vier Spalten aus, und nicht jeden nur einmal und schön aneinandergereiht.

    Das Projekt liegt leider lokal auf meinem Computer, deshalb kann ich euch keinen Link mitschicken.
    Ich hoffe ihr könnt mir trotzdem helfen und würde mich über jeden Vorschlag freuen!

    ganz liebe Grüße,
    Daniela

    [Code bitte auch immer als Code auszeichnen! Danke.]

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Die Ausgabe kommt einfach in die while-Schleife, so dass die einzelnen Inhalte über die Schleife ausgegeben werden. Der Rest passiert per CSS (nth-type, last-child, first-child, etc.), also ggf. Abstände/floating/etc..

    Gruß, Torsten

    Thread-Starter DaMoi

    (@damoi)

    Erstmal danke für die schnelle Antwort! 🙂
    Ich weiß nicht wie ich die Posts der Kategorie so ausgeben kann, sodass die Posts geordnet in meinem grid-layout eingebaut sind. Wie oben im Code, da hab ich den ganzen Inhalt ausgegeben, aber ich möchte mit dem ersten Post anfangen, dann den zweiten, dritten usw, und vier in einer Reihe bzw bei kleineren Screens eben weniger. Das schaff ich irgendwie nicht.

    lg
    Daniela

    Schau dir den Code bei einem anderen Theme ab. Open Source ist gut geeignet zum Lernen. Du schnappst dir einfach ein Theme, welches genau das macht und schaust es dir an.

    Gruß, Torsten

    Thread-Starter DaMoi

    (@damoi)

    Okay das werd ich machen, danke! 🙂

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Posts in responsives grid-layout verpacken“ ist für neue Antworten geschlossen.