Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

WordPress Medellín

August 25, 2020
Tweet

More Decks by WordPress Medellín

Other Decks in Programming

Transcript

  1. PHP templating
    engine
    Desarrollando en WordPress
    Usando Timber

    View full-size slide

  2. Desarrolladora Web
    WordPress - Drupal
    Front-End
    Alejandra
    Zerdá
    Directora proyectos
    Semantic

    View full-size slide

  3. WordPress mezcla el
    código PHP y HTML.
    PROBLEMA

    View full-size slide

  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

    View full-size slide

  5. ¿ Qué hacemos ?
    PROBLEMA
    Gutenberg

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  8. El loop
    Timber

    View full-size slide

  9. 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.

    View full-size slide

  10. 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/

    View full-size slide

  11. Quienes lo
    usan?

    View full-size slide


  12. {{ site.title }}

    {{ site.description }}

    {{ site.link }}

    {{ theme.link }}
    Ejemplos
    Timber
    básico

    View full-size slide

  13. Campos al
    estilo PHP
    Una consulta a la base de
    datos por cada campo que
    necesitamos

    View full-size slide

  14. Campos al
    estilo
    Timber
    Una única consulta a la
    base de datos con los
    campos disponibles en la
    tabla post_meta

    View full-size slide

  15. Jerarquía de plantillas WP

    View full-size slide

  16. Jerarquía de
    plantillas Timber

    View full-size slide


  17. 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

    View full-size slide


  18. 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

    View full-size slide

  19. Alejandra Zerdá
    Desarrolladora web WordPress -
    Drupal
    CEO - Semantic
    Contacto:
    [email protected]
    Twitter: @cangreja533

    View full-size slide