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

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.