![Page 1: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/1.jpg)
Anatomía de un tema de WordPress en tiempos de Gutenberg
Diseñador y desarrollador web especializado en WordPress.
DarioBFwww.dariobf.com dariobf
UI/UX ActualidadBlog
Instructor en Linkedin Learning
![Page 2: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/2.jpg)
¿Qué es un tema de WordPress?
Un conjunto de ficheros que nos permite cambiar la apariencia y funcionalidad de nuestro sitio web hecho con WordPress; en definitiva, el aspecto del sitio web.
![Page 3: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/3.jpg)
¿Cómo es un tema de WordPress?
Como mínimo tiene dos ficheros:
style.css index.php
Se encarga de la apariencia o diseño de nuestro sitio web. Colores, tamaños, tipografías, layouts…
Recoge la información que se solicita a WordPress y la imprime.
![Page 4: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/4.jpg)
style.css
Sin este fichero no hay tema.
style.css
![Page 5: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/5.jpg)
style.css
Sin este fichero no hay tema.
style.css
![Page 6: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/6.jpg)
style.css
Sin este fichero no hay tema.
style.css
![Page 7: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/7.jpg)
index.php
Es la plantilla más genérica.
index.php
Sólo se ejecuta si no hay una plantilla más específica para el contenido a mostrar.
![Page 8: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/8.jpg)
![Page 9: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/9.jpg)
Plantillas estructurales
Evitan duplicar, permiten modularizar:
header.php footer.php sidebar.php
![Page 10: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/10.jpg)
Plantillas estructurales
header.php
footer.php
sideb
ar.php
![Page 11: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/11.jpg)
Plantillas de contenido
Son específicas del tipo de contenido que vamos a mostrar.
home.php page.php single.php archive.php
![Page 12: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/12.jpg)
Plantillas de contenido
https://codex.wordpress.org/Templates
![Page 13: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/13.jpg)
Especificidad de plantillas
Podemos atacar a contenidos específicos:
page-{slug}.php page-{ID}.php category-{ID}.php author-{nicename}.php
![Page 14: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/14.jpg)
Plantillas personalizadas
Plantillas concretas para contenidos específicos:
contacto.php sobremi.php whatever.php
/* * Template Name: Contacto */
![Page 15: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/15.jpg)
El Loop
WordPress determina qué contenido debe mostrar en base a la URL solicitada y la configuración.
![Page 16: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/16.jpg)
El Loop
WordPress determina qué contenido debe mostrar en base a la URL solicitada y la configuración.
![Page 17: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/17.jpg)
functions.php
Podemos añadir funcionalidades específicas al tema.
• Es un fichero de nuestro tema.
• Una de las formas de cambiar las configuraciones por defecto de WordPress.
• Funciona como un plugin:
• Añade mejoras y funcionalidades a todo el sitio
• Puede ejecutar funciones, tanto de PHP como de WordPress
• Solamente se ejecuta cuando el tema está activado
![Page 18: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/18.jpg)
![Page 19: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/19.jpg)
Modularización
Modularizar nos permite tener un código más fácil de mantener
• Reutilizar código en diferentes plantillas
• Template part + get_template_part()
• Resumen: como includes de php, pero sin problemas de compatibilidad en temas hijo
![Page 20: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/20.jpg)
Template Parts
Nos da una forma fácil de modularizar, compatible con Child Themes
• {slug}.php - Template part genérico
• {slug}-{name}.php - Template part específico
Ejemplo: Diferentes tipos de visualización de artículos.
Podemos tener articulo.php como template part genérico y varios específicos: articulo-home.php, articulo-categoria.php, articulo-single.php…
![Page 21: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/21.jpg)
Template Parts
get_template_part( string $slug, string $name = null );
• {$slug}.php - Template part genérico
• {$slug}-{$name}.php - Template part específico
Ejemplo: Para llamar a un template específico utilizamos:
get_template_part( ‘article’, ‘home’ );
![Page 22: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/22.jpg)
Organización, por favor
Que un software sea mantenible depende de su organización.
¿Qué vamos a organizar?
• Assets o estáticos
• Template Parts
• Customs
![Page 23: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/23.jpg)
Organización, por favor
¿Qué vamos a organizar?/mi-tema
/inc
/assets
/js
/css
/webfonts
/template-parts
functions.php
index.php
style.css
…
![Page 24: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/24.jpg)
Gutenberg
![Page 25: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/25.jpg)
Gutenberg
Temas basados en plantillas de bloques
Plugin Gutenberg .-> Ajustes -> Experimentos
• Misma jerarquía de plantillas, llamadas Block templates
• Misma idea de template parts, llamadas Block Template Parts
Estos templates se crean con Gutenberg y su contenido se guarda en ficheros HTML, ¿Adiós php? ;-)
![Page 26: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/26.jpg)
Tema basado en bloques
Cambios respecto a los temas tradicionales:
/mi-tema-guty
/inc
/assets
/js
/css
/webfonts
/block-templates
/block-template-parts
functions.php
index.php
style.css
…
![Page 27: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/27.jpg)
Tema basado en bloques
Cambios respecto a los temas tradicionales:
/mi-tema-guty
/block-templates
index.html
single.html
page.html
/block-template-parts
header.html
footer.html
![Page 28: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/28.jpg)
Block Templates Parts
header.html footer.html sidebar.html
![Page 29: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/29.jpg)
Block Template Parts
header.html
footer.html
sideb
ar.htm
l
![Page 30: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/30.jpg)
Block Templates
Son específicas del tipo de contenido que vamos a mostrar.
home.html page.html single.html archive.html
![Page 31: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/31.jpg)
Matices
Template definido en el backend > Block Templates
![Page 32: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/32.jpg)
Dudas
En fase desarrollo, todo son dudas.
• ¿Loop?
• ¿Especificidad de plantillas?
• ¿Plantillas personalizadas?
![Page 33: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/33.jpg)
Referencias
Algunos enlaces de interés:
https://developer.wordpress.org/block-editor/developers/themes/block-based-themes/
https://github.com/WordPress/theme-experiments
![Page 34: UI Anatomía de un tema de WordPress en tiempos de€¦ · Anatomía de un tema de WordPress en tiempos de Gutenberg Diseñador y desarrollador web especializado en WordPress. DarioBF](https://reader034.vdocuments.co/reader034/viewer/2022052017/602f9b9674ea2a53e00d3c90/html5/thumbnails/34.jpg)
¿Preguntas?
Anatomía de un tema de WordPress en tiempos de Gutenberg