Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

609
Visualizações
Cómo hacer un bucle de php con múltiples div de estilo

Estoy trabajando en un tema de WP y me topé con una tarea específica que no puedo describir aquí, pero estoy seguro de que si muestro algunas capturas de pantalla aquí, podrás entender el problema.

En primer lugar, consulte la imagen a continuación para ver la estructura div de las publicaciones.

ingrese la descripción de la imagen aquí

Es el diseño real de HTML, y específicamente las primeras 2 publicaciones dentro de un div y la tercera publicación dentro de otro div como la siguiente captura de pantalla

ingrese la descripción de la imagen aquí

por favor ponga un comentario si no puede entender esto.

La pregunta es cómo hacer un bucle dinámico manteniendo la misma estructura y diseño.

Y aquí están mis códigos a continuación.

 <div class="row justify-content-center"> <div class="col-xl-3 col-lg-6 col-md-6"> <?php while($projects_array->have_posts()): $projects_array->the_post(); $idd = get_the_ID(); $terms = wp_get_post_terms(get_the_ID(), 'project_cat'); $output = array(); if ($terms) { $i = 1; foreach ($terms as $term) { if($i == 1): $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>'; $id[] = $term->term_id ; endif; $i++; } } if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) { $post_link = get_the_permalink(); } else { $post_link = get_field('external_link'); } ?> <div class="single-portfolio-box"> <?php if(has_post_thumbnail()): ?> <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_post_thumbnail_caption(); ?>"> <?php endif; ?> <div class="content"> <h3><a href="<?php echo esc_url( $post_link ); ?>"><?php the_title(); ?></a></h3> <?php echo join( ' ', $output ); ?> </div> </div> <?php endwhile; ?> <?php wp_reset_query(); ?> </div> </div>

Gracias por adelantado.

over 4 years ago · Santiago Trujillo
4 Respostas
Responde à pergunta

0

Puede crear un índice y realizar la salida en tres casos diferentes, como este:

 $index = 1; while ($projects_array->have_posts()) { $modulo3 = $index % 3; //Initialize your values if (($modulo3 === 1) || ($modulo3 === 0)) { //Display the wrapper div's start } //Display the actual post content if (($modulo3 % 3 === 2) || ($modulo3 === 0)) { //Display the wrapper div's end } $index++; } if ($index % 3 === 2) { //Display the wrapper div's end }

No profundicé en tu estructura, ya que tú lo sabes mejor que yo. Sin embargo, la idea es que si tiene un valor numérico que indica su estado actual, entonces sabe qué parte del envoltorio debe mostrarse. Cada ciclo de 3 iteraciones consta de:

  • paso 1 : muestra el inicio del envoltorio y la publicación
  • paso 2 : muestra la publicación y el final del envoltorio
  • paso 3 : muestra el inicio del envoltorio, la publicación y el final del envoltorio

Hasta aquí todo bien. Si el número de iteraciones es un múltiplo de 3, en cada paso tendrá dos publicaciones envueltas en un contenedor y una tercera envuelta en un contenedor. Sin embargo, si el número de publicaciones no es un múltiplo de tres, tendrá un caso especial en el último grupo de tres que deberá manejar. Si el número de publicaciones para mostrar es 3n + 2, donde n es un número natural, entonces su último grupo constará de dos publicaciones, que estarán bien envueltas por un envoltorio dentro del ciclo. Sin embargo, si el número de publicaciones para mostrar es 3n + 1, donde n es un número natural, entonces en su último paso abrió el envoltorio y mostró una publicación. En ese caso, deberá cerrar la envoltura justo después del ciclo.

over 4 years ago · Santiago Trujillo Relatório

0

<div class="row justify-content-center"> <div class="col-xl-3 col-lg-6 col-md-6"> <?php $j = 0; while($projects_array->have_posts()): $projects_array->the_post(); $idd = get_the_ID(); $terms = wp_get_post_terms(get_the_ID(), 'project_cat'); $output = array(); if ($terms) { $i = 1; foreach ($terms as $term) { if($i == 1): $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>'; $id[] = $term->term_id ; endif; $i++; } } if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) { $post_link = get_the_permalink(); } else { $post_link = get_field('external_link'); } ?> <?php if(in_array($j,['2','3','5'])) echo '</div><div class="col-xl-3 col-lg-6 col-md-6">';?> <div class="single-portfolio-box"> <?php if(has_post_thumbnail()): ?> <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_post_thumbnail_caption(); ?>"> <?php endif; ?> <div class="content"> <h3><a href="<?php echo esc_url( $post_link ); ?>"><?php the_title(); ?></a></h3> <?php echo join( ' ', $output ); ?> </div> </div> <?php $j++; endwhile; ?> <?php wp_reset_query(); ?> </div>
over 4 years ago · Santiago Trujillo Relatório

0

Uso $post_index para manejar qué índice abriremos y cerraremos div. Básicamente, haremos lo siguiente:

  • abrir div en 1, 3, 4, 6, 7, 9...
  • cerrar div en 2, 3, 5, 6, 8, 9...

Manejamos esto por $post_index % 3 . Entonces la condición traducida es:

  • condición div abierta: $post_index % 3 == 1 || $post_index % 3 == 0
  • cerrar condición div: $post_index % 3 == 2 || $post_index % 3 == 0

Y uso $is_open para rastrear el estado de div abierto para manejar si el div está abierto y no está cerrado porque la longitud de la publicación no es suficiente para coincidir con la condición de cierre. En ese caso, lo cerraremos manualmente.

 <div class="row justify-content-center"> <?php $post_index = 0; $is_open = false; while($projects_array->have_posts()): $post_index++; // open div to wrap posts by grouped 1, 3, 4, 6, 7, 9... if ($post_index % 3 == 1 || $post_index % 3 == 0) { echo '<div class="col-xl-3 col-lg-6 col-md-6">'; $is_open = true; } $projects_array->the_post(); $idd = get_the_ID(); $terms = wp_get_post_terms(get_the_ID(), 'project_cat'); $output = array(); if ($terms) { $i = 1; foreach ($terms as $term) { if($i == 1): $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>'; $id[] = $term->term_id ; endif; $i++; } } if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) { $post_link = get_the_permalink(); } else { $post_link = get_field('external_link'); } ?> <div class="single-portfolio-box"> <?php if(has_post_thumbnail()): ?> <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_post_thumbnail_caption(); ?>"> <?php endif; ?> <div class="content"> <h3><a href="<?php echo esc_url( $post_link ); ?>"><?php the_title(); ?></a></h3> <?php echo join( ' ', $output ); ?> </div> </div> <?php // close wrapped div if post index is 2, 3, 5, 6, 8, 9... if ($post_index % 3 == 2 || $post_index % 3 == 0) { $is_open = false; echo '</div>'; } ?> <?php endwhile; ?> <?php wp_reset_query(); ?> <?php // close div if it's closed (happens when post count is 1, 4, 7,...) if ($is_open) { echo '</div>'; } ?> </div>

Lo ejecuté en mi propio sitio y funciona perfectamente. Estructura HTML de demostración

over 4 years ago · Santiago Trujillo Relatório

0

Como tiene una plantilla en la que tiene que insertar valores, es mejor que cree los valores y los inserte. como seguir

 <?php $posts = array(); $i = 0; while($projects_array->have_posts()): $projects_array->the_post(); $idd = get_the_ID(); $terms = wp_get_post_terms(get_the_ID(), 'project_cat'); $output = array(); if ($terms) { $i = 1; foreach ($terms as $term) { if($i == 1): $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>'; $id[] = $term->term_id ; endif; $i++; } } if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) { $post_link = get_the_permalink(); } else { $post_link = get_field('external_link'); } if(has_post_thumbnail()) { $posts[$i]["img"] = '<img src="'.get_the_post_thumbnail_url().'" alt="'.get_the_post_thumbnail_caption.'">'; }else{ $posts[$i]["img"] = ""; } $posts[$i]["content"] = '<h3><a href="'.esc_url( $post_link ).'">'.get_the_title().'</a></h3>'; $posts[$i]["output"] = join( ' ', $output ); endwhile; wp_reset_query(); ?> <div class="row justify-content-center"> <div class="col-xl-3 col-lg-6 col-md-6"> <div class="single-portfolio-box"> <?php echo $posts[0]["img"]; ?> <div class="content"> <?php echo $posts[0]["content"]; echo $posts[0]["output"]; ?> </div> </div> <div class="single-portfolio-box"> <?php echo $posts[1]["img"]; ?> <div class="content"> <?php echo $posts[1]["content"]; echo $posts[1]["output"]; ?> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6"> <div class="single-portfolio-box"> <?php echo $posts[3]["img"]; ?> <div class="content"> <?php echo $posts[3]["content"]; echo $posts[3]["output"]; ?> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6"> <div class="single-portfolio-box"> <?php echo $posts[4]["img"]; ?> <div class="content"> <?php echo $posts[4]["content"]; echo $posts[4]["output"]; ?> </div> </div> <div class="single-portfolio-box"> <?php echo $posts[5]["img"]; ?> <div class="content"> <?php echo $posts[5]["content"]; echo $posts[5]["output"]; ?> </div> </div> </div> <div class="col-xl-3 col-lg-6 col-md-6"> <div class="single-portfolio-box"> <?php echo $posts[6]["img"]; ?> <div class="content"> <?php echo $posts[6]["content"]; echo $posts[6]["output"]; ?> </div> </div> </div> </div>
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda