Loop-Design-Muster zu wiederholen

Scheint wie ein einfaches Problem, aber ich habe Probleme, damit umzugehen.

Hier ist das Layout, das ich brauche

Schleife eins

Feature

Schleife zwei

Sekundär

tert – tert – tert

Sekundär

tert – tert – tert

Sekundär

etc

Einfach genug, um die function als separate Schleife zu nutzen. Aber ich möchte das 1 col (sekundäre) 3 (tert) col-Layout wiederholen. Das Problem besteht darin, dass die Container um die Tert-Elemente herum geschlossen sind und sie im richtigen Stadium geschlossen werden, da die Schleife möglicherweise auf einem einzelnen oder zwei Terts oder nach einem Secondary enden könnte. Hier ist, was ich bisher habe.

 'advice', 'offset'=>1 ); $counter = 0; $offset = 2; // the query $the_query = new WP_Query( $args ); ?> have_posts() ) : ?> <?php echo '
'; ?> have_posts() ) : $the_query->the_post(); ?> <?php if ($counter % 4 == 0) { get_template_part('templates/content', 'advice-secondary'); $offset++; $counter++; } else { if ( $offset % 3 == 0 ){ echo '
'; echo '
'; echo '
'; } get_template_part('templates/content', 'advice-tert'); $offset++; $counter++; }?> <?php echo '
'; ?>

Solutions Collecting From Web of "Loop-Design-Muster zu wiederholen"

Sie können 3 separate Schleifen verwenden und früh genug aus jeder Schleife ausbrechen, sobald Sie genügend Einträge haben.

Zum Beispiel ist hier ein 2-Spalten-Raster mit einer einzigen Abfrage:

 $q = new WP_Query( ... ); if ( $q->have_posts() ) { ?> 
< ?php $counter = 0; while( $q->have_posts() ) { $q->the_post(); the_title(); $counter++; if ( $counter === $q->post_count/2 ) { break; } } ?>
< ?php $counter = 0; while( $q->have_posts() ) { $q->the_post(); the_title(); $counter++; if ( $counter === $q->post_count/2 ) { break; } } ?>
< ?php } else { echo 'No posts found'; }

Beachten Sie, wie ich jeden Beitrag so gezählt habe, wie er angezeigt wurde, und bin dann früh aus der Schleife ausgetreten, als der Schalter halb durch war?

Beliebige Spalten

Beachten Sie, dass hier alle Spalten das gleiche Design haben und die bedingte Prüfung geändert wurde.

 $q = new WP_Query( ... ); if ( $q->have_posts() ) { ?> 
< ?php $columns = 2; for ( $i = 1; $i < $columns; $i++ ) { echo '
'; $counter = 0; while ( $q->have_posts() ) { $q->the_post(); get_template_part( 'column','post' ); $counter++; if ( $counter > $q->post_count/$columns ) { break; } } echo '
'; } ?> < ?php } else { echo 'No posts found'; }

Beachten Sie den Aufruf get_template_part , um die Vorlage zu vereinfachen.

Mit diesen 2 Beispielen und einigen grundlegenden mathematischen functionen können Sie diese in eine beliebige Kombination von Spalten umwandeln

Alternativ können Sie Postszeilen nach links schweben lassen und für jeden Post eine Breite von 50% oder eine feste Breite festlegen, indem Sie CSS verwenden, um PHP vollständig zu vermeiden

OK, ich habe eine Lösung gefunden. Es ist alles andere als ein elegantes, aber ich glaube, dass meine bedingten Aussagen stark verbessert werden könnten, wenn mir jemand dabei helfen könnte:

 .... while ( $the_query->have_posts() ) : $the_query->the_post(); if($counter == 0): get_template_part('templates/content', 'advice-secondary'); $counter++; else: if($counter == 1){ echo '
'; }; echo '
'; get_template_part('templates/content', 'advice-tert'); echo '
'; $counter++; if ($the_query->current_post +1 == $the_query->found_posts || $counter % 4 == 0) { $counter = 0; echo '
'; }; endif; endwhile; ...

Brauchst du wirklich mehrere Loops? Erhalten Sie für jeden Abschnitt unterschiedliche Inhalte? Wenn nicht, können Sie mit einer einzelnen Schleife arbeiten und anders mit flexbox anzeigen.

 .parent { display: flex; flex-direction; row; flex-wrap: wrap; } .children { flex: 1 1 33,33%; } .children:nth-child(1), .children:nth-child(5) { flex-basis: 100%; } 

So etwas würde helfen. Sie können komplexere untergeordnete Selektoren für mehr Wiederholungen erstellen.