El loop es la matrix de WordPress, pero son muy pocas las páginas las cuales hacen un uso más exigente de este modulo, hoy les mostrare como realizar un loop algo diferente.
La imagen que ven a continuación hace parte de una de las páginas que administro y el loop está dividido en 2, a pesar de que es el mismo loop, un primer artículo que tiene un thumbnail definido de un tamaño en particular y esta hacia la izquierda, y los demás artículos alineados hacia la derecha.
Viéndolo desde HTML puro lo que queremos lograr es simple y sencillo.
<div class="destacada-1"> <div class="entrada">ENTRADA 1, su título aquí.</div> </div> <div class="destacada-2"> <div class="entrada">ENTRADA 2, su título aquí</div> <div class="entrada">ENTRADA 3, su título aquí.</div> <div class="entrada">ENTRADA 4, su título aquí.</div> <div class="entrada">ENTRADA 5, su título aquí.</div> </div>
Dentro de tu loop deberás de introducir un código muy parecido a este, recuerda que este es un ejemplo fácil de comprender y puede ser mejorado.
<div id="loop"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php $post_actual = $wp_query -> current_post; ?> <?php if($post_actual == 0) { ?> <div class="destacada-1"> <?php the_title(); ?> </div> <?php } ?> <?php if($post_actual == 1 || $post_actual == 2 || $post_actual == 3 || $post_actual == 4) { ?> <div class="destacada-2"> <?php the_title(); ?> </div> <?php } ?> <!-- Si no hay post mostramos este mensaje --> <?php endwhile; else: ?> <?php _e('Lo sentinos no hay entradas .'); ?> <!-- Cerramos el primer if --> <?php endif; ?></div>
La linea numero 07 lo que hace es preguntar por el primer post el cual en PHP corresponde a la posición 0.
<?php if($post_actual == 0) { ?>
La linea numero 11 pregunta por los siguientes posts los cuales se encuentran almacenados en las posiciones 1, 2, 3, 4 que correspondieran a los post 2, 3, 4 y 5.
<?php if($post_actual == 1 || $post_actual == 2 || $post_actual == 3 || $post_actual == 4) { ?>
Luego de realizar todo esto, basta con hecharle mano al CSS e ir dándole estilos diferentes a las clases destacada-1 y destacada-2.
Todo consiste en abrir y cerrar la capa según el post que se esté mostrando, te regalo estos link donde podrás encontrar más información de cómo usar IF o SWITCH
http://php.net/manual/es/control-structures.if.php
http://php.net/manual/es/control-structures.switch.php
Espero y les sirva mucho para comenzar hacer modificaciones a su blog y al de sus clientes.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Desde mi opinión se podría sustituir la linea 14 por la 12 con un <?php } else { ?>, eliminando el segundo if, ya que a partir de la primero interación siempre va a ser diferente a 0.
Y como nota, la linea 4 se podría eliminar por la 6 del siguiente modo: <?php if($wp_query->current_post; == 0) { ?>, quitándonos la declaración de una variable al igual que su uso, que sólo se va a usar una vez.
Genial tip gracias Fernando, y si Rubén, si se podría, también es un buen tip para quien no dispone de los conocimientos, de esa forma estas diciendo que si es el numero 1 (osea el 0) tenga X estilo y si es mayor de 0 tenga otro.
El tip de Fernando también tiene su razón de ser pues sabiendo ese método podrías decir que el primer post tenga un estilo, los 4 siguientes tengan otro y el resto tenga otro, usando también tu tip en el proceso. Es cuestión de saber manejar el los if y switch como bien decía Fernando, las posibilidades son muchas.
Gracias pero el truco es de Rubén 😉
Por favor delen el crédito a quien se lo merece.
La costumbre. xD
Excelente guia, me puede servir para algo, sabía lo de identificar entradas pero nunca se me ocurrió hacer algo parecido, muy buena la idea.
Se puede intercalar un loop dentro de otro? Porque esta solución me vendría muy bien para un site que estoy haciendo, pero entre los destacados principales, tengo otro query para las novedades…