Wie bekomme ich meine Schleife, um Beiträge in drei Spalten zu ziehen

Ich habe meine Seitenvorlage, die eine bestimmte Kategorie zieht, und ziehe das vorgestellte Bild & den Titel in drei verschiedene Spalten auf meiner Website. Das Problem ist, dass sie alle die CSS-class .proj-left ziehen. Wie kann ich meine Seite dazu bringen, das vorgestellte Bild, den Titel und die spezifische Spalten-CSS-class zu ziehen, die ihr zugewiesen werden sollte?

Das ist meine Seitenvorlage:

  
'decorating-home', 'posts_per_page' => 9 ) ); if(have_posts()) : while(have_posts()) : the_post(); ?>
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">
<a href="https://wordpress.stackexchange.com/questions/163176/how-to-get-my-loop-to-pull-posts-into-three-columns/" title="">

Solutions Collecting From Web of "Wie bekomme ich meine Schleife, um Beiträge in drei Spalten zu ziehen"

Verwenden Sie als query_posts nie query_posts

Hinweis: Diese function ist nicht für Plugins oder Themes vorgesehen. Wie später erläutert, gibt es bessere, performantere Optionen zum Ändern der Hauptabfrage. query_posts () ist eine zu einfache und problematische Möglichkeit, die Hauptabfrage einer Seite zu ändern, indem sie durch eine neue Instanz der Abfrage ersetzt wird. Es ist ineffizient (führt SQL-Abfragen erneut aus) und wird unter bestimmten Umständen sogar fehlschlagen (besonders häufig, wenn es um die Paginierung von Posts geht).

Wenn Sie pre_get_posts nicht verwenden pre_get_posts , um die Hauptabfrage richtig zu ändern, müssen Sie entweder WP_Query oder get_posts , um eine benutzerdefinierte Abfrage mit zu erstellen

Sie können erreichen, was Sie wollen mit einfachen CSS und indem Sie Ihren float jeden dritten Post mit dem $current_post Schleifenzähler $current_post

Sie können Ihren Code so ändern

 < ?php /* Template Name: Projects */ ?> < ?php get_header(); ?> 
< ?php /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; $query = new WP_Query( array ( 'category_name' => 'decorating-home', 'posts_per_page' => 9, 'paged' => $paged ) ); if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?> < ?php if(($query->current_post+1)%3 == 0){ echo '
'; } ?> < ?php endwhile; echo paginate_links( $args ); endif; ?>
< ?php get_footer(); ?>

Ihr CSS kann dann ungefähr so ​​aussehen

 .proj { width: 33,3%; float: left: } 

BEARBEITEN

Sie sind fast mit Ihren Paginierungslinks da.

Als Referenz, siehe

  • next_posts_link()

  • previous_posts_link

Ändern Sie die Codes für die Seitennummerierung wie folgt

  

Du könntest das auf verschiedene Arten tun, unten habe ich zwei angelegt.

Methode 1: Modul

Die Idee ist, dass Sie den Rest Ihres $counter durch $grids . In unserem Fall wird die linke Seite immer als 1, 4, 7, 10, usw. gezählt, so dass der Rest unseres $grid (3) immer 1 ist. Unsere letzte Spalte wird immer gleich 0 sein Am unteren Ende müssen wir unseren $counter

 if(have_posts()) : while(have_posts()) : the_post(); ?> < ?php //Show the left hand side column if($counter % $grids = 1) : ?>  < ?php //Show the middle column elseif($counter % $grids = 2) : ?>  < ?php //Show the right hand side column elseif($counter % $grids = 0) : ?>  
< ?php endif; ?> < ?php $counter++; endwhile;

Methode 2: Zähler zurücksetzen

Einige Leute mögen Modul nicht, also könnten wir in unserer zweiten Methode unseren Zähler jedes Mal zurücksetzen, wenn er 3 erreicht. An diesem Punkt können wir einfach testen, ob unsere $counter Variable gleich 1, 2 oder 3 ist.

 if(have_posts()) : while(have_posts()) : the_post(); ?> < ?php //Show the left hand side column if($counter == 1) : ?>  < ?php //Show the middle column elseif($counter == 2) : ?>  < ?php //Show the right hand side column elseif($counter == 3) : ?>  
< ?php endif; ?> < ?php $counter = ($counter == 3) ? 1 : ($counter + 1); endwhile;

Am Ende unserer Schleife erhöhen wir entweder unseren $ -Zähler oder setzen ihn auf 1 zurück.