Desarrollo de temas de WordPress para principiantes

Por qué desarrollar tu propio tema de WordPress

La herramienta de creación de sitios WordPress impulsa más del 40 % de todos los sitios de Internet, y entender cómo funcionan los temas abre las puertas a un mercado enorme. Los temas prediseñados son excelentes para lanzar un sitio rápidamente, pero a menudo vienen con código innecesario, posibilidades de personalización limitadas y riesgos de seguridad. Crear tu propio tema te da un control total sobre la apariencia, el rendimiento y la funcionalidad del sitio.

El desarrollo de temas es una de las habilidades de WordPress más demandadas en el mercado freelance. Para hacer pruebas, utiliza el entorno de hosting WordPress. Los clientes están dispuestos a pagar cantidades importantes por un tema a medida que se ajuste perfectamente a sus necesidades. Empezando por comprender los fundamentos, puedes ir construyendo un porfolio y mejorar tus habilidades hasta el nivel de un desarrollador de temas profesional.

Estructura de un tema de WordPress

Un tema de WordPress se encuentra en la carpeta wp-content/themes/nombre-del-tema/ y contiene un conjunto de archivos PHP, CSS y JavaScript que, en conjunto, definen la apariencia y el comportamiento del sitio. Un tema mínimo requiere solo dos archivos: style.css con la metainformación del tema e index.php como plantilla de respaldo. Sin embargo, un tema profesional contiene muchos más archivos organizados en una estructura lógica.

Archivos básicos del tema

• style.css - hoja de estilos principal con metainformación (Theme Name, Version, Author)
• index.php - plantilla de respaldo cuando no existe ninguna plantilla específica
• functions.php - registro de las funcionalidades del tema (menús, widgets, soporte de características)
• header.php - cabecera del sitio con la navegación y las metaetiquetas
• footer.php - pie del sitio con los scripts y la información de copyright
• sidebar.php - barra lateral con las zonas de widgets
• single.php - plantilla para mostrar entradas individuales del blog
• page.php - plantilla para mostrar páginas estáticas
• archive.php - plantilla para páginas de archivo (categorías, etiquetas, fechas)
• 404.php - plantilla para páginas inexistentes

Jerarquía de plantillas

La jerarquía de plantillas es el sistema que utiliza WordPress para determinar qué archivo de plantilla cargar en cada página. Este es uno de los conceptos más importantes del desarrollo en WordPress. WordPress busca la plantilla más específica y, si no la encuentra, pasa a una más general hasta llegar a index.php, que es la última opción.

Por ejemplo, para mostrar la categoría Noticias, WordPress busca primero category-news.php, después category-3.php (donde 3 es el ID de la categoría), luego category.php, después archive.php y, finalmente, index.php. Esta jerarquía te permite crear diseños específicos para distintas partes del sitio sin una programación complicada. Comprender la jerarquía es clave para un desarrollo de temas eficiente.

Archivos de plantilla más utilizados

Para las entradas del blog, la jerarquía es: single-{post-type}.php, single.php, singular.php, index.php. Para las páginas: page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. Para los archivos: category-{slug}.php, category.php, archive.php, index.php. Comprender este sistema permite un control preciso sobre la forma en que se muestra cada tipo de contenido.

Functions.php: el corazón del tema

Functions.php es el archivo más importante de un tema porque es donde se registran todas las funcionalidades que admite tu tema. Este archivo se carga automáticamente cada vez que se activa el tema y funciona de forma similar a un plugin. En él añades soporte para características, registras menús y zonas de widgets, incluyes archivos CSS y JavaScript y defines funciones personalizadas.

Qué se define en functions.php

• Soporte de imágenes en miniatura: add_theme_support('post-thumbnails')
• Registro de menús de navegación: register_nav_menus()
• Registro de zonas de widgets: register_sidebar()
• Inclusión de archivos CSS y JS: wp_enqueue_style() y wp_enqueue_script()
• Soporte de elementos HTML5: add_theme_support('html5')
• Tamaños de imagen personalizados: add_image_size()
• Soporte de logotipo personalizado: add_theme_support('custom-logo')

La regla clave es no incluir nunca archivos CSS y JavaScript directamente en header.php o footer.php mediante etiquetas HTML. En su lugar, utiliza siempre wp_enqueue_style() y wp_enqueue_script() en functions.php, porque así WordPress puede gestionar correctamente las dependencias, evitar duplicados y permitir que otros plugins interactúen con tus scripts.

El Loop de WordPress

El Loop de WordPress es el código PHP que muestra el contenido de las entradas o páginas. Toda plantilla que muestra contenido utiliza el Loop para recorrer los resultados de la consulta. Comprender el Loop es fundamental, porque es el mecanismo que conecta tu plantilla con el contenido de la base de datos.

La estructura básica del Loop utiliza un bucle while con las funciones have_posts() y the_post(). Dentro del bucle, usa etiquetas de plantilla como the_title(), the_content(), the_excerpt(), the_permalink() y the_post_thumbnail() para mostrar las distintas partes del contenido. Puedes personalizar el Loop con la clase WP_Query para crear consultas a medida que devuelvan exactamente las entradas que quieres mostrar.

Consultas personalizadas con WP_Query

La clase WP_Query permite crear consultas de entradas totalmente personalizadas. Puedes filtrar por categoría, etiqueta, taxonomía personalizada, fecha, autor y campos meta. Por ejemplo, puedes mostrar las últimas 3 entradas de la categoría Noticias, o todos los productos con un precio inferior a 10 euros. WP_Query es una herramienta potente que te da un control total sobre qué contenido se muestra y cómo se ordena.

Etiquetas de plantilla y campos personalizados

Las etiquetas de plantilla son funciones PHP que WordPress proporciona para mostrar contenido dinámico en los temas. Además de las etiquetas básicas para el título y el contenido, existen decenas de etiquetas especializadas para mostrar el autor, la fecha, las categorías, las etiquetas, los comentarios y la navegación. La documentación en developer.wordpress.org es un recurso inestimable para conocer todas las etiquetas de plantilla disponibles.

Los campos personalizados (campos meta) amplían las entradas y páginas estándar con datos adicionales. Mediante el plugin ACF (Advanced Custom Fields) o funciones nativas de WordPress, puedes añadir campos de precio, ubicación, galería, reseñas y cualquier otra cosa que requiera tu sitio. Los campos personalizados, combinados con los tipos de contenido personalizados, permiten que WordPress funcione como un CMS completo para cualquier tipo de contenido.

Próximos pasos

Una vez dominados los fundamentos, explora temas avanzados como los temas hijo. Consulta la optimización SEO de un sitio WordPress como siguiente paso. Otros temas avanzados incluyen la modificación segura de temas existentes, el desarrollo de temas de bloques para el Full Site Editing de WordPress, la REST API para WordPress headless y WP-CLI para gestionar temas desde la línea de comandos. El ecosistema de WordPress es enorme y siempre hay algo nuevo que aprender. Empieza con un tema sencillo, ve añadiendo funcionalidades poco a poco y pronto te sentirás con la confianza necesaria para crear temas profesionales de WordPress.