Desarrollo de temas para WordPress usando Timber

SPEAKER: Alejandra Zerdá
Uno de los mayores problemas de los temas visuales de WordPress es la mezcla de código PHP y código HTML. Esto genera archivos difíciles de entender en muchas ocasiones y con potenciales problemas de seguridad en otras. La dificultad que supone manejar estos archivos a muchos diseñadores web, les lleva a usar plugins visuales para la construcción de temas, que solo añaden complejidad a las instalaciones. Por ello separar la lógica de la presentación mediante el uso de un sistema de plantillas es una buena práctica en el desarrollo de aplicaciones web y para eso está Timber, un plugin permite separar la lógica (PHP) de la presentación (HTML) en las plantillas, lo que ofrece un entorno más manejable para el desarrollo de los temas visuales.

Aprender que es twig, como implementarlo en desarrollo de temas y plugins en WordPress.

Transcript

1. PHP templating engine Desarrollando en WordPress Usando Timber
2. Desarrolladora Web WordPress - Drupal Front-End Alejandra Zerdá Directora proyectos Semantic
3. WordPress mezcla el código PHP y HTML. PROBLEMA
4. Temas basados en bloques y el problema con los datos dinámicos PROBLEMA Gutenberg Block-Based Themes and the Problem with Dynamic Data in HTML Templates
5. ¿ Qué hacemos ? PROBLEMA Gutenberg
6. TWIG Twig es un lenguaje de plantillas para PHP. No solo para plantillas de Wordpress, sirve para cualquier proyecto desarrollado sobre PHP. Ofrece una sintaxis concisa y accesible con la que trabajar. RÁPIDO - SEGURO - FLEXIBLE
7. TIMBER Timber: es una forma fácil, rápida y poderosa de crear temas. WordPress es increíble, pero el Loop no lo es. ¿Qué es Timber? Es un plugin que usando las librerías de Twig ayuda a crear temas de WordPress totalmente personalizados más rápido con un código más sostenible. Con Timber, puedes escribir el HTML separado de los archivos PHP. Esto limpia el código del tema, así los archivos PHP solo se enfocan en suministrar los datos y la lógica, mientras que su archivo twig puede enfocarse al 100% en la pantalla y HTML.
8. El loop Timber
9. Estilo PHP
10. Estilo Timber Con un motor de plantillas como Twig se puede separar la lógica de programación y la de visualización, logrando así un código fácil de mantener y un twig que puede ser editado por alguien que no conozca PHP pero sí entiende HTML y CSS.
11. Por qué? Timber extiende las capacidades de Twig para incluir primitivas que usan los datos de WordPress: taxonomías, estructura, consultas, paginación y datos de configuración del sitio. Puede consultar la documentación en: https://timber.github.io/docs/ https://twig.symfony.com/doc/3.x/
12. Quienes lo usan?
13. • {{ site.title }} • {{ site.description }} • {{ site.link }} • {{ theme.link }} Ejemplos Timber básico
14. Campos al estilo PHP Una consulta a la base de datos por cada campo que necesitamos
15. Campos al estilo Timber Una única consulta a la base de datos con los campos disponibles en la tabla post_meta
16. Jerarquía de plantillas WP
17. Jerarquía de plantillas Timber
18. • Lógica compleja de programación y código HTML separados • Código más fácil de mantener • Plantillas TWIG que pueden ser modificadas por alguien que no conoce PHP pero que sí entiende HTML • Timber / Twig produce un script PHP que se almacena en caché y por lo tanto el proceso de consulta no implica la compilación del script para toda visita sino cuando el twig ha sido modificado. Ventajas
19. • Aún hay lógica de programación en el twig. • Consultas más complejas a la base de datos pero en menor cantidad. Desventajas
20. Alejandra Zerdá Desarrolladora web WordPress - Drupal CEO - Semantic Contacto: gerencia@semantic.com.co Twitter: @cangreja533