Cómo crear un tema en WordPress desde cero
Crear nuevos temas de WordPress (también llamados temas hijo o child themes) es una buena idea si nos interesa obtener una personalización completa de nuestro sitio web y, además, no depender de las plantillas que otros hayan desarrollado. Obviamente, requiere una cantidad de trabajo muy superior a la que supone instalar cualquier tema y personalizarlo a nuestro gusto, pero los resultados siempre serán mucho más adaptados a nuestras necesidades, a la vez que mantenemos el control completo del sitio web.
Tras adquirir tu Hosting WordPress, crear un tema requiere tener un conocimiento básico del CMS y del API que nos ofrece, para poder acceder a los contenidos y presentarlos a nuestro modo, así como para integrar los bloques típicos que componen un sitio, como menús, widgets y otros elementos. Sin embargo, salvado este punto, resultará una tarea sencilla para todos aquellos que ya tienen conocimientos sobre los lenguajes básicos de la web: HTML, CSS y quizás un poco de JavaScript.
Ventajas de crear nuestro propio tema en WordPress
WordPress es un CMS muy utilizado, el más popular de todos los que existe para la creación web, y hay miles de profesionales que se ganan la vida implementando este gestor de contenidos para todo tipo de proyectos. Muchos de ellos crean y comparten sus propios temas gráficos, conocidos entre los desarrolladores como templates o themes. Y saber hacer nuestro propio tema es un excelente recurso y un paso más en nuestro conocimiento de WordPress, ya que evitaremos problemas como los que explicamos a continuación.
Sin limitaciones
No cabe duda de que estas plantillas son un gran aliado para los desarrolladores que desean trabajar rápido, pero también tienen algunas limitaciones. Entre los problemas que podemos encontrar, por ejemplo, nos encontramos que hay aspectos y funcionalidades de una página web que no resultan configurables a través del administrador de WordPress. Por ello, para llevar a cabo algunas tareas de personalización, hay que invertir mucho tiempo en estudiar el tema, con la frustración y dolores de cabeza que esto conlleva. Por ese motivo, una de las primeras cosas que debemos aprender si queremos dar un paso más en nuestro conocimiento y uso de WordPress es saber crear nuestros propios temas.
Evitar un diseño repetido
No hay peor sensación para un cliente que encontrar una y otra página con el mismo diseño que el suyo pero con ligeros cambios en colores o en la disposición de los elementos. Como desarrolladores o diseñadores web, no podemos permitir que nuestros clientes se lleven ese disgusto, ya que afectará negativamente a nuestra reputación como profesionales. El diseño debe adaptarse al cliente, ofreciendo algo original. Sin embargo, una plantilla puede generar la sensación contraria: el cliente se debe adaptar al diseño de un tema.
Mejorar la optimización web
Sin entrar en el aspecto estético, uno de los mayores problemas de los temas es la optimización de las páginas web de los clientes. Los temas gráficos a menudo carecen de ella. En general, están pensados para entrar por los ojos de las personas, pero no para ser fáciles de procesar por las máquinas.
En resumen, habitualmente producen sitios poco accesibles y lentos, que tardan en cargar y que disponen de muchas librerías JavaScript o CSS frecuentemente poco utilizadas o mal implementadas. Todo esto perjudica a la experiencia de usuario y, lo que es más importante, puede repercutir negativamente en el posicionamiento en buscadores. Obviamente, si nosotros diseñamos el tema gráfico, podemos evitar todos estos posibles aspectos negativos, creando una web original, rápida y capaz de posicionar mejor en Google.
Mejorar la seguridad
Otro tema importante del desarrollo de nuestros propios temas es la seguridad. Las plantillas pueden tener agujeros de seguridad que no sabemos que están allí. En muchos casos, puede deberse a un template poco actualizado o a un descuido de los desarrolladores que lo crearon. Sin embargo, si nosotros somos los responsables del desarrollo del tema, es más fácil detectar y corregir los errores.
Además, si escatimamos en la inversión en plantillas y vamos a parar a sites poco fiables, siempre existe la posibilidad de que nos instalemos una plantilla contagiada con malware, creada con la intención de infectar sitios y realizar acciones fraudulentas. Si este fuera tu caso, o simplemente quieres saber más al respecto, también te presentamos soluciones a un WordPress hackeado.
Cómo crear un tema propio para WordPress
Paso 1. Crear la carpeta para guardar la plantilla
Un tema de WordPress no es más que una carpeta que contiene los archivos básicos que componen nuestro sitio web; es decir, los archivos PHP, CSS y Javascript. Los temas se alojan en la carpeta wp-content/themes de tu servidor y, si abrimos esa carpeta, comprobaremos que en nuestra instalación 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 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. Al nuestro lo vamos a llamar «Inicial», así que el que vamos a crear estará en la ruta wp-content/themes/inicial.
Obviamente, como la carpeta no tiene nada, este paso no habrá servido de mucho.
Si una vez creada nuestra carpeta, nos vamos a la sección Apariencia>Temas dentro del panel de administración de WordPress, podremos ver los temas instalados y, más abajo, un aviso sobre un tema dañado, que es el que acabamos de crear. Si observamos bien, encontraremos que el propio WordPress nos está avisando del problema que ha encontrado con nuestro tema: falta la hoja de estilos, así que vamos a crearla.
Paso 2. Configurar la hoja de estilos CSS
Dentro de la carpeta, vamos a colocar un par de archivos para componer los elementos esenciales de todo tema de WordPress:
- PHP: que contendrá el código de nuestra plantilla principal.
- CSS: que contendrá los estilos del sitio web y una serie de metadatos para definir el tema nuevo.
La configuración de la hoja de estilos CSS es fundamental en la creación de nuestra plantilla de WordPress, ya que es donde vamos a declarar el nombre del tema, el autor y toda una serie de datos extra. Por supuesto, además de todos estos metadatos, colocaremos los estilos de nuestro sitio web.
Estos serían los datos mínimos a colocar en nuestro archivo de estilos CSS, junto con unas primeras declaraciones de aspecto del sitio web.
/*
Theme Name: Inicial
Theme URI: https://url-tema-inicial.example.com
Author: Arsys Internet
Author URI: https://arsys.es
Description: Creamos este template a modo de demostración
Version: 0.0.1
Tags: responsive, demo theme wordpress
*/
body {
font-size: 16px;
background-color: #f0f0f0;
padding: 1rem;
}
Como puedes ver, el comentario del principio de este CSS indica los datos del tema. Estos son muy importantes a la hora de categorizar el tema y aclarar su procedencia.
Una vez creada la carpeta y el archivo style.css, tu tema ya debe estar visible desde el panel de administración de WordPress y podrías seleccionarlo como cualquier otro ya instalado en el CMS. Sin embargo, todavía es un poco pronto para activarlo, ya que será fundamental crear también algo de código para generar su contenido HTML.
Paso 3. Configurar la plantilla con index.php
Ahora vamos a abordar el archivo index.php de nuestro tema, que sirve para definir la plantilla principal. En este archivo, colocaremos el código PHP para generar el HTML que debe ser enviado al cliente, que podrá ser tan complejo como lo requiera el proyecto. Aquí veremos una sencilla aproximación a lo que sería la programación del tema que nos permita mostrar un listado de las últimas entradas del blog.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Inicial Theme</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:300,400,700&display=swap' rel='stylesheet'>
<link rel='stylesheet' href='<?= get_template_directory_uri() ?>/style.css'>
</head>
<body>
<div class='container'>
<header class=''>Inicial Theme</header>
<main>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<h1><?= the_title(); ?></h1>
<div><?= the_content(); ?></div>
<?php
}
}
?>
</main>
<footer>
@ Mi tema 2020
</footer>
</div>
</body>
</html>
En este código, encontramos dos ejemplos interesantes de las herramientas que nos aporta WordPress para programar los sitios web:
- La función get_template_directory_uri(). Esta es interesante para crear un enlace con los archivos del template (en este caso, la hoja de estilo), de manera que WordPress nos asegure que la ruta va a funcionar correctamente. Debemos usar este tipo de rutas para enlazar correctamente los assets del tema, como es el caso de la hoja de estilo CSS.
- Loop de WordPress. Vemos también un ejemplo de iteración de WordPress para la extracción de contenido, es lo que se conoce como Loop.
En este ejemplo, se recorren los post recientes, comenzando por el más nuevo, y para cada uno se escribe su título y cuerpo. Para ello, usamos un bucle while de PHP y en cada iteración funciones diversas del API de WordPress necesarias para acceder a sus contenidos.
Paso 4. Activar el tema creado
Ahora podrías activar este tema, del mismo modo que activas cualquier otro tema de WordPress, en la sección Apariencia > Temas. Allí encontrarás el nuevo tema que acabas de crear, con el nombre tal como hayas indicado en el archivo style.css.
Conseguir que se muestre una miniatura del tema es tan sencillo como añadir la correspondiente imagen en la carpeta del theme, junto con los archivos index.php y style.css, con el nombre de «screenshot.png».
Paso 5. Personalizar tu nuevo tema
Llegado a este punto, WordPress nos ofrece multitud de herramientas para descomponer el template en segmentos (como cabecera o pie) que puedan ser reutilizados a lo largo de las diversas plantillas del sitio web, así como la posibilidad de escribir funciones que nos permitan inyectar código adicional en la parte de la cabecera y el pie. Por supuesto, también podemos crear diversos archivos adicionales, con plantillas personalizadas para un detalle de un post, para una página, etc.
Estas son solamente algunas de las muchas posibilidades que nos ofrece el poder crear nuestro propio tema. Si quieres ir un poco más allá, también puedes añadir plugins para optimizar WordPress.
Conclusiones sobre crear tu propio tema en WordPress
En definitiva, la creación de tu propio tema en WordPress no es únicamente una cuestión estética, sino también una estrategia clave para impulsar tu marca. Al diseñar un tema personalizado, te destacas visualmente, pero también te ayuda a posicionarte mejor en los motores de búsqueda, mejorando así tu visibilidad. Además, este enfoque te ayudará a retener mejor a tus visitantes a través de una experiencia única.
Por otro lado, recuerda que la elección de un dominio y un hosting web adecuados son también elementos clave si estás pensando en crear una página web, ya que te ayudarán a reflejar mejor la identidad de tu marca como también garantizar la velocidad y accesibilidad que ayude a mejorar la experiencia para el usuario.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.