2010-09-21 7 views
3

Je travaille sur wordpress query_posts. Je veux montrer 12 messages sur la page d'index, 3 articles d'affilée. Donc je veux avoir un "clear: both" css sur le premier item de chaque rangée. Comment puis-je faire ça s'il vous plait?simple php counter

 
<?php query_posts(array('showposts' => 9, 'post_parent' => $post->ID, 'post_type' => 'page', 'order' => 'ASC')); ?> 
<div> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
     <div> <!-- clear class on each 4th item --> 
      <h2><?php the_title(); ?></h2> 
      <?php the_content(); ?> 
     </div> 
    <?php endif; ?> 
</div> 
<?php wp_reset_query(); ?> 
+0

Ne pouvez-vous pas mettre une largeur sur le conteneur dans lequel ces messages vont? Rendez-le assez large pour qu'il y ait 3 poteaux dedans, puis quand il arrivera au 4ème poteau, il n'y aura plus de place sur cette ligne, donc il apparaîtra en dessous. –

+0

Je vois ce que tu veux dire. Mais les articles ne peuvent pas dans la même hauteur, aussi avec des marges, rembourrages. Il est toujours bon d'avoir plus de cours de CSS pour un meilleur contrôle. – solidcolour

Répondre

3
<?php query_posts(array('showposts' => 9, 'post_parent' => $post->ID, 'post_type' => 'page', 'order' => 'ASC')); ?> 
<div> 
    <?php $i = 0; $attr = " class='clear_float'"; ?> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
     <div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item --> 
      <h2><?php the_title(); ?></h2> 
      <?php the_content(); ?> 
     </div> 
    <?php endif; ?> 
</div> 
<?php wp_reset_query(); ?> 

I ajouté 2 lignes.

<?php $i = 0; $attr = " class='clear_float'"; ?>

et

<div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item -->

===== ===== MISE À JOUR

Pour ajouter la classe 3 de l'article, je suggère d'ajouter la classe à tous les articles, pour simplicité et encore plus de contrôle

Pour ce faire, avant la boucle:

$i = 0; 

A l'intérieur du div dans la boucle:

<div class="item-<?php echo (($i++) % 3) + 1 ?>"> 

Alors que, pour chaque ligne, le premier élément a class = item-1, le 3ème article a class = item-3

+0

Pouvons-nous ajouter une autre classe "last_item" au 3ème article de chaque rangée s'il vous plaît? Merci! – solidcolour

+0

@solidcolour Veuillez voir ma réponse mise à jour. – PeterWong

2
<?php 
    $counter = 0; 
    if (have_posts() ....): the_post(); ? 
     $class = ((++$counter % 3) == 0) ? ' class="clearme"': ''; 
?> 
    <div<?php echo $class ?>> <!-- clear.... --> 
     ... 

Initialiser votre compteur à zéro. Incrémentez-le de un, divisez par 3 et vérifiez si le reste est 0 (ce qui implique qu'il s'agit d'un multiple pair de 3), auquel cas vous définissez votre classe/style de compensation. En moins de code succinct:

$counter = $counter + 1; 
    if ($counter > 3) { 
     $counter = 0; 
    } 

    $remainder = (int)($counter/3) 
    if ($remainder == 1) { 
     // will be 1 when $counter is 3 
     $class = ' class="clearme"'; 
    } else { 
     $class = ''; 
    } 
+0

merci, c'était très clair! – solidcolour