Kick-Start WordPress Development con Twig Cómo empezar

Ahora entendemos que Twig-junto con el complemento WordPress Timber-can puede ayudar a los desarrolladores a escribir código modular mientras desarrollan temas de WordPress. Con este enfoque modular, puede manejar la lógica y la capa de visualización de su aplicación web por separado. Vayamos a algo más técnico: crear plantillas Twig, convertir HTML a archivos Twig y cómo representar la lógica o los datos con plantillas Twig..

Instalar madera

En primer lugar, voy a instalar Timber, que es un complemento de WordPress que ayuda a integrar el motor de plantillas Twig con WP. Hagamoslo.

• Inicie sesión en su panel de WordPress.
• Ir Plugins> Añadir Nuevo.
• Buscar el complemento Timber.
• Instalar y activar el plugin..

Una vez que se instala Timber, ahora puede comenzar a dividir sus archivos de plantilla en datos y ver archivos.

Creación de una plantilla de ramita

Antes de comenzar a crear plantillas Twig, asumo que tiene algún tipo de configuración local de WordPress. Para este tutorial en particular, mi configuración es:

• Una instalación de WP de host local (estoy usando DesktopServer por ServerPress).
• Plugin de madera instalado y activado.
• Opcional: cualquier tema básico / de inicio (estoy usando el mío, es decir, limpio).

UpStatement también ha creado un tema de inicio de la madera.

Vamos a empezar. Quiero mostrar un mensaje de bienvenida en la parte superior de mi página de inicio. ¿Cómo lo haría sin Twig? Probablemente, incluiría código HTML dentro del archivo PHP y repetiría el mensaje de bienvenida, como lo hice en el ejemplo de código a continuación. Mi index.php archivo se ve algo como esto.

Ahora la página de inicio de mi instalación de WordPress local muestra un mensaje de bienvenida en la parte superior. Aquí está la captura de pantalla.

Problema

El problema con este enfoque es que estamos mezclando datos / lógica con la vista. Cuanto más complejo se vuelve este archivo, más difícil es mantenerlo y mucho menos comprender, por ejemplo, si agrega el bucle de WordPress después de este código con algunos argumentos y luego filtre y pagine. Además, PHP dentro de HTML no se ve bien cuando terminas con un poco de lógica.

Enfoque modular

Para hacerlo más modular, podemos pensar en nuestro contenido en la página de inicio en forma de bloques o componentes. Puede haber dos completos de forma predeterminada, es decir, publicaciones de The_Loop y paginación. Desde ahora queremos agregar otro componente en la parte superior, es decir, el mensaje de bienvenida, vamos a crear un archivo Twig para ese componente. 

Abra un nuevo archivo en blanco en el editor y copie y pegue las siguientes líneas de código.

 
 
Bienvenidos a mi sitio web!
 
 

Crea una nueva carpeta en la raíz de tu tema llamada puntos de vista y guarda este archivo con el  .ramita extensión. Por ejemplo, guardé el archivo como bienvenido.twig.

Renderizar la plantilla de la ramita

Timber nos proporciona algunas funciones útiles, una de las cuales es la función de render. Puedes llamarlo así:

Timber :: render ();

Esta función puede llevar hasta cuatro argumentos. Ya que está fuera del alcance de este artículo, puede leerlo en los documentos de Timber. Podemos pasar el nombre de cualquier archivo Twig que esté presente en el puntos de vista Carpeta de tu tema para esta función..

Vamos a mostrar el mensaje de bienvenida en el index.php expediente.

La madera hace la bienvenido.twig archivo, carga el HTML y muestra la nueva capa de vista modificada en el front-end de esta manera: 
los hacer() función toma bienvenido.twig como su argumento, pero lee automáticamente este archivo siempre que las plantillas de ramita residan dentro de la carpeta nombrada puntos de vista. 
Si desea utilizar un nombre / ruta personalizado para la carpeta, deberá proporcionar la ruta de esa carpeta. Por ejemplo, creé una carpeta de ramas en la raíz de mi tema y la agregué al argumento de la función de representación.
La orden de carga oficial
Timber primero buscará en el tema secundario y luego volverá al tema principal (igual que la lógica de WordPress). La orden de carga oficial es:
 
Ubicaciones definidas por el usuario
 
Directorio de script PHP de llamada (pero no tema)
 
Tema infantil
 
Tema principal
 
Directorio de script PHP que llama (incluyendo el tema)
 
El elemento 2 se inserta encima de los demás, de modo que si está utilizando Timber en un complemento, utilizará los archivos twig en el directorio del complemento..
Entonces, ahora el archivo index.php no tiene HTML dentro, y está representando una plantilla Twig.
Ahora vamos a enviar algunos datos dinámicos de index.php al bienvenido.twig archivar y renderizar con madera.
Enviando datos a través de Timber a Twig Files
Para enviar datos desde el archivo PHP a Twig, debe definir una matriz de contexto. La función de renderización toma una matriz de datos para proporcionar plantillas de Twig con algún tipo de contexto. Llamemos a la matriz  $ contexto, que es una matriz asociativa, es decir, ocupa los pares clave-valor. 
Agreguemos un par clave-valor que sería un mensaje de bienvenida dinámico, que nuestro archivo PHP enviaría al archivo Twig.
Archivo de datos
Mi index.php el archivo se ve así ahora.
Así que, dentro de la index.php archivo, he definido un vacío $ contexto matriz en la línea # 8. Luego en la línea # 11, he creado una variable $ var con el valor 'Mensaje dinámico'. En la línea # 14, he creado una clave. el mensaje que es igual a $ var.
En la línea # 17, llamé a la función de render con la bienvenido.twig archivo, pero esta vez, toma un argumento adicional, es decir, el $ contexto formación. Este nuevo argumento en realidad tiene los datos que Timber enviará desde el archivo PHP al archivo Twig.
Por lo tanto, definimos la matriz de contexto y agregamos un mensaje dinámico (puede mostrar un mensaje diferente a diferentes usuarios agregándole algún tipo de lógica, como mostrar el nombre del usuario actual). 
Archivo de plantilla
Ahora necesitamos usar estos datos, es decir. el mensaje, en el archivo Twig. Podemos hacer eco de una variable dentro de nuestra plantilla de Twig colocando llaves dobles a su alrededor. Por ejemplo, para hacer eco de $ var en un archivo twig, podemos escribir var. Eso es exactamente lo que hice.
 
 
 el mensaje 
 
 
El valor de el mensaje Se imprimirá dentro de las etiquetas h2. Lo sé, es así de simple, y el código se ve bastante limpio. 
¡Eso es! Guarde el código y vea el mensaje de bienvenida dinámico en el front-end. Aquí está la captura de pantalla final.
Conclusión
Para resumir, ahora puede usar el archivo PHP para codificar la lógica y proporcionar datos a una plantilla de Twig que contiene HTML y representa las variables o funciones de Twig dentro de las llaves dobles..
Este enfoque modular puede llevar a un archivo de plantilla por separado para cada componente en su tema de WordPress. Piense en tener un componente message.twig que pueda usar en cualquier parte del tema para mostrar cualquier mensaje que desee, cualquier número de veces. 
Esta fue una implementación básica de Twig with Timber. Sin embargo, en los próximos dos artículos escribiré sobre la Hoja de trucos de WordPress de Timber, cómo gestionar imágenes con Timber y cómo crear menús sin utilizar la función "walker loco"..
Si tiene alguna pregunta, publíquela en los comentarios a continuación o comuníquese con Twitter. También puede consultar el código de mi tema en este repositorio de GitHub..



		
			
	   
	




Código