web-dev-qa-db-fra.com

Diviser les derniers messages WordPress en plusieurs colonnes et lignes en une seule boucle

J'ai cette mise en page que j'essaie d'implémenter - https://drive.google.com/file/d/1cP831xAM1F5CT3HEmedCBkINwiCC18Rb/view

Et j’ai créé un modèle de news, mais j’ai besoin que les articles soient affichés comme dans mon exemple où la première ligne de bootstrap affiche 3 articles puis en dessous de 4 articles.

Est-ce possible, je n'arrive pas à trouver les informations pertinentes pour y parvenir.

En espérant vraiment que quelqu'un puisse me diriger dans la bonne direction, sur la manière dont je coderais mon modèle pour cette mise en page.

Merci beaucoup

Voici mon code actuel

<div class="container">
    <div class="row">
    <?php
        while ( have_posts() ) {
            the_post(); 

            $class = 'col-md-4';

            if( $counter < 3 ) {
                $class = 'col-md-3';
            }

            ?>
            <div class="col-12 <?php echo $class; ?>">
                <?php the_post_thumbnail(', '); ?>
                <h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
            </div> <!-- .col-12 -->
            <?php

            $counter++;

        } // end while
    ?>
    </div><!-- .row -->
</div><!-- .container -->
postsloop
1
Davva M

Vous pouvez accomplir cela en utilisant un compteur puis en mettant à jour la classe en fonction de vos besoins. Le code ci-dessous créera une variable $counter et l'attribuera à 0 s'il existe des publications. Par défaut, un 'col-md-4' est lié à $class, si le $counter est inférieur à 3, $class sera mis à jour à 'col-md-3' (le remplissant alors 4 colonnes au lieu de 3). Ensuite, nous produisons le code HTML, y compris la classe stockée. Enfin, le $counter est incrémenté, prêt pour le prochain article.

<?php 
if ( have_posts() ) {
    $counter = 0;

    ?>

    <div class="container">
        <div class="row">
        <?php
            while ( have_posts() ) {
                the_post(); 

                $class = 'col-md-4';

                if( $counter < 3 ) {
                    $class = 'col-md-3';
                }

                ?>
                <div class="col-12 <?php echo $class; ?>">
                    <?php // content etc here ?>
                </div> <!-- .col-12 -->
                <?php

                $counter++;

            } // end while
        ?>
        </div><!-- .row -->
    </div><!-- .container -->
<?php } else { // end if ?>
    <p>There are no posts to display</p>
<?php } ?>
1
mrmadhat

essayez de jeter un oeil à ceci https://stackoverflow.com/questions/38304093/wordpress-blog-first-row-2-column-second-and-continuing-rows-3-columns

Est-ce similaire à ce que vous voulez réaliser?

0
Lisa