Cómo aplicar un diseño a los temas propios de WordPress

En los últimos artículos hemos visto cómo crear un template desde cero y hemos empezado a trabajar con el API PHP de WordPress para controlar el comportamiento de los contenidos gestionados por este CMS con los temas propios. Sin embargo, hasta ahora era todo simple texto y un template debería destacar visualmente con otro tipo de elementos. En este artículo, damos un paso más en la creación de temas en WordPress y repasamos cómo aplicar el diseño y la maquetación web que queremos a nuestras plantillas e integrar fácilmente los archivos externos que necesitamos (imágenes, CSS, etc.)

Para definir el aspecto estético de un template propio que desarrollemos para WordPress, sólo tenemos que usar los mismos ingredientes que se utilizan habitualmente en el desarrollo de sitios web. Es decir, hojas de estilo CSS,  imágenes y componentes varios según las necesidades del proyecto, pero que tendremos que integrar en nuestro propio tema.

Integrar la hoja de estilos del template

Como explicamos en Primeros pasos para crear temas propios de WordPress, cualquier template de WordPress tiene un archivo CSS principal, en style.css. Ese archivo ha sido necesario para crear nuestro primer tema, pero de momento solo hemos colocado un conjunto de metadatos. Allí se debe escribir todo el CSS que necesitemos para el sitio web.

La hoja de estilos de un template contiene el CSS que tendría un sitio tradicional. El único detalle que necesitamos realizar en WordPress es enlazarla debidamente. Obviamente, no puedes usar directamente una ruta absoluta, porque el template debería adaptarse a cualquier dominio que pueda tener el sitio web donde se quiera aplicar y a cualquier ruta donde se instale WordPress dentro de un dominio. Tampoco es posible usar una ruta relativa, puesto que el template podría además instalarse en diferentes carpetas, o tener child themes que hereden de este template.

Para solucionarlo, WordPress nos facilita una función que nos ofrece la ruta de nuestro CSS principal: get_stylesheet_uri(). La usamos directamente en la ruta de la etiqueta <link>.

<link rel="stylesheet" href="<?= get_stylesheet_uri(); ?>">

Esa ruta enlazará con el archivo style.css, que podría tener un código como el que sigue:

/*
Theme Name: Primer tema
Theme URI: https://example.com/primer-tema
Author: Equipo técnico de Arsys
Author URI: https://www.arsys.es
Description: Este es el primer tema creado para la serie de artículos sobre la creación de templates en WordPress.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: tema, tutorial, arsys
Text Domain: primer tema

Creado con propósito didáctico.
*/

body {
 font-family: arial, verdana, sans-serif;
 background-color: #eef;
}
h1 {
 border: 1px solid #ddd;
 font-size: 1.5em;
 padding: 10px;
}
.content {
 margin: 0 auto;
 max-width: 1000px;
 width: 90%;
 background-color: #fff;
 padding: 15px;
}

Definir la cabecera y pie de página

Otra cosa habitual en un sitio web y que WordPress facilita es la creación de una cabecera y un pie, que se repetirá a lo largo del sitio. De momento, hemos creado una sola página, que es el index.php, pero más adelante podremos tener diversas páginas que sirvan para generar el HTML para la home, entradas, páginas, custom posts, etc.

Todas pueden tener la misma cabecera, definida en un archivo aparte, al que se invocará mediante la función get_header(). Por su parte, el pie se invocará mediante get_footer().

Teniendo en cuenta este detalle, el código de nuestro index.php podría quedarse de esta manera:

<?php
get_header();
?>
 <?php if ( have_posts() ) : ?>
 <ul>
 <?php while ( have_posts() ) : the_post(); ?>
 <li>
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
 <?php the_excerpt(); ?>
 </li>
 <?php endwhile ?>
 </ul>
 <?php else : ?>
 <p>
 No hay posts en estado "publicado"
 </p>
 <?php endif; ?>

<?php
get_footer();
?>

Como alternativa, las funciones get_header() y get_footer() reciben un parámetro opcional, de tipo cadena, con el que se puede invocar a ficheros diferentes. Por ejemplo get_header(‘alternativo’) presentaría en la página el archivo header-alternativo.php.

Con lo que sabemos hasta ahora, este sería el aspecto de los archivos incluidos:

• Archivo header.php. Fíjate que hemos colocado el enlace a la hoja de estilo principal del template en el <head> de la página, con lo que nuestro CSS debería afectar ya al template.

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Mi Primer Tema</title>
   <link rel="stylesheet" href="<?= get_stylesheet_uri(); ?>">
  </head>
  <body>
   <div class="content">
   <h1>
   <?php
   bloginfo();
   ?>
   </h1>

• Archivo footer.php. En este archivo colocaremos el pie de página a mostrar en todas las secciones. Tenemos que acordarnos de cerrar las etiquetas que dejamos abiertas en el header.

  <footer>
   <nav>
   <a href="#">Contacto</a>
   <a href="#">Datos legales</a>
   <a href="#">Política de privacidad</a>
   </nav>
   </footer>
  </div>
  </body>

Añadir imágenes al template

Este primer acercamiento al diseño en un template de WordPress no estaría completo si no colocamos algún gráfico, al menos para situar el logotipo de la empresa en la cabecera del sitio.

Ahora, vamos a aprender a colocar imágenes que nosotros tengamos definidas dentro de los archivos de la plantilla, aunque este conocimiento nos serviría para poder enlazar con cualquier tipo de archivo que tengamos en el directorio de nuestro tema.

Para ello, usaremos la función ya conocida bloginfo(), que nos devuelve no solo el título del sitio web, sino muchos otros datos, dependiendo de la cadena que se le pase por parámetro. Por ejemplo, la raíz de nuestro directorio del template.

Así colocamos una imagen, usando la mencionada función.

<img src="<?php echo bloginfo('template_url') ?>/images/logo100x100.jpg"/>

Hasta aquí nuestro template está tomando forma. Ya tenemos un estilo definido por un archivo CSS, podemos estructurar el código en diferentes módulos como la cabecera y el pie y somos capaces de incluir archivos externos, como imágenes.

En próximos artículos daremos unas últimas pinceladas a nuestro tema WordPress para crear diferentes páginas, con código alternativo según la sección en la que nos encontremos.