Temas: temas de bloques y temas clásicos

Módulo 5: Temas y plugins · Tiempo de lectura: 9 minutos

Objetivo de aprendizaje: Después de esta lección podrá explicar la diferencia entre temas de bloques y temas clásicos, y elegir un tema con criterio.

Conceptos clave: tema, jerarquía de plantillas, tema de bloques, plantilla (template), parte de plantilla (template part), theme.json, Editor del sitio, tema clásico, plantillas PHP, Personalizador, widgets, creador de páginas, dependencia del proveedor (lock-in), carpeta del tema

Qué hace un tema

Un tema determina el aspecto de su sitio y cómo se componen las páginas: la cabecera con el logotipo y el menú, el ancho del contenido, las tipografías y los colores, el pie de página, cómo se ve un listado de entradas o un resultado de búsqueda. El contenido en sí (sus textos, páginas, imágenes) está en la base de datos y se conserva al cambiar de tema.

Cada tema se guarda en su propia carpeta dentro de wp-content/themes/, por ejemplo wp-content/themes/twentytwentyfive/. En esa carpeta siempre hay un archivo style.css con una cabecera al principio que describe el tema (nombre, versión, autor). Lo verá de nuevo en la lección 5.2.

Desde WordPress 5.9 (principios de 2022) existen dos tipos de temas, y funcionan de forma realmente distinta.

Temas clásicos

Un tema clásico está formado por archivos PHP: header.php, footer.php, single.php, page.php, index.php, etcétera. Qué archivo se usa para qué página sigue la jerarquía de plantillas (lección 1.2). Las modificaciones se hacen:

• en el Personalizador (Apariencia > Personalizador): logotipo, colores, opciones que ofrece el tema;
• con widgets (Apariencia > Widgets): bloques en la barra lateral o en el pie de página;
• con menús (Apariencia > Menús, lección 4.3);
• en el código, con un tema hijo (lección 5.2).

Muchos temas conocidos son (todavía) clásicos o híbridos. Funcionan perfectamente y seguirán recibiendo soporte durante años.

Temas de bloques

Un tema de bloques está compuesto por los mismos bloques que su contenido. El tema tiene:

• plantillas (templates) como archivos HTML con bloques, en la carpeta templates/: index.html, single.html, page.html, 404.html;
• partes de plantilla (template parts) en parts/: header.html, footer.html;
• un archivo theme.json con la configuración de estilos: paleta de colores, tipografías, tamaños de letra, ancho del contenido, espacio entre bloques.

Un pequeño fragmento de theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primario" },
        { "slug": "accent", "color": "#e8a33d", "name": "Acento" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Las modificaciones se hacen en el Editor del sitio (Apariencia > Editor): edita la cabecera, el pie de página y las plantillas con bloques, y en Estilos elige colores, tipografías y espaciado para todo el sitio.

Una diferencia importante que debe conocer: lo que modifica en el Editor del sitio se guarda en la base de datos, no en los archivos del tema. Por tanto, una actualización del tema no sobrescribe sus modificaciones. Pero esto también significa que una plantilla modificada en la base de datos tiene prioridad sobre la plantilla del tema. Si el autor publica una plantilla mejorada, usted no la verá mientras exista su versión modificada. En el Editor del sitio puede «restaurar» una plantilla a la versión del tema.

Creadores de páginas

Un creador de páginas (como Elementor, Divi o WPBakery) es un plugin o tema con su propio editor en el que arrastra y diseña páginas. Son populares porque ofrecen muchas posibilidades sin necesidad de código. Tenga presentes los inconvenientes:

• Dependencia del proveedor (lock-in): el formato está en un formato propio (a menudo shortcodes o datos propios en wp_postmeta). Si desactiva el creador de páginas, de sus páginas suele quedar un revoltijo de códigos. Cambiar a otra solución normalmente significa reconstruirlo todo desde cero.
• Más pesado: muchos creadores de páginas cargan scripts y hojas de estilo adicionales en cada página. Esto puede hacer su sitio más lento (módulo 6).
• Un componente más que mantener, con sus propias actualizaciones y sus propias vulnerabilidades.

Un creador de páginas no es una mala elección, pero elíjalo con conocimiento de causa. Para muchos sitios, lo que desea conseguir también puede lograrse con un tema de bloques y patrones.

Elegir un tema

En qué fijarse, en este orden:

1. Procedencia: el directorio de temas de wordpress.org (revisado por voluntarios) o un autor conocido con su propio sitio. Nunca una copia «gratuita» de un tema de pago descargada de un sitio externo: suele contener una puerta trasera (lección 5.3).
2. Mantenimiento: ¿cuándo se actualizó el tema por última vez? Un tema sin actualizaciones en el último año se convierte en un riesgo.
3. Bloques o clásico: ¿encaja con su forma de trabajar? Un tema de bloques si desea poder modificarlo en el Editor del sitio, un tema clásico si desea continuar un sitio existente de la misma manera.
4. Qué incluye: un tema que «lo hace todo» (slider, portafolio, formulario de contacto, SEO) ata funciones al tema. Si cambia de tema más adelante, las perderá. Las funciones pertenecen a los plugins, el diseño al tema.
5. Accesibilidad y velocidad: en el directorio de temas de wordpress.org puede filtrar por la característica «Accessibility Ready». Revise la demo del tema en PageSpeed Insights (lección 6.1).
6. Idioma: ¿está el tema traducido a su idioma, o puede adaptar usted mismo los textos?

Cambiar de tema

Al cambiar de tema, su contenido se conserva, pero todo lo demás cambia. Nunca lo haga directamente en su sitio en producción:

• Pruebe primero el nuevo tema con Vista previa (en Apariencia > Temas), o mejor aún, en un entorno de pruebas (staging) (lección 8.3).
• Después compruebe los menús (lección 4.3), los widgets, el logotipo, la página de inicio y los tipos de entrada que ofrecía el tema anterior (lección 4.2).
• Los shortcodes del tema anterior aparecerán como texto suelto ([slider id="3"]) en sus páginas.

Resumen

• Un tema determina el diseño y la estructura; el contenido está separado en la base de datos.
• Los temas clásicos son plantillas PHP, modificadas con el Personalizador, los widgets y los menús.
• Los temas de bloques están compuestos por bloques y theme.json, y se modifican en el Editor del sitio; esas modificaciones se guardan en la base de datos.
• Los creadores de páginas ofrecen muchas posibilidades, pero le atan a ellos y pueden hacer su sitio más pesado.
• Elija un tema por su procedencia, su mantenimiento y su sencillez; las funciones pertenecen a los plugins, no al tema.

Cuestionario

Ejercicio

Ejercicio A5.1: ¿Qué tema utiliza su sitio? Busque en el código fuente de su página de inicio (Ctrl+U) la cadena /wp-content/themes/ e indique el nombre de la carpeta de tema que aparece con más frecuencia. Si utiliza un tema hijo (lección 5.2), indique la carpeta del tema hijo y la del tema padre. Indique también si se trata de un tema de bloques o de un tema clásico, y cómo lo ha comprobado. El programa leerá la página de inicio y el style.css del tema indicado y los comparará.

Para saber más

Para trabajar dentro de WordPress todavía no contamos con artículos propios; la documentación oficial de WordPress es muy completa.

• Qué es un tema (developer.wordpress.org, en inglés): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Temas en wordpress.org: https://wordpress.org/themes/
• Editor del sitio (wordpress.org, en inglés): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, en inglés): https://developer.wordpress.org/themes/global-settings-and-styles/