Oferta SiteGround Black Friday

Un «loop» diferente

loop wordpress

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.

loop-diferente

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-1destacada-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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 2

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

7 comentarios en “Un «loop» diferente”

  1. Rubén Martín

    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.

    1. Xavier Ocampos

      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.

  2. 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…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio