Ya ha leído sobre los conceptos básicos del uso de Twig a través de Timber, mientras crea un tema de WordPress modular. También hemos estudiado el anidamiento de bloques y la herencia múltiple con Twig, basado en el principio DRY. Hoy, vamos a explorar cómo mostrar imágenes adjuntas, menús de WordPress y usuarios en un tema con Twig a través del complemento Timber..

Imágenes en madera

Las imágenes son uno de los elementos vitales para cualquier tema de WordPress. En las prácticas habituales de codificación de WordPress, las imágenes se integran con PHP dentro de las etiquetas de imagen HTML normales. Sin embargo, Timber ofrece una forma bastante completa de manejar el img Etiqueta (imagen) que es modular y limpia..

Hay imágenes adjuntas al campo de miniaturas de la publicación. Estos pueden ser recuperados fácilmente a través de los archivos Twig por post.thumbnail. Es así de fácil!

Uso

Empecemos con un ejemplo práctico. Nuestro single.php archivo se ve así:

Aquí, he usado el TimberPost () Funcionar por razones bastante obvias. Esto se usa en todo Timber para representar las publicaciones recuperadas de WordPress, haciéndolas disponibles para las plantillas Twig.
Como la imagen destacada se adjunta a los datos de la publicación, ahora necesitamos recuperarla en el extremo frontal. Así que el archivo Twig para ello, single.twig, se verá así:
# Plantilla Sinlge: 'single.twig' # % extiende "base.twig"% % block content% 
  
 % endblock% 
En la línea # 9 el código post.thumbnail.src recupera la imagen destacada (miniatura) de la publicación y la muestra así:
Puede utilizar esta sintaxis de código para recuperar tantas imágenes en miniatura que desee.
Todavía hay mucho más con lo que puedes experimentar con estas imágenes cuando usas Timber. Por ejemplo, también puede redimensionarlos a través de:
 
Utilizando el redimensionar (), función, puede agregar nuevas dimensiones a la imagen donde se encuentra el primer parámetro anchura y el segundo es altura. Si desea escalar la imagen proporcionalmente, omita el altura atributo. Ahora la sintaxis se convierte en:
El front-end muestra la misma imagen como esta:
Si quieres explorar más, prueba el libro de cocina de imágenes.
Utilizando TimberImage () 
Considere un escenario en el que un desarrollador desea obtener imágenes a través de la identificación de imagen, o quiere mostrar una imagen externa a través de una URL, etc. Para un enfoque tan extendido, Timber ofrece una clase, TimberImage (), para representar las imágenes que se recuperan de WordPress.
Uso
Tomemos un ejemplo para nuestra single.php archivo, que se ve así ahora:
Esta vez, estoy usando el TimberImage () clase que toma la identificación de la imagen 8 como su parametro. El resto de la rutina de codificación es la misma. Vamos a recuperar esta imagen a través del archivo Twig single.twig.
 
El valor almacenado dentro $ contexto elemento custom_img, es decir. custom_img, recuperará la imagen a través de su ID para mostrarla en el extremo frontal de esta manera:
Para recuperar la imagen a través de una URL externa, puede seguir esta sintaxis.
 
