En éste artículo vamos a tratar el que será uno de los temas más importantes a la hora de desarrollar un theme en wordpress: el loop. Este mecanismo nos permitirá visualizar las entradas de nuestro blog de una manera dinámica.
La estructura fundamental y básica de un loop tendrá el siguiente aspecto:
<?php
if ( have_posts() ) : while ( have_posts () ) : the_post ();
?>
<?php endwhile; endif; ?>
Este código lo que haces es buscar si hay publicaciones, mientras las encuentre se llamará una vez y otra, con el bucle while, hasta que las haya visualizado todas, momento en el que finalizará. Entre las dos etiquetas <?php … ?> se situará el código html que visualizará cada entrada, como vamos a ver enseguida:
<div class="card col-12 col-sm-6 col-md-4 mb-3">
<img src="images/bootstraplogo.png" class="card-img-top img-fluid my-3" alt="imagen de prueba de la aplicacion">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Fecha / Categoria / Autor</small>
</div>
</div>
Este es el código que visualizará cada uno de los artículos que hayamos escrito. Pero cuidado, existen una serie de elementos que aún no se cargan dinámicamente: el título del artículo, un pequeño extracto del articulo, el enlace, la imagen destacada, la fecha en que se escribió, la categoría a la que pertenece o el autor que lo ha escrito. Necesitamos código php para realizar éstas tareas. Nuestro objetivo desde éste momento es ver el código que reemplazará a éstos elementos.
Donde pone categorías, lo sustituiremos por el siguiente código php:
<?php the_category(); ?>
Donde pone autor, usaremos la siguiente llamada a una función:
<?php the_author(); ?>
Para visualizar la fecha, actuaremos un poco diferente a como lo hemos hecho anteriormente:
<?php echo get_the_date(); ?>
Para que se visualice dinámicamente el titulo del artículo, emplearemos el siguiente fragmento de código:
<?php the_title(); ?>
El extracto que se muestra bajo el contenido, lo podremos rescatar con la función:
<?php the_excerpt(); ?>
Sería interesante que el usuario pudiera hacer click con el ratón sobre el título del artículo para acceder a todo su contenido. Esto es muy fácil, tan sólo hay que añadir un ancla y poner en el lugar donde irá el enlace el siguiente código php:
<a href="<?php the_permalink(); ?>"><h5 class="card-title"><?php the_title(); ?></h5></a>
Ya hemos terminado. El código completo tendría el siguiente aspecto:
<?php
if ( have_posts() ) : while ( have_posts () ) : the_post ();
?>
<div class="card col-12 col-sm-6 col-md-4 mb-3">
<img src="images/bootstraplogo.png" class="card-img-top img-fluid my-3" alt="imagen de prueba de la aplicacion">
<div class="card-body">
<a href="<?php the_permalink(); ?>"><h5 class="card-title"><?php the_title(); ?></h5></a>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
<div class="card-footer">
<small class="text-muted"><?php echo get_the_date(); ?> / <?php the_category(', '); ?> / <?php the_author(); ?></small>
</div>
</div>
<?php endwhile; endif; ?>
Con esto hemos terminado. Nos queda un detalle importante, visualizar las imagenes destacadas. Pero eso lo veremos en el siguiente artículo.
No Comments