Empezamos a dar los primeros pasos para crear un tema propio de WordPress, una tarea que resulta especialmente útil cómo vimos en ¿Por qué conviene saber cómo crear nuestros propios temas de WordPress? y a la que vamos a destinar algunos artículo más. Ahora, comenzamos con la parte más práctica y un sencillo ejemplo de template que nos servirá para sentar las bases que nos permitirán crear temas gráficos tan complejos como queramos.
Crear nuestro primer tema en WordPress
Los temas de WordPress se alojan en la carpeta wp-content/themes de tu servidor. Si abrimos esa carpeta comprobaremos que en nuestra instalación de WordPress ya hay algunos subdirectorios allí situados.
En la siguiente imagen podemos visualizar las carpetas incluidas en una instalación básica de WordPress, recién creada. Cada uno de los subdirectorios que vemos es un tema de WordPress que estará disponible para usar en el sitio web.
Nosotros podemos crear una nueva carpeta en wp-content/themes, con cualquier nombre que deseemos, y con ese simple paso habremos creado nuestro primer tema. Obviamente, como la carpeta no tiene nada, este paso no habrá servido de mucho.
Si, una vez creada nuestra carpeta, nos vamos al panel de administración de WordPress y en la sección Apariencia>Temas podremos ver lo que ha ocurrido.
En esta página encontraremos los temas instalados en este sitio web y en la parte de abajo encontraremos un aviso sobre un Tema dañado, que es el que acabamos de realizar nosotros y sobre el que todavía tenemos que trabajar.
Si observamos bien, encontraremos que el propio WordPress nos está avisando del problema que ha encontrado con nuestro tema. En este caso, el problema es Falta la hoja de estilo, así que vamos a crearla.
Crear la hoja de estilo y el índice
Para ello, vamos a crear un archivo dentro del directorio de nuestro template que se llame style.css. Podemos dejarlo en blanco por ahora. Si recargamos el admin de WordPress nos informará que, además, nos hace falta también un index.php, por lo que vamos a crear también ese archivo.
Ahora el contenido de nuestra carpeta de temas es el siguiente:
Si recargamos ahora la página de administración de WordPress veremos que nuestro tema ya no está dañado, sino que es un tema como cualquier otro. Incluso aunque no hayamos metido ningún código en los archivos style.css e index.html.
Metainformación del tema
Observaremos que, de cada tema disponible en la instalación del WordPress se encuentra una serie de datos de interés. Esos datos se pueden definir en el archivo style.css, por medio de un comentario que colocaremos en la parte de arriba.
Podemos tomar como guía el comentario de cualquier tema ya creado en la carpeta de los temas y adaptar el texto del comentario, colocando nuestros propios datos. Para ello, puedes abrir el style.css que hay dentro de la carpeta twentyfifteen del tema del mismo nombre, por ejemplo.
Al final tendrás un comentario CSS en tu propio style.css que podrá ser algo como esto:
/* 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. */
Paralelamente, encontramos una imagen que ilustra el aspecto del tema y que en nuestro recién creado template todavía aparece en blanco. Esa pantalla la podemos crear fácilmente, simplemente creando un archivo llamado screenshot.png, que debemos colocar en la carpeta de nuestro template.
Una vez editada la metainformación y la imagen del tema, podremos recargar el administrador del WordPress y comprobar que nuestro tema ya se encuentra mucho más detallado. Si, además, accedemos al propio template para ver el detalle, encontraremos sus características completas, definidas en el CSS.
Editando index.php
Ha llegado el momento de hacer nuestro primer Hola Mundo en el desarrollo de templates. Para ello, vamos a editar ahora el index.php y vamos a colocar un código de muestra, simplemente por tener alguna cosa que podamos ver a la hora de acceder a nuestro sitio web.
Podemos usar un código como éste en nuestro index.php:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mi Primer Tema</title> </head> <body> <h1>Este es mi primer tema</h1> <p> <?php bloginfo(); ?> </p> </body> </html>
Observa que el archivo index.php es un archivo en el que se combina código HTML con código PHP embebido, algo que debes conocer de sobra si estás familiarizado con estos lenguajes.
En este caso hemos colocado, dentro de código PHP, una llamada a una función que forma parte del API de WordPress: bloginfo(), que nos muestra en este caso el nombre del sitio web sobre el que estamos trabajando.
Finalmente, podemos activar este tema, desde el admin de WordPress, pulsando el correspondiente botón.
Y para acabar, podemos acceder a la home de nuestro sitio web, para ver el template en funcionamiento, que es algo tan sencillo como esto:
En próximos artículos, seguiremos profundizando en cómo podemos crear los temas de WordPress, centrándonos, entre otros puntos, en mejoras en el diseño, la integración de archivos externos (imágenes, CSS), el API de PHP de WordPress que nos permite acceder a las funcionalidades y comportamientos incorporados en el CMS. ¡Permanece atento a nuestro blog!