Esta vez, en lugar de la ID de imagen, hay una URL de imagen externa que se muestra en la parte delantera de esta manera:
Para explorar algunas funciones más de esta función, puede consultar la documentación..
Menús en madera
Ahora, ¿cómo harías para representar un menú de WordPress con plantillas Twig? Eso es una cosa difícil de hacer. Pero, ¡espera! La madera le proporciona su TimberMenu () clase, que puede ayudarte a representar los menús de WordPress dentro de los archivos Twig como un bucle completo. Echémosle un vistazo.. 
Uso
Todo el concepto de recuperar los elementos del menú gira en torno a la objeto de menú. Hay dos formas de definir su contexto. El primero es hacer que el objeto de menú esté disponible en cada página agregándolo a la función global get_context (), como hice en funciones.php expediente. En segundo lugar, puede agregar un menú en particular por su ID para una plantilla PHP en particular.
Independientemente de los dos métodos, una vez que el menú esté disponible para la Madera $ contexto matriz, puede recuperar todos los elementos del menú de la misma. Pero prefiero definirlo globalmente. Así que ve a la funciones.php archiva y pega el siguiente código:
Entonces, aquí he definido una función personalizada llamada add_to_context. Dentro de esta función hay algunos datos que deseo que estén disponibles en cada plantilla de PHP a través de get_context () función. En la línea # 13 puedes encontrar una instancia de TimberMenu () pasando contra el menú de elementos en el $ datos formación. 
Esto hará que un menú estándar de WordPress esté disponible para la plantilla de Twig como un objeto que podemos recorrer. los TimberMenu () La función puede tomar parámetros como la barra de menú o ID..
Vamos a crear una plantilla de Twig llamada menu.twig expediente.
# Plantilla de menú: 'menu.twig' #  
El código anterior ejecuta un bucle dentro de esta plantilla Twig. La línea # 5 corre a para bucle para cada elemento del menú y muestra el título de cada menú ít en una lista desordenada. El bucle se ejecuta hasta todos los pares de valores-clave de la menú objeto se iteran y se enumeran en el extremo frontal.
Seguí adelante e incluí el menu.twig plantilla en el base.twig plantilla en linea # 11.
# Plantilla base: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % include "menu.twig"% 
 % contenido de bloque%  
¡LO SIENTO! No se encontró contenido!
 % endblock% 
  % include "footer.twig"%   
Vamos a previsualizar el back-end (Apariencia> Menús) de mi sitio web de demostración donde su menú contiene dos elementos principales y un elemento secundario. 
Entonces, echemos un vistazo a una página de publicaciones, ya que nuestra single.twig se extiende base.twig, Nuestro menú aparecerá automáticamente en esa página..
Puedes ver que en la parte superior de nuestra publicación única hay un menú con los elementos principales dentro de ella.. 
¿Qué pasa con los elementos del menú hijo? Vamos a actualizar nuestro menu.twig archivo para incluir los elementos secundarios, así.
# Plantilla de menú: 'menu.twig' #  
Las líneas 9 a 23 imprimen los elementos del menú secundario, si los hay. Esta vez, la interfaz muestra el elemento hijo de nuestro primer padre.
Para más detalles sobre TimberMenu (), verifica la documentación.
Usuarios en madera
Los usuarios pueden ser recuperados de la base de datos de WordPress con el TimberUser () clase. La clase toma ID de usuario o slug como argumentos para recuperar al usuario.
Como los usuarios o autores de blogs están asociados con las publicaciones de WP, usaré el código de single.php, que ahora se ve así:
La línea # 20 inicializa el TimberUser () clase y se asigna a un elemento de objeto de contexto, es decir,. usuario. Vamos a mostrar el nombre del autor a través de la plantilla Twig.
Mi plantilla single.twig tiene una nueva línea de código al final, en la línea # 21.
# Plantilla Sinlge: 'single.twig' # % extiende "base.twig"% % block content% 
  #  # #  # #  # 
 título de la entrada 
 
post.get_content
 
Autor: usuario 
 
 % endblock% 
El código recupera el nombre del autor de la publicación actual y lo muestra en el front-end. Puedes usar usuario | print_r para ver qué más está disponible en el objeto TimberUser. 
Para leer más sobre esta clase, consulte la documentación. Puede encontrar el código de este tutorial en el repositorio de GitHub en la sucursal de ImagesMenusUsers.
Conclusión
Este artículo envuelve toda la serie. A lo largo de estos cuatro artículos, exploré cómo usar Timber para integrar el lenguaje de plantillas Twig en un tema de WordPress. 
El repositorio final de esta serie se puede encontrar en GitHub con ramas específicas de tutoriales:
 
Tutorial # 2: Comenzando
 
Tutorial # 3: WordPress Cheatsheet
 
Tutorial # 4: TimberImages, TimberMenu y TimberUser
 
Puedes consultar la documentación online de Timber para más información..
Repase toda esta serie e implemente todos los ejemplos explicados, y apuesto a que disfrutará Twig. Publique sus consultas en el cuadro de comentarios a continuación. También puedes contactarme a través de Twitter..



		
			
	   
	




Código