Creando un theme para wordpress IV

Creando un theme para wordpress IV

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

Post a Comment