Aunque en WordPress.org y en otros portales puedes encontrar una gran cantidad de temas para tu web, quizá necesitas uno que se adapte 100% a tu negocio. Por ello, es quizá que quieras poder desarrollar tu propio tema. En este artículo encontrarás los primeros pasos para hacerlo.
Una pequeña advertencia: el artículo requiere de cierta experiencia en WordPress y conocimientos básicos de desarrollo y diseño web. ¿Ya has trabajado con HTML5, CSS y PHP, y sabes qué es un tema de WordPress? Entonces, ¡puedes empezar!
Consigue tu plan de hosting WordPress administrado y ten tu página web siempre actualizada y a máximo rendimiento.
Primeros pasos
Antes de empezar a escribir las primeras líneas en el editor de código, necesitas un entorno de desarrollo adecuado con un servidor web (Apache, Nginx), una base de datos (MySQL/MariaDB), PHP y, por supuesto, WordPress.
Preferiblemente, debería ser similar al entorno del servidor en el que se ejecutará la instalación del WordPress en producción.
Si quieres desarrollar temas que puedan emplear otras personas, deberías instalar varias versiones de WordPress. De manera estándar, al menos dos versiones anteriores.
puedes encontrar versiones antiguas en la página de releases de WordPress.org.
Los profesionales facilitan su trabajo utilizando máquinas virtuales, Docker y/o Vagrant (échale un vistazo a Varying Vagrant Vagrants).
En WordPress, deberías habilitar algunas opciones de debug para facilitar la búsqueda de errores. Puedes activar el modo "Debug" de WordPress en el archivo wp-config.php en la carpeta de WordPress. Busca la línea:
define( 'WP_DEBUG', false );y cambia "false" a "true".
En el modo de debug, podrás acceder a información relativa a los errores.
WP_DEBUG_LOG escribirá estos en el directorio wp-content, WP_DEBUG_DISPLAY mostrará los errores que ocurran en pantalla. Ambos también se activan en el archivo wp-config.php. Si lo deseas, puedes instalar además algunos plugins útiles de depuración para desarrolladores.
Un poco de contexto: Cómo construye WordPress una página
Para un tema funcional, en realidad solo necesitas dos archivos de código: el archivo de plantilla index.php como modelo para la estructura de tu página y el archivo style.css para el diseño.
Los archivos de plantilla consisten en HTML, PHP y etiquetas de la plantilla de WordPress (más adelante hablaremos de ello).
Casi todos los temas incluyen más que los dos archivos mencionados; de hecho, varias plantillas. Esto se vuelve comprensible al examinar el funcionamiento de Wordpress.
Cuando se accede a una URL, WordPress construye dinámicamente la página correspondiente a partir del contenido en su base de datos, según lo dicta el tema asociado. Para ello, primero determina qué tipo de publicación o página es y busca el archivo de plantilla correspondiente.
WordPress conoce numerosos tipos de páginas y elementos de la misma (página de inicio, entradas de blog, páginas estáticas, pie de página y encabezado, barras laterales, menú de navegación, entre otros) y sigue una jerarquía predeterminada al seleccionar plantillas (puedes profundizar en ello aquí).
Por ejemplo, si WordPress espera una página estática, buscará sucesivamente un archivo de plantilla asignado personalizado, un archivo con partes relevantes de la URL del tema ("Slug") o su ID en el nombre del archivo, y archivos llamados page.php o singular.php. Si ninguno de estos archivos existe, recurrirá al archivo index.php.
Cómo estructurar una página en WordPress
Una vez que WordPress ha seleccionado una plantilla, como por ejemplo index.php, comienza a procesarla. Las páginas de WordPress suelen estar compuestas por diferentes secciones, cada una de las cuales puede tener sus propias plantillas.
WordPress reconoce elementos como header.php, footer.php o comments.php; pero también puede definir sus propias plantillas parciales. Puede cargar una sección header.php separada, por ejemplo, con get_header(), o una plantilla propia con get_template_part() copiando el siguiente código:
get_template_part( 'tu-seccion-especial' );Tienes varias opciones para definir diferentes tipos de páginas y secciones, y luego proporcionar a WordPress la plantilla deseada. Esto te permite externalizar secciones reutilizables sin tener que copiarlas en todas las plantillas en las que aparecen.
Leyendo contenidos: el Loop de WordPress
No muy lejos de la inclusión del encabezado, en la mayoría de las plantillas encontrarás líneas de código similares a las siguientes:
?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// Contenido de la entrada, por ejemplo, con su propia plantilla "content-page.php":
get_template_part( 'content', 'page' );
endwhile;
endif;
?
El llamado Loop de WordPress es el mecanismo estándar mediante el cual recorre las entradas disponibles en la base de datos y las presenta en la página llamada, junto con cierta información específica.
Aquí queda patente el origen de WordPress como software de blogs; en realidad, la estructura while no es necesaria para páginas estáticas (aunque tampoco afecta negativamente).
Tú controlas qué información de la base de datos muestra WordPress en la página utilizando dinámicamente los llamados "Template Tags"; es decir, etiquetas de PHP que hacen referencia a funciones incorporadas de WordPress.
Ya hemos visto algunos "Template Tags" como get_header() o get_template_part(), pero hay muchos más. El espectro de datos que se pueden mostrar va desde títulos y enlaces de blogs hasta contenidos de publicaciones y listados de categorías, comentarios o autores.
Muchos "Template Tags" deben o pueden ser colocados en el Loop, ya que requieren contenido de varias entradas.
Diseño y funcionalidad
Hasta este punto, hemos estado tratando "solo" con la disposición de los contenidos de la base de datos. La presentación de todo esto puede ser controlada como de costumbre a través de CSS.
El archivo style.css no es obligatorio, pero sí necesario. Puede crear y cargar hojas de estilo -stylesheet- adicionales. Las funciones de JavaScript necesarias pueden incluirse por defecto en el archivo opcional, pero prácticamente necesario en casi todos los temas, en el archivo functions.php.
En él, además, puedes referenciar otros scripts y bibliotecas. Sin embargo, ten en cuenta que WordPress ya trae consigo una serie de archivos JavaScript, incluyendo bibliotecas comunes como jQuery, y la mayoría de las instalaciones también utilizan numerosos plugins con código JavaScript.
Para que todo funcione sin problemas, debes utilizar el método estándar de WordPress para cargar hojas de estilo y JavaScript. Por lo tanto, carga archivos CSS en functions.php utilizando la función wp_enqueue_style() y archivos JavaScript de manera análoga con wp_enqueue_script().
Y aquí va un consejo: Si tu o tu usuario quieren cambiar el tema de nuevo por cualquier motivo, no deberías perder ninguna funcionalidad. Por lo tanto, es mejor no incluir tales funciones en functions.php, sino en un plugin.
Editor Gutenberg
Desde finales de 2018, con WordPress 5.0, "Gutenberg" se ha convertido en el nuevo editor estándar de WordPress, algo que debes tener en cuenta a la hora de desarrollar tu propio tema.
Con Blocks y Block Patterns se introduce un nuevo concepto de diseño y se brindan capacidades extendidas para los editores (como paleta de colores, tamaños de texto, estilos personalizados para editores, estilos de bloque), que puedes proporcionar a los usuarios de tu tema.
Las configuraciones correspondientes también se realizan en functions.php a través de la función add_theme_support() (que también maneja muchas otras características de tu tema).
También debes adaptar el diseño de los bloques de Gutenberg al tema que estés creando para WordPress. Puedes encontrar más información al respecto en el Manual de Gutenberg.
Cómo desarrollar su propio tema de WordPress: ¡Empecemos!
Como puedes ver, el desarrollo de temas de WordPress requiere un poco de aprendizaje, incluso si ya estás familiarizado con HTML, CSS y código PHP.
Una buena referencia para esto es el Codex de WordPress. Sin embargo, puedes simplificar significativamente tu trabajo al analizar temas existentes o utilizarlos como base para tus propias creaciones. Todos los temas ofrecidos en WordPress.org están bajo la Licencia Pública General GNU (GPL), por lo que pueden ser utilizados y adaptados libremente.
Además, los creadores de WordPress proporcionan un Starter Theme específicamente para este propósito, con numerosas plantillas comentadas y cinco hojas de estilo de ejemplo, llamado "Underscores" o "_s" Theme. En https://underscores.me/ no solo encontrarás más información al respecto, sino que también puedes generar tu tema con un Slug personalizado -con el nombre del tema-.
Ahora que ya sabes cuáles son los primeros pasos para crear un nuevo tema WordPress, ¿a qué estás esperando?
