Disposition de deux colonnes dans une boucle wordpress, des idées ?

Mon client veut une mise en page comme celle-ci (cliquez ici), mais j’ai essayé beaucoup d’idées et je n’arrive pas à obtenir le résultat.

J’utilise wordpress pour obtenir des messages par date (il s’agit d’une boucle), mon thème utilise également cette bibliothèque jQuery Masonry pour obtenir une disposition à deux colonnes (je peux la désactiver si nécessaire).

Je n’ai donc que deux auteurs, et maintenant je dois placer le message de chaque auteur dans deux colonnes différentes. Dans la première colonne, il devrait y avoir des messages de Jack (par exemple) et dans la seconde – des messages de Kate (par exemple).

Mais il y aura aussi des messages qui croiseront les deux colonnes.

La boucle ne devrait donner des publications que par date, de sorte que ces publications devraient en quelque sorte trouver leur place.

C’est mon idée : je peux créer une classe pour les messages de Kate qui modifiera la largeur de ces messages (par exemple 359px), mais les messages de Jack ont ??toujours 360px par défaut. si je spécifie la largeur minimale et maximale de chaque colonne dans la disposition de la maçonnerie, théoriquement – je peux forcer mes messages à obtenir des colonnes différentes (la maçonnerie placera un message large dans la première colonne par défaut). Mais je ne trouve aucun type d’option permettant de spécifier la largeur de chaque colonne (columnWidth dans la bibliothèque de maçonnerie définit la largeur de toutes les colonnes).

Des idées sur la façon de spécifier chaque largeur de colonne ? ou peut-être avez-vous d’autres idées de cette mise en page?

S’il vous plaît, aidez 🙂

Solution n°1 trouvée

Pas tout à fait sûr sur Masonry (je viens de commencer à utiliser Isotope), mais je structurerais avec query_posts, à moins que vous ne le fassiez sur une page spécifique non archivée, puis utilisez WP_Query. Le code ci-dessous suppose que la page sur laquelle vous vous trouvez interroge déjà les publications de Jack et de Kate.

<div id="authorColumnsRow"> <!--/* clear:both */-->
    <div class="author-columns" id="JACK"> <!--/* .author-columns { float:left; width:45%; margin-right:2.5%; } */-->
    <?php query_posts('author='.$JACKSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
    <div class="author-columns" id="KATE">
    <?php query_posts('author='.$KATESSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
</div>
<div id="fullRow"> <!--/* clear:both */-->
<?php query_posts('offset=4'); //To avoid duplicates
while(have_posts()) : the_post();
     //Post stuff for both of them
endwhile; ?>
</div>

J’espère que cela pourra aider.