Desarrollo de temas para WordPress usando Timber

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.

E855c170c9b2e395b96cfda6da12d8b5?s=128

WordPress Medellín

August 25, 2020
Tweet

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