Publicar entradas en dos columnas en WordPress
La salida de entradas en dos columnas en WordPress es una innovación Visual frecuente en diferentes sitios. En este artículo, veremos cómo hacerlo. Se ve muy bonito y en algunos de mis proyectos también uso esta forma. Pero mi sitio está dedicado principalmente a los principiantes, así que les diré cómo hacer que todas las entradas del bloque no sean una cinta sólida, sino que se muestren en dos columnas. Por lo tanto, para hacer esta presentación de información, es necesario abrir un archivo que tiene una salida de blog, por ejemplo, index.php o category.php y reemplazar Su contenido que comienza con esta línea:
|
1 |
<?php if (have_posts()) { ?> |
Y termina con esto:
|
1 2 3 4 5 6 |
<div class="navigation"> <div class="alignleft"><?php previous_posts_link('Los registros siguientes') ?></div> <div class="alignright"><?php next_posts_link('Los registros anteriores') ?></div> </div> <?php } ?> |
Esto debe reemplazarse con este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php if (have_posts()) { ?> <?php $i = 0; ?> <?php $per_column = ceil($posts_per_page / 2); ?> <?php if ($wp_query->post_count <= $posts_per_page) $per_column = ceil($wp_query->post_count / 2); ?> <div class="column"> <?php while (have_posts()) { the_post(); $i++; ?> <div class="post"> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <div class="date"><?php the_time('d.m.Y') ?></div> <div class="entry"> <?php the_excerpt(); ?> </div> </div><!-- .post --> <?php if ($i == $per_column) { ?> </div><!-- .column --> <div class="column right"> <?php } ?> <?php } ?> </div><!-- .column --> <div class="clear"></div> <div class="navigation"> <div class="alignleft"><?php previous_posts_link('Los registros siguientes') ?></div> <div class="alignright"><?php next_posts_link('Los registros anteriores') ?></div> </div> <?php } ?> |
Pero eso no es todo. Para Mostrar correctamente las columnas, debe agregar esta información en archivo CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.column { float: left; width: 48%; } .column.right { float: right; } .clear { clear: both; height: 0; overflow: hidden; } |
¡Eso es todo! Puedes disfrutar de nuestra nueva publicación en dos columnas.
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?