J'ai une structure HTML que j'ai besoin de sortir dynamiquement.

J'utilise un compteur dans ma boucle pour vérifier le premier message et j'applique la classe headline-big et m-grid-item pour le premier message. Ensuite, j'applique la deuxième classe headline-scroll pour les messages suivants.

Le problème est que les 2e, 3e et 4e messages ne sont pas imbriqués dans headline-scroll, ils ont chacun leur propre div.headline-scroll, ce qui dérange le site.

J'ai besoin que les 2e, 3e et 4e messages soient imbriqués dans un seul div.headline-scroll au lieu que chacun d'entre eux soit imbriqué sous un autre.

Ceci est le HTML pour la structure

<!-- / 1ST POST -->
<div class="headline-big">
  <div class="m-grid-item">
    ...
  </div>
</div>
<!-- / END OF FIRST POST -->

<!-- / 2ND, 3RD AND 4TH POST - ALL NESTED INSIDE div.headline-scroll -->
<div class="headline-scroll">
  <!-- / 2ND POST -->
  <div class="m-grid-item -medium">
    ...
  </div>
  <!-- / END OF 2ND POST -->

  <!-- / 3RD POST -->
  <div class="m-grid-item -small">
    ...
  </div>
  <!-- / END OF 3RD POST -->

  <!-- / 4TH POST -->
  <div class="m-grid-item -small">
    ...
  </div>
  <!-- / END OF 4TH POST -->

</div>

Et c'est le PHP

if ( $featured->have_posts() ) {
$i = 0;
    while ( $featured->have_posts() ) {
        $featured->the_post();
        if ( $i == 0 ) :
?>
<div class="headline-big">
  <div class="m-grid-item">
    <?php endif; ?>
    <?php if ( $i != 0 ) : ?>
    <div class="headline-scroll">
      <div class="m-grid-item -medium">
        <?php endif; ?>
        <?php the_title(); ?>
      </div>
    </div>
    <?php $i++;
    }
} else {
    echo 'Add some posts';
}
1
Halnex 20 avril 2017 à 02:25

3 réponses

Meilleure réponse

Je ne sais pas si je pourrais bien répondre à votre question. Mais c'est ainsi que je comprends. S'il y a une question, faites-le moi savoir et je modifierai.

if ( $featured->have_posts() ) {
  $i = 1;
  while ( $featured->have_posts() ) 
  {
      $featured->the_post();
      if( $i == 1) 
      {
        ?>
        <div class="headline-big">
          <div class="m-grid-item">
             <?php the_title(); ?>
          </div>
        </div>
        <div class="headline-scroll">
        <?php
      }
      else
      {
        $small = array(3,4); //list of small classes
        $class = ( in_array($i, $small)) ? '-small' : '-medium'; 
        <div class="m-grid-item <?php echo $class; ?>">
             <?php the_title(); ?>
        </div>
        <?php
      } 
      $i++;
   }
   echo '</div><!-- end of headline-scroll -->';
} else {
   echo 'Add some posts';
}
1
smzapp 19 avril 2017 à 23:56

Je l'ai simplifié ici avec des conditions if.

S'il s'agit du premier message, créez le div headline-big.

Si c'est le deuxième article, créez le div de défilement du titre et le div de classe moyenne.

Pour tous les articles suivants, utilisez simplement le petit div. Enfin, en dehors de la boucle while, si nous avons eu plus d'un article, nous devons ajouter un div de fermeture pour fermer le défilement du titre.

if ( $featured->have_posts() ) {
  $i = 0;
  while ( $featured->have_posts() ) 
  {
      $featured->the_post();
      if( $i == 0) 
      {
        ?>
        <div class="headline-big">
          <div class="m-grid-item">
             <?php the_title(); ?>
          </div>
        </div>            
        <?php
      }
      else if($i == 1)
      {
        ?>
        <div class="headline-scroll">
        <div class="m-grid-item -medium">
             <?php the_title(); ?>
        </div>          
        <?php
      } 
      else
      {
        <div class="m-grid-item -small">
             <?php the_title(); ?>
        </div>     
      }
      $i++;
   }
   if($i > 1){
   ?>
   </div><!-- end of headline-scroll -->
   <?php
   }
} else {
   echo 'Add some posts';
}
0
SeanOB 20 avril 2017 à 00:02

Vous n'avez jamais fermé beaucoup de vos balises DIV, et vous ouvriez votre div.headline-scroll dans une boucle, vous étiez donc obligé d'en obtenir plusieurs. Essayez ceci à la place peut-être? Un retrait cohérent et un minimum de PHP dans votre HTML faciliteront le débogage, même si vous êtes bloqué par les terribles fonctions de Wordpress.

<?php if (!$featured->have_posts()):?>

<p>Add some posts!</p>

<?php else: $i = 0; while ($featured->have_posts()): $featured->the_post();?>
<?php if (!$i):?>

<div class="headline-big">
    <div class="m-grid-item">
        <?php the_title(); ?>
    </div>
</div>
<div class="headline-scroll">

<?php else:?>
    <div class="m-grid-item -medium">

<?php endif; ?>
        <?php the_title(); ?>
    </div>
<?php $i++; endwhile;?>
</div>
<?php endif?>
0
miken32 20 avril 2017 à 00:09