jesica
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 de abajo para ver las publicaciones. div estructura
Es el diseño real de HTML, y específicamente las primeras 2 publicaciones dentro de un div y el tercer post dentro de otro div como la siguiente captura de pantalla
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.
Lajos Arpad
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.
Tártaro
yo suelo $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 div condición:
$post_index % 3 == 2 || $post_index % 3 == 0
y yo 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
sitio web en línea
<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>
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>
Estás en el camino correcto al incrementar tu bucle. Solo necesitas condiciones ahora.
– Howard E.
14/09/2021 a las 11:59
@HowardE¿Cómo podría hacer eso, por favor?
– jesica
14 de septiembre de 2021 a las 12:28