Support WordPress Francophone / Affichage des posts dans une grille

ju · 02-05-2008 20:36:12

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5
- Thème utilisé : perso
- Plugins en place : post thumb, wp-postratings
- Nom de l'hebergeur : en local
- Adresse du site :

Problème(s) rencontré(s) :

Salut WP communauté tongue

Petit problème de mise en forme... Voilà, voilà, je souhaiterais pouvoir afficher mes posts par 2 sur une ligne.
J'ai donc, dans un premier temps, créer une class alternative pour obtenir un float à gauche puis à droite ceci en créant une variable $oddpost.
Puis j'ai ensuite tenté de créer un compteur dans la boucle qui écrirait une

Code:

<div class="holder">

tous les 2 posts afin de regrouper ceux-ci dans une même "width" ainsi que d'effacer les "floats"... Malheureusement sans y parvenir hmm

Bon, il faut dire aussi que chuis un boulet en php et c'est aussi pour ça que je me tourne vers vous aujourd'hui et sûrement d'autres jours à venir ( siffle ), j'ai bien essayé php.net mais j'avoue ne pas trop bien comprendre leurs exemples non-appliqués... Bref voici le bout de code concerné :

Code:

<?php $oddpost = '-right'; ?>
<?php if(have_posts()) ; ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php while (have_posts()) : the_post(); ?>
            <div class="holder">
              <div class="box float<?php echo $oddpost; ?>">
                <div class="img-box">
                  <?php the_thumb();?>
                </div>
                <div class="in">
                  <ul>
                    <li>Author <?php the_author_posts_link(); ?></li>
                    <li>Date <?php the_time('m/d/Y'); ?></li>
                    <li>Comments <?php comments_number('0', '1', '%'); ?></li>
                    <li class="last"><?php edit_post_link('Edit your post'); ?></li>
                  </ul>
                </div>
                <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></br>
                <span><?php the_excerpt();?></span></p>
              </div>
            </div>
<?php $oddpost = ( empty( $oddpost ) ) ? '-right' : ''; ?>
<?php endwhile; ?>

Merci beaucoup pour votre aide, ce site est une mine d'information formidable smile

bmzoom · 02-05-2008 22:29:34

Faut oublier php et voir dans le forum ( recherche ) :

- template de page
- fonction post

Ensuite php sera utile pour écrire des boucles qui sortiront avec ' post ' , les articles
dans la présentation du template

smile

ju · 03-05-2008 08:28:12

Ok, merci beaucoup pour la réponse... Jm'y met tout de suite et je reviens pour plus de précision (j'aurais sûrement qqchose à éclaircir roll )

ju · 03-05-2008 09:09:34

C'est marrant bmzoom, je viens de trouver exactement le même sujet avec la même réponse de ta part... lol

Donc avant de me faire ouspiller voici ce que j'obtiens avec ce bout de code :

Je continue toujours mes recherches; je suis encore tombé sur cette fameuse histoire de compteur php mais je dois vraiment pas être doué parceque ça n'veut pas marcher hmm

Merci

bmzoom · 03-05-2008 10:59:09

- template de page
- fonction post

C'est classique et surtout une tendance actuelle de vouloir ' tapisser ' le blog en double ou triple colonne ( ou article ) .

lol

ju · 03-05-2008 11:31:03

resolu

La solution est vraiment toute bête boulet boulet boulet
En tout cas pour une grille à 2 colonnes...

Vous créez tout d'abord dans votrestyle.css 2 class avec des valeurs de flottement à gauche puis à droite

Code:

.float{float:left !important;}
.float-right{float:right !important;}

Puis une 3ème pour effacer ces mêmes flottements

Code:

.clear{clear: both;}

Tout est expliqué dans le code suivant:

Code:

<?
// Variable pour la class alternative avec une valeur de flottement à droite et compteur mis à 0
php $oddpost = '-right'; $counter = 0;
// En dehors de la boucle, important !
?>
 
<?php if(have_posts()) ; ?>
<?php $post = $posts[0]; ?>
<?php while (have_posts()) : the_post(); // Début de boucle ?>
 
<?
// On démarre le compte
php $counter = $counter + 1; 
// A l'intérieur de la boucle, important !
?>
              <div class="box float<?php echo $oddpost; // On affiche la class alternative 1 post sur 2 ?>">
                <div class="img-box">
                  <?php the_thumb();?>
                </div>
                <div class="in">
                  <ul>
                    <li>Author <?php the_author_posts_link(); ?></li>
                    <li>Date <?php the_time('m/d/Y'); ?></li>
                    <li>Comments <?php comments_number('0', '1', '%'); ?></li>
                    <li>Views 10</li>
                    <li class="last"><?php edit_post_link('Edit your post'); ?></li>
                  </ul>
                </div>
                <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></br>
                <span><?php the_excerpt();?></span></p>
              </div>
<?
// Après tous les 2 posts, on efface le flottement pour revenir à la ligne
php if(2 == $counter) : echo '<div class="clear"></div>'; endif; ?>
 
<?
// Code pour afficher notre class alternative 1 post sur 2, le même que dans comments.php...
php $oddpost = ( empty( $oddpost ) ) ? '-right' : '';
// Avant la fin de notre boucle, important !
?>
 
<?php endwhile; // Fin de boucle ?>

Voilà, voilà en fait c'était vraiment tout simple (dans mon cas), c'est ce que tu essayais de me dire bmzoom ?

Une dernière chose voilà ce que ça donne

Merci, merci encore pour toute l'aide apportée par votre communauté... resolu

ju · 03-05-2008 11:38:40

C'est vrai que l'affichage en plusieurs colonnes permet d'avoir plus d'informations dans un espace restreint...

Merci

Lumière de Lune · 03-05-2008 13:24:46

Ne pas oublier non plus d'annuler le float si on a un nombre impair de posts... wink

ju · 04-05-2008 10:00:04

Exact mais pas vraiment dérangeant dans mon cas le dernier post impair se ballade soit à droite, soit à gauche cool

Et puis ce sont des lignes de code en moins wink Non ?

Fainéant fouet