Los temas de WordPress desempeñan un papel crucial a la hora de dar forma a la apariencia y funcionalidad de tu sitio web. Definen cómo se muestra tu contenido y ofrecen varias opciones de diseño para crear un sitio único. A lo largo de los años, los temas de WordPress han evolucionado significativamente, empezando por lo que ahora llamamos «temas clásicos»
Los temas clásicos fueron el estándar durante mucho tiempo, se basaban en plantillas PHP y requerían algunos conocimientos de programación para personalizarlos. Estos temas ofrecían una gran flexibilidad, pero podían suponer un reto para los principiantes en el desarrollo web. Después, el lanzamiento de WordPress 5.9 supuso un cambio significativo con la introducción de los «temas de bloques»
Temas clásicos de WordPress vs temas de bloques
Los temas clásicos son los temas tradicionales de WordPress. Definen el aspecto general de un sitio web utilizando archivos de plantilla escritos en PHP, CSS para el estilo y JavaScript para añadir funcionalidad. Estos temas altamente personalizables han sido la columna vertebral de los sitios de WordPress durante muchos años.
Los temas de bloques, por otro lado, son un nuevo tipo de temas de WordPress introducidos para soportar las capacidades de edición completa del sitio (FSE). A diferencia de los temas clásicos, utilizan bloques para construir todas las partes de un sitio web, incluidos encabezados, pies de página y áreas de contenido. Esto permite una forma más visual e intuitiva de diseñar y personalizar sitios web directamente dentro del editor de WordPress.
Las diferencias clave entre los temas clásicos y los de bloques son:
- Personalización — Los temas clásicos requieren PHP y algunos conocimientos de programación, mientras que los temas de bloque utilizan un editor visual para facilitar la personalización.
- Flexibilidad — Los temas clásicos ofrecen más flexibilidad a los desarrolladores, mientras que los temas de bloques se centran en la facilidad de uso y la accesibilidad.
- Edición — Los temas clásicos se editan mediante archivos de tema y el Personalizador de WordPress. Los temas de bloques se pueden editar completamente a través del editor de bloques.
Elegir qué tipo de tema desarrollar
Tu elección entre temas clásicos y de bloques depende de tus necesidades y de tu nivel de conocimientos. Si eres un desarrollador que busca la máxima flexibilidad, los temas clásicos pueden ser tu elección. Sin embargo, si prefieres un enfoque más fácil de usar y visual para construir tu sitio, los temas de bloques son una gran opción.
Ambos tipos de temas tienen sus puntos fuertes y son adecuados para distintos tipos de usuarios y proyectos. Comprender las principales diferencias te ayudará a tomar una decisión informada sobre qué tema se adaptará mejor a las necesidades de tu sitio web.
El objetivo de este artículo es ayudarte a comprender y dominar los conceptos básicos de los temas clásicos y de bloques, para que puedas crear y personalizar temas de WordPress con eficacia.
Comprender la estructura de un tema
Comprender la estructura de un tema, ya sea clásico o de bloques, es clave para personalizar eficazmente tu sitio de WordPress.
Antes de explorar la estructura de cada tema, debes saber que todos los temas de WordPress se almacenan en el directorio wp-content/themes de tu instalación de WordPress, y que cada tema reside en su propia carpeta.
Estructura de un tema clásico
Un tema clásico consta de varios archivos y directorios clave que crean la apariencia y funcionalidad del sitio. Los dos archivos principales son:
style.css— Es la hoja de estilos principal que define el estilo visual del tema. Incluye metadatos sobre el tema (como nombre, autor y versión) en la parte superior, seguidos de reglas CSS que dan estilo al tema.index.php— Es el archivo de plantilla principal que se utiliza para mostrar el contenido de la página de inicio. Actúa como alternativa para otros archivos de plantilla que puedan faltar.
Además de éstos, otros archivos importantes permiten un diseño modular y garantizan que las diferentes partes del sitio puedan personalizarse y mantenerse fácilmente. Aunque son opcionales, estos archivos se consideran estándar:
header.php— Este archivo contiene la sección de cabecera del tema, que incluye el título del sitio, el logotipo y el menú de navegación. Se incluye en la parte superior de cada página, garantizando una cabecera de página coherente.footer.php— Este archivo contiene la sección de pie de página del tema, que a menudo incluye información sobre derechos de autor y navegación a pie de página. Se incluye en la parte inferior de cada página, proporcionando un pie de página coherente en todo el sitio.functions.php— Este archivo se utiliza para añadir funciones personalizadas al tema. Puede registrar menús, encolar estilos y scripts, y añadir funciones de apoyo al tema como miniaturas de entradas y fondos personalizados. Esencialmente, actúa como un centro de control para las personalizaciones y mejoras del tema.page.phpsingle.phparchive.php, etc. — Estos archivos de plantilla definen la estructura de diferentes tipos de contenido, como páginas, entradas individuales y archivos.
Estructura de un tema de bloques
Un tema de bloques se compone de varios archivos y directorios clave que están diseñados específicamente para trabajar con bloques y las funciones FSE. Los archivos y carpetas principales son:
theme.json— Este archivo es crucial para configurar los ajustes, estilos y personalizaciones del tema. Define estilos y ajustes globales para los bloques, proporcionando una forma centralizada de gestionar la apariencia y el comportamiento del tema. Sustituye a la necesidad de mucho código PHP personalizado y permite configurar fácilmente los colores, la tipografía, el espaciado y mucho más.style.css— Aunque la mayor parte del estilo se gestiona dentro detheme.json, de forma similar a los temas clásicosstyle.cssse sigue utilizando para declarar los metadatos del tema, como el nombre del tema, el autor, la versión y la descripción.templates/— Este directorio contiene archivos HTML que definen el diseño de las distintas partes del sitio. Estos archivos incluyen plantillas como index.html para la página de inicio,single.htmlpara entradas individuales,page.htmlpara páginas, y más. Cada archivo se construye utilizando bloques.parts/— Este directorio contiene secciones reutilizables de las plantillas, como encabezados y pies de página. Estas partes pueden incluirse en varias plantillas, garantizando la coherencia en todo el sitio.
Aunque no son obligatorios, los patrones también son importantes a la hora de desarrollar temas avanzados. Los patrones son diseños de bloques predefinidos que pueden insertarse en páginas y entradas, proporcionando una forma rápida de crear diseños complejos.
Con los temas de bloques, puedes decidir no crear la estructura del tema manualmente. Puedes agilizar el proceso de configuración utilizando el plugin Crear Tema de Bloques, que reúne todos los archivos y detalles necesarios.
Una vez que hayas rellenado los detalles, se creará una nueva carpeta del tema en el directorio wp-content/themes, y el nuevo tema aparecerá en el área de administración de WordPress, en Apariencia > Temas. Puedes añadir más detalles del tema en la configuración de la meta descripción de style.css.
Jerarquía de plantillas del tema de WordPress
La jerarquía de plantillas dicta qué archivo(s) de plantilla utiliza WordPress para mostrar los distintos tipos de contenido. Tanto los temas clásicos como los temas de bloque siguen una jerarquía similar, pero difieren en los tipos de archivo que utilizan: los temas clásicos utilizan archivos PHP, mientras que los temas de bloque utilizan archivos HTML.
La jerarquía de plantillas sigue un orden específico para determinar qué archivo de plantilla utilizar. Si WordPress no puede encontrar un archivo de plantilla específico, pasará al siguiente en la jerarquía.
Por ejemplo, cuando WordPress necesita mostrar una única entrada de blog, primero busca una plantilla específica para el tipo de entrada, como single-{post-type}.php o single-{post-type}.html. Si ese archivo no existe, buscará el genérico single.php o single.html. Si no encuentra ninguno de estos archivos, WordPress recurrirá a la plantilla más genérica index.php o index.html.
El mismo proceso se aplica a otros tipos de contenido. Para una página estática, WordPress buscará primero cualquier plantilla personalizada asignada a esa página. Si no encuentra ninguna, buscará una plantilla basada en el slug de la página (por ejemplo, page-about.php o page-about.html) o en su ID (page-42.php o page-42.html). Si estas plantillas específicas no están disponibles, WordPress utiliza las generales page.php o page.html. Si incluso éstas faltan, recurre a index.php o index.html.
Crear plantillas
Crear plantillas en WordPress te permite personalizar cómo se muestran los distintos tipos de contenido en tu sitio web. Tanto si trabajas con temas clásicos como con temas de bloques, el proceso implica establecer los archivos necesarios y configurarlos según tus necesidades.
Vamos a configurar una plantilla de página para ambos tipos de temas.
Plantilla de página para temas clásicos
En los temas clásicos, creas una plantilla de página utilizando PHP. Aquí tienes cómo hacerlo:
- Crea el archivo de plantilla — Utilizando un editor de texto, crea un nuevo archivo PHP en el directorio de tu tema y llámalo
page.php. - Añade código de plantilla — Escribe el código PHP necesario para definir la estructura y el contenido de la plantilla de página. Esto suele incluir etiquetas de plantilla de WordPress para mostrar el contenido de la página.
- Incluye el encabezado y el pie de página — Asegúrate de que tu plantilla incluye el encabezado y el pie de página añadiendo las funciones
get_header()yget_footer(). Esto mantiene el diseño coherente con el resto de tu sitio.
Aquí tienes un ejemplo del aspecto que podría tener page.php:
<?php
get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>En este ejemplo, la plantilla incluye la cabecera, muestra el título y el contenido de la página y, a continuación, incluye el pie de página.
Plantilla de página de tema de bloques
En los temas de bloques, la creación de una plantilla de página puede hacerse a través del Editor de Sitios de WordPress o creando un archivo page.html en el directorio de plantillas.
Una vez creado este archivo, puedes diseñar un diseño navegando al editor del sitio (Apariencia > Editor en tu panel de control de WordPress).
Utiliza el editor de bloques para añadir y organizar bloques para diseñar el diseño de tu página. Puedes añadir bloques para el título de la página, la imagen destacada y el contenido. Personaliza cada bloque según tus preferencias de diseño.
Cuando estés satisfecho con el diseño, guarda la plantilla. WordPress generará automáticamente el archivo HTML correspondiente en el directorio de tu tema.
Diseño de Estilos para temas
Dar estilo a tu tema de WordPress es un paso crucial para definir la apariencia visual de tu sitio web. Tanto los temas clásicos como los temas en bloque ofrecen sólidas formas de personalizar los estilos, pero lo enfocan de forma diferente.
Diseño de estilos para temas clásicos
En los temas clásicos, el estilo se gestiona normalmente mediante CSS. A continuación te explicamos cómo puedes dar estilo a un tema clásico:
La hoja de estilos principal de un tema clásico es el archivo style.css. Este archivo contiene todas las reglas CSS que definen el aspecto de tu tema. También es donde declaras los metadatos del tema, como el nombre del tema, el autor, la versión y la descripción.
Para asegurarte de que tu CSS se carga correctamente, tienes que encolar tu hoja de estilos en el archivo functions.php utilizando la función wp_enqueue_style().
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');Este paso es crucial para mantener los estándares adecuados de WordPress y garantizar que los estilos se aplican correctamente.
Además, puedes añadir CSS personalizado directamente al archivo style.css o crear archivos CSS independientes para diferentes partes de tu tema. El CSS personalizado también puede incrustarse dentro de archivos de plantilla individuales utilizando la etiqueta <style>, aunque esta práctica suele ser menos habitual y sólo se recomienda para estilos específicos y aislados.
Para estilos más avanzados, puedes utilizar preprocesadores CSS como SASS o LESS. Estas herramientas te permiten escribir un CSS más fácil de mantener y modular, facilitando la gestión y ampliación de los estilos de tu tema.
Estilizar temas de bloques
Los temas de bloques de estilo se gestionan principalmente a través del archivo theme.json y del editor de bloques.
El archivo theme.json es el lugar central para configurar los estilos y ajustes globales de tu tema. Este archivo te permite definir colores, tipografías, espaciado y otros estilos en un formato JSON estructurado, proporcionando una forma centralizada de gestionar la apariencia y el comportamiento del tema. Los estilos globales definidos en theme.json se aplican a todo tu sitio, garantizando un aspecto y una sensación coherente.
Además de theme.json, puedes utilizar el editor de bloques para aplicar estilos personalizados directamente a los bloques. El editor de bloques te permite ver los cambios en tiempo real y ajustar el diseño visualmente sin necesidad de escribir código manualmente. Esto hace que el proceso sea más accesible, especialmente para quienes prefieren una interfaz visual a la programación.
Aunque el archivo theme.json gestiona la mayor parte del estilo, puedes utilizar CSS para un control más granular. El CSS personalizado puede añadirse al archivo style.css o directamente dentro de bloques individuales utilizando el editor de bloques.
Un ejemplo de archivo theme.json podría incluir ajustes para paletas de colores, tipografía y estilos de bloque, facilitando la gestión y personalización del diseño del tema.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}Personalizar temas
Personalizar los temas de WordPress te permite adaptar la apariencia y funcionalidad de tu sitio web para satisfacer necesidades y preferencias específicas. Tanto los temas clásicos como los de bloques ofrecen varios métodos de personalización, pero lo enfocan de forma diferente.
Personalizar temas clásicos
Los temas clásicos ofrecen varias formas de personalizar el aspecto de tu sitio:
- Personalizador de Temas — El Personalizador de Temas de WordPress es una interfaz fácil de usar que te permite hacer cambios en la apariencia de tu tema sin tocar ningún código. Puedes acceder a él a través de Apariencia > Personalizar. Ofrece opciones para modificar la identidad del sitio, los colores, los menús, los widgets y mucho más. Los cambios se pueden previsualizar en tiempo real antes de guardarlos.
- CSS Personalizado — Para cambios de estilo más específicos, puedes añadir CSS personalizado directamente en el Personalizador de Temas, en la sección CSS adicional. Este método es ideal para hacer pequeños retoques sin editar los archivos del tema.
- Temas hijo — Si necesitas hacer modificaciones extensas, crear un tema hijo es el método recomendado. Un tema hijo hereda la funcionalidad del tema padre y te permite anular o añadir nuevos estilos y características. Esto garantiza que tus personalizaciones se conserven cuando se actualice el tema padre.
- Archivos de tema — Los usuarios avanzados pueden editar directamente los archivos de tema, como
header.php,footer.php, yfunctions.php, para realizar cambios más significativos. Sin embargo, este método requiere un buen conocimiento de PHP y de la jerarquía de plantillas de WordPress. - Plugins — Hay numerosos plugins disponibles que amplían las capacidades de personalización de tu tema. Por ejemplo, los plugins constructores de páginas como Elementor te permiten crear diseños complejos sin programar.
Personalizar temas de bloques
Con su énfasis en FSE, los temas de bloques ofrecen un enfoque más visual y fácil de usar para la personalización:
- Editor del Sitio — El Editor del sitio de WordPress (Apariencia > Editor) es la herramienta principal para personalizar los temas de bloques. Te permite modificar todos los aspectos de tu sitio, incluidos encabezados, pies de página, plantillas y bloques individuales, utilizando una interfaz visual. Los cambios se aplican instantáneamente, por lo que es fácil ver cómo tus ajustes afectan al diseño del sitio.
- Estilos globales — Los temas de bloques utilizan el archivo
theme.jsonpara definir estilos globales. Puedes personalizar los colores, la tipografía, el espaciado y mucho más de forma global, garantizando la coherencia en todo tu sitio. El Editor de Sitios también te permite ajustar estos parámetros visualmente. - Bloques y patrones reutilizables — Puedes crear bloques y patrones reutilizables para mantener la coherencia y agilizar el proceso de diseño. Los bloques reutilizables se pueden guardar e insertar en cualquier entrada o página, mientras que los patrones de bloques proporcionan diseños predefinidos que se pueden personalizar para adaptarlos a tus necesidades.
- Plantillas personalizadas — Con los temas de bloques, puedes crear plantillas personalizadas para diferentes tipos de contenido directamente dentro del Editor de Sitios. Esto te permite personalizar la disposición y el diseño de páginas o tipos de entrada específicos sin escribir ningún código.
- Plugins — Al igual que los temas clásicos, los temas de bloque también pueden ampliarse con plugins. Muchos plugins están diseñados para mejorar las capacidades del editor de bloques, ofreciendo bloques, patrones y opciones de personalización adicionales.
Resumen
Personalizar los temas de WordPress te permite hacer que tu sitio sea único y funcional. Los temas clásicos se basan en el Personalizador de Temas, CSS personalizado, temas hijo y ediciones directas de archivos para conseguir flexibilidad. Los temas de bloques utilizan el Editor de Sitios y theme.json para un enfoque más visual e intuitivo.
Ambos métodos ofrecen potentes herramientas para adaptar tu sitio a tus necesidades, tanto si prefieres la programación como la personalización visual.
Después de crear un tema que se adapte a tus gustos, ya sea un tema clásico o de bloques, es importante alojar tu sitio en un alojamiento robusto para evitar problemas como tiempos de inactividad, ataques DDoS y otros. Aquí es donde brillan los proveedores de alojamiento premium como Kinsta.
Kinsta ofrece un potente Alojamiento Administrado de WordPress con una arquitectura totalmente en contenedores, impulsado exclusivamente por Google Cloud Platform en la red de Nivel Premium de Google.
Deja una respuesta