css - codex - post title wordpress

Publicaciones de WordPress Loop en el diseño de cuadrícula Bootstrap 3

Question

Estoy usando Bootstrap 3 dentro de Wordpess y tengo un problema al hacer que mis publicaciones de archivo se muestren en la página en un formato de cuadrícula. Mi código de bucle wordpress es ...

<?php if ( have_posts() ) : ?>
<?php
$args=array(
''post_type'' => ''artist'',
''post_status'' => ''publish'',
''posts_per_page'' => -1,
''caller_get_posts''=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '''';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field(''artist_photo''); ?>" alt="" class="img-responsive" />
</li>
<?php endwhile;
}
wp_reset_query();
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Esto muestra una lista que contiene la imagen de la publicación. En este momento, enumeran uno tras otro en la página.

¿Cómo haré para que usen mi cuadrícula de bootstrap mostrando 4 en la página, luego los 4 siguientes en la fila de abajo, luego los siguientes 4 en fila debajo de eso como este ...

<div class="row">
<div class="col-md-3">
<li>image 1 goes here</li>
</div>
<div class="col-md-3">
<li>image 2 goes here</li>
</div>
<div class="col-md-3">
<li>image 3 goes here</li>
</div>
<div class="col-md-3">
<li>image 4 goes here</li>
</div>
</div>

etc. ¿Es eso posible? Básicamente quiero que el bucle de Wordpress liste TODAS mis publicaciones 4 en la página en lugar de una después de la otra en una lista html en la página.

Answer 1

Creo que todos ustedes han complicado mucho el problema. El problema principal de todas sus soluciones es que si no tienen la misma cantidad de elementos en la fila, no cierran la fila final y se les ensucia mucho. ...

Déjame explicarte mi solución con solo una IF (similar a la tuya, pero sin cosas complicadas y ajustable)

Open row
Run loop
If it is the last element in row close row, and open another one
Close the final row

Y aquí está el ejemplo en el ciclo (no entiendo qué WP_Query muestra y cómo obtuvo sus publicaciones)

$columns_num = 4; // The number of columns we want to display our posts
$i = 0; //Counter for .row divs
echo ''<div class="row">'';
/* Start the Loop */
while ( have_posts() ) : the_post();
echo ''<div class="single-product-archive col-md-'' . 12 / $columns_num . ''">''
get_template_part( ''template-parts/content'', get_post_format() );
echo ''</div>'';
if($i % $columns_num == $columns_num - 1 ) {
echo ''</div> <div class="row">'';
}
$i++;
endwhile;
echo ''</div>'';

Tenga en cuenta que puede cambiar el valor de $columns_num = 4 . Incluso puede hacer un cuadro de selección desde su personalizador y simplemente seleccionar cuántas columnas por fila desea. Por supuesto, el valor debe dividir el número 12 (columnas bootstrap) sin descanso. Entonces solo 1, 2, 3, 4 y 6 son aceptables.

Answer 2

Estas soluciones funcionan bien, pero no son receptivas, ya que, sin agregar llamadas de medios para anular las columnas de bootstrap, siempre generarán el mismo número de publicaciones por fila, independientemente del tamaño de la pantalla.

Quería una pantalla con una cuadrícula de 3 columnas que utilizara anchos de columna, flotadores y clearfixes de arranque, lo que significaba que para evitar el tambaleo no uniforme que ocurre cuando las alturas de los postes flotantes son diferentes, todas las publicaciones deben tener la misma altura.

Intenté originalmente hacerlo con bootsrowp .row-eq-height, pero usa flexbox, que muestra todas las columnas en la misma fila, independientemente de los tamaños de columna.

La solución de jQuery de esta persona resolvió mi problema ... La misma columna de altura arranca 3 filas en respuesta

// Add this javascript to header.php(or equivalent file)...
jQuery( document ).ready(function() {
var heights = jQuery(".col-eq-height").map(function() {
return jQuery(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
jQuery(".col-eq-height").height(maxHeight);
});

... y luego agrega la clase .col-eq-height a tu columna de arranque definida ...

 <?php
$args = array();
$query = new WP_Query($args);
while($query->have_posts()) : $query->the_post(); ?>
<div class="col-eq-height col-md-4">
<?php // Content goes here... ?>
</div><!-- /.col-md-4 -->
<?php endwhile;
wp_reset_postdata();
?>

Lo que da como resultado una cuadrícula de bootstrap apilable, de 3 columnas y receptiva de tus publicaciones. Espero que sea sobre el tema y ayude a alguien a salir.

Answer 3

GRACIAS A GERMAIN ESTE CÓDIGO COMPLETO RESPONDE MI PREGUNTA ...

<?php
$args=array(
''post_type'' => ''artist'',
''post_status'' => ''publish'',
''posts_per_page'' => -1,
''caller_get_posts''=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '''';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<div class="col-md-4">
<div class="artist-thumbnail">
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field(''artist_photo''); ?>" alt="" class="img-responsive" /></a></p>
</div>
</div>
<?php
if($i % 4 == 0) { ?>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
</div> 

Answer 4

No creo que ninguna de estas opciones funcione completamente. Suponen que el número de elementos / publicaciones es exactamente divisible por el número de columna. Por ejemplo:

10 publicaciones divididas por 2 = 5 buenas filas cerradas

pero

10 publicaciones divididas por 3 = 3 filas agradables y una fila no cerrada por una div final.

Mi solución fue verificar el contador después del bucle, si era divisible ignorar, sino agregar el div de cierre.

<?php $i = 0; //keep track of the row div ?>
<?php foreach ($array_object as $key => $value ) : ?>
<?php if($i % 2 == 0) : ?>
<div class="row">
<?php endif; ?>
<div class="col-md-6">
Some content in the div
</div>
<?php $i++; ?>
<?php if($i != 0 && $i % 2 == 0) : ?>
</div><!--/.row-->
<?php endif; ?>
<?php endforeach; ?>
<?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?>
</div><!--/.row-->
<?php endif; ?>

Answer 5

Sí, tú puedes hacerlo.

<?php
$args=array(
''post_type'' => ''artist'',
''post_status'' => ''publish'',
''posts_per_page'' => -1,
''caller_get_posts''=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '''';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_field(''artist_link''); ?>"><?php the_field(''artist_name''); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field(''artist_photo''); ?>" alt="" class="img-responsive" /></a></p>
<?php
if($i % 4 == 0) { ?>
</div>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>

Answer 6

// Opening container or wrap outside of the loop
<div class="container my-container">
// start the loop
<?php
$args=array(
''post_type'' => ''post'',
''post_status'' => ''publish'',
''posts_per_page'' => 18
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 3 == 0) { ?>
<div class="row">
<?php
}
?>
<div class="col-md-4">
<div class="my-inner">
// all your content, title, meta fields etc go here.
</div>
</div>
// increment the loop BEFORE we test the variable
<?php $i++;
if($i != 0 && $i % 3 == 0) { ?>
</div><!--/.row-->
<div class="clearfix"></div>
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
</div><!--/.container-->