Diseña tu propio tema de bloques de WordPress sin código

En esta charla que di en la Meetup de Sevilla WordPress de julio de 2025, expliqué cómo crear un tema de bloques en WordPress utilizando el plugin oficial Create Block Theme, sin necesidad de tocar una sola línea de código.

Comencé con un repaso a la evolución de los temas en WordPress y las diferencias clave entre los temas clásicos y los de bloques. Después, hice una demostración práctica en vivo, mostrando cómo generar un tema personalizado directamente desde el editor del sitio.

La sesión estuvo especialmente dirigida a implementadores que quieren ponerse al día con las nuevas herramientas de WordPress y trabajar de forma más sencilla, rápida y eficiente.

Transcript

1. Crea tu propio tema de bloques sin tocar código Nilo Vélez
2. Nilo Vélez Team rep WP Photo directory WPTV Moderator Polyglots es_ES GTE WordPress event supporter
3. La estructura de WordPress 📄 wp-config.php 📁 wp-admin 📁 wp-includes 📂 wp-content 📁 themes 📁 plugins 📁 uploads base de datos
4. Estructura de un tema tradicional 📄 style.css 📄 functions.php 📄 archive.php 📄 home.php 📄 index.php 📄single.php
5. Estructura de un tema tradicional 📄 style.css 📄 functions.php 📄 archive.php 📄 home.php 📄 index.php 📄single.php /** * Theme Name: Manolito * Theme URI: https://example.com/manolito * Description: Custom theme description... * Version: 1.0.0 * Author: Your Name * Author URI: https://example.com * Text Domain: fabled-sunset * Tested up to: 6.8 * Requires PHP: 7.4 */
8. Crear un tema hijo (tradicional) 📄 style.css 📄 functions.php
9. Crear un tema hijo (tradicional) 📄 style.css 📄 functions.php /** * Theme Name: Mi Tema Hijo * Template: astra * * ...todo los demás campos */
10. Crear un tema hijo (tradicional) 📄 style.css 📄 functions.php add_action( 'wp_enqueue_scripts', 'mi_tema_hijo_enqueue_styles' ); function mi_tema_hijo_styles() { wp_enqueue_style( 'mi-tema-hijo-style', get_stylesheet_uri() ); }
13. …y entonces llegó Gutenberg
14. Las cuatro fases de Gutenberg 1. Edición más sencilla 2. Personalización 3. Colaboración 4. Sitios multilingües
15. Fase 2: Personalización 1. Full Site editing (FSE) 2. Patrones de bloques 3. Directorio de bloques 4. Temas basados en bloques
16. Los temas de bloques 📄 style.css 📄 theme.json 📂 templates 📄 home.html 📄 index.html 📄 single.html