Actualizado el lunes, 30 mayo, 2022
Si por más que buscas no encuentras un tema que se adapte a lo que necesitas, la solución puede ser crear un tema propio en WordPress o un tema hijo. Con la aparición de la edición de sitios FSE cada vez se vuelve menos necesario tener que originar un tema propio, aunque aún puede resultar interesante en algunos casos concretos. En el artículo de hoy, desgranaremos como realizar un tema básico no preparado para FSE y un tema hijo de un tema existente.
No te voy a engañar, realizar un tema desde 0 es una tarea larga, pero la satisfacción de haber creado un tema por ti mismo, recompensará todo el trabajo. Para efectuar tu tema necesitarás conocimientos de HTML, CSS y PHP. Sin embargo, desde dinahosting, te daremos opciones según los conocimientos que tengas.
Recuerda que tienes a tu disposición toda la documentación oficial de WordPress, respecto a la creación de temas por si te surgen dudas.
Índice de contenidos
Requerimientos mínimos
Para poder realizar tu tema, hay algunas cosas que necesitarás:
Un servidor para alojar WP
Tienes varias opciones disponibles. La más habitual es crear un servidor local en tu ordenador para tener un acceso más rápido a los archivos. Si trabajas en Windows o Mac, te recomiendo instalar XAMPP.
Otra opción posible es trabajar directamente desde tu alojamiento y conectarte a tu servidor real con SSH desde tu editor de código, para así, poder modificar los archivos que estén subidos. Recuerda que desde el Panel de Control de dinahosting es muy sencillo conectarte a tu hosting empleando SSH.
WordPress
Tanto si empleas un servidor local como un hosting real, es necesario que tengas instalado el CMS para poder ir viendo los cambios que realizas. Recuerda que desde el Panel de Control puedes instalar WordPress en muy pocos clics.
Recuerda que en dinahosting tenemos para ti un Hosting WordPress al mejor precio, muy fácil de instalar y con las mejores configuraciones de serie.
Un editor de código
En un post anterior te hemos recomendado los mejores editores de código. Para este caso concreto te recomendaría Visual Studio Code, ya que permite conectarte por SSH, si quieres trabajar en local, además posee varios plugins relacionados con WP para ayudarte con el autocompletado cuando escribas el código.
Opción avanzada para crear un tema en WordPress
Si tienes conocimientos de HTLM, CSS y PHP y quieres realizar todo por tu cuenta; esta es la opción indicada. Si alguna vez, has abierto la carpeta de un tema, habrás podido apreciar como tiene una estructura muy jerarquizada. Es necesario seguir esa estructura y tener un mínimo de archivos para que el tema funcione correctamente.
- Carpeta del tema
- functions.php (impresindible) En este archivo se pueden definir métodos que realicen acciones concretas para nuestro tema: definir un tamaño de imagen personalizado o registrar nuestros CSS personalizados.
- index.php (imprescindible) Define la plantilla principal. Posee el código PHP que generará el código HTML que veremos en nuestro navegador.
- page.php (imprescindible) Define la plantilla de páginas.
- single.php (imprescindible) Define la plantilla de artículos.
- screenshot.png Una imagen (captura de pantalla) de como queda nuestro tema cuando está activo. Tiene un tamaño de 1200 x 900 píxeles.
- style.css (imprescindible) La hoja de estilos principal de la cual se cogerán todas las reglas CSS a emplear dentro de nuestro tema.
- Otras páginas con extensión .php Definen el comportamiento y estilo de nuestro tema
Creada la organización mínima el siguiente paso será añadir el código necesario en cada uno de los archivos para que: realice los hooks buscando contenido, genere partes dinámicamente, añadir marcado para los estilos, enlazar con otras partes como header.php y footer.php que son comunes a toda la web… No te pierdas este interesante artículo de Yoast sobre los tipos de plantilla y como funcionan.
Puedes imaginar que es un proceso bastante largo y en el que hay que prestar especial atención a la escritura de código.
Opción intermedia para crear un tema en WordPress
Hemos visto en el apartado anterior que es muy importante seguir la estructura y crear todos los archivos necesarios para crear un tema en WordPress. Si no generas todos los archivos necesarios, puedes encontrarte con sorpresas tan desagradables como que no se ven los comentarios de tus artículos; o que es imposible paginar tus entradas. Para evitar estas cosas y acelerar un poco el proceso de creación del tema te recomendamos underscores.me.
Underscore genera a partir del tema (disponible en GitHub) un tema básico con toda la estructura creada (sin estilos). Para conseguirlo solamente tendrás que cubrir el nombre del tema en el formulario, y se te descargarán los archivos básicos que un tema completo de WordPress necesita.
- Toda la estructura de plantillas necesaria en HTML5
- Etiquetas personalizadas al nombre del tema escogido
- Ajustes extras (como un menú responsive preparado para colapsarse en móviles)
- 5 diseños de muestra en la carpeta /layouts para mostrar el contenido según nos convenga
- Todos los archivos comentados para poder comenzar con ellos.
A partir de aquí lo único que tendríamos que hacer es incluir las clases necesarias en nuestras plantillas PHP, así como el código CSS necesario en styles.css para darle formato a nuestro tema.
Opción sencilla para crear un tema en WordPress
Si lo tuyo no es la programación, ni tampoco sabes de marcado CSS ni HTML, también tenemos una opción para ti: themesgenerator.com. Themes generator es una aplicación web, que tras registrarte te permite generar una plantilla a medida, de manera completamente visual. Moviendo sliders, cambiando colores en selectores…
Crear un tema hijo en WordPress
Puede ser que lo que necesites no sea crear un tema WordPress por completo… sino modificar alguna característica de uno existente para adaptarlo a la idea que tienes en la cabeza. ¡Lo que necesitas es un tema hijo! Presta atención, a continuación te explicaremos como realizar un tema hijo desde un tema que te guste.
Paso 1. Escoge el tema que vayas a personalizar
Parece evidente, pero es necesario que el tema Padre (tema que vas a modificar) esté instalado en el WordPress. Un tema hijo, o child theme es una variación de un tema existente. Es cierto que estos cambios podrías hacerlos directamente en los archivos del tema; sin embargo, esto provocaría que cuando existiesen mejoras o actualizaciones del tema estás eliminasen las modificaciones creadas por ti. Haciendo un tema hijo separamos los archivos del tema, de los que tú añadas o modifiques.
Paso 2. Creación de archivos necesarios
Como hemos explicado al principio de este post, la estructura de un tema es muy importante. En un tema hijo, no es necesario realizar la jerarquía completa de los archivos necesarios; solamente son necesarios los archivos modificados. Un ejemplo de los archivos incluidos dentro de la carpeta del tema hijo podrían ser:
Style.css
Dónde definiremos nuevos estilos. Empezará de la siguiente forma:
/*
Theme Name: Nombre tema hijo
Theme URI: URL
Version: 1.0
Description: Tema hijo de X
Author: Tu
Author URI: tu URL
Template: X
*/
/*----------------- Cambios a partir de aquí -------------------------------*/Functions.php
Dónde importaremos los estilos del tema padre, además de poder añadir funciones propias.
function estilo_tema_hijo(){ wp_enqueue_style( 'style.css', '[URL_CSS_PARENT]' );}add_action( 'wp_enqueue_scripts', 'estilo_tema_hijo' );Screenshot.png
Este PNG puede ser una captura de pantalla del WordPress con el tema instalado, o lo que tú prefieras. Recuerda que el tamaño recomendado es: 1200 x 900 píxeles.
Si existiese alguna plantilla que quisiésemos modificar ad hoc: page.php, single.php, etc. Únicamente tendríamos que duplicar la plantilla del tema padre, hacer las modificaciones y subirlas a la carpeta del tema hijo.
A día de hoy, y tal como está avanzando WordPress con la edición de sitios FSE, lo más recomendable sería hacer temas hijos y no crear un tema de WordPress desde cero.
Extra tip: Plugin Child Theme Configurator
Si te parece interesante de lo de hacer un child theme, pero te da pereza ponerte a ello. O simplemente te gusta trabajar con plugins, tienes disponible Child Theme configurator. Un plugin con el que realizar un tema hijo sin necesidad de realizar ningún archivo, ni preocuparte por entender una sola línea de código.
Hasta aquí el post. ¿Te ha resultado útil este artículo? ¿Tienes algún tema hijo? ¡Te leemos en comentarios!
Deja una respuesta