En el artículo anterior, escribí sobre la integración del motor de plantillas Twig con WordPress a través de Timber y sobre cómo los desarrolladores pueden enviar datos desde los archivos PHP a los archivos Twig. Discutamos cómo crear una plantilla base con Twig, los beneficios de esta técnica DRY y una hoja de registro de WordPress de Timber-Twig.

Creando una plantilla base en Twig

Twig funciona con el principio DRY (Don't Repeat Yourself). Una de las características más importantes de Twig es Plantillas base con anidación y herencia múltiple.. Si bien la mayoría de la gente usa PHP incluido de forma lineal, puede crear niveles infinitos de bloques anidados para controlar particularmente sus plantillas de página.. 

Piense en su plantilla base como una plantilla principal con conjuntos de bloques dentro de ella. Una plantilla secundaria puede extender una plantilla primaria y modificar cualquier bloque o bloques desde dentro sin volver a escribir el código, que sería similar en ambas plantillas.

Echemos un vistazo a un ejemplo de plantilla principal o base, un base.twig expediente. Puede colocarlo con otras plantillas Twig en la carpeta de vistas. Usted llama a este archivo dentro de cualquiera de sus plantillas de Twig donde se usa como plantilla principal para ese archivo de Twig en particular. Escriba las siguientes líneas de código para crear un  puntos de vista carpeta. Esta plantilla base proporcionará una estructura base para su tema de WordPress. Aquí está el código de un simple base.twig expediente.

# Plantilla base: base.twig # % bloque html_head_container% % include 'header.twig'% % endblock%  
 % contenido de bloque%  
¡LO SIENTO! No se encontró contenido!
 % endblock% 
  % include "footer.twig"%   

Comentarios en Twig: # Plantilla base: base.twig #

Puedes escribir comentarios en Twig con la sintaxis de # comment here #. Para comentar parte de una línea en una plantilla, use la sintaxis de comentario #… #. Esto es útil para la depuración o para agregar información para otros diseñadores de plantillas o para usted mismo. Puedes encontrar un comentario en la línea # 1..

Bloques % block html_head_container% % endblock%

Toda la filosofía de Twig y Timber gira en torno al enfoque del código modular en WordPress. He estado escribiendo repetidamente sobre la idea de que los datos en Twig se manejan en forma de componentes o bloques.. 

Los bloques se utilizan para la herencia y actúan como marcadores de posición y reemplazos al mismo tiempo. Están documentados en detalle en la documentación de la etiqueta extended..

% block add_block_name_here% Bloquea el contenido aquí % endblock%

En el código escrito arriba, puedes encontrar un bloque llamado html_head_container que abarca la línea # 3 a la línea # 7. Cualquier plantilla que amplíe esta plantilla base base.twig puede heredar el contenido del mismo bloque o modificarla para agregar algo más. Hay otro bloque llamado contenido. % contenido de bloque% en la cual se extiende la línea # 13 a la línea # 18.

De manera similar, el concepto de crear bloques se extiende aún más donde también puede crear niveles infinitos de bloques anidados. Este es el verdadero principio DRY..

Incluir declaración: % include "header.twig"% 

Las plantillas Twig pueden incluir otras plantillas Twig, tal como lo hacemos en PHP. Esta base.twig archivo será un contenedor general, y está incompleto sin su encabezamiento y pie de página archivos. Por lo tanto, la sintaxis % include "file.twig"% Nos ayudará a incluir dos plantillas Twig diferentes:

• La plantilla de encabezado % include "header.twig"% en la linea # 5.
• La plantilla de pie de página (% include "footer.twig"% en linea # 23.

Extendiendo la Plantilla Base

Creamos un base.twig como plantilla principal y dejó el bloque de contenido vacío. Este bloque se puede usar dentro de cualquier archivo Twig personalizado que lo modifique, y el resto de la plantilla base se heredará tal como está. Por ejemplo, vamos a crear una single.twig archivo que extenderá la plantilla base.twig y modificará la contenido bloquear.

# Plantilla única: 'single.twig' # % extiende "base.twig"% % contenido de bloque% 
 
 título de la entrada 
 
post.get_content
 
 % endblock% 

Este código muestra una costumbre. single.twig expediente. En la línea # 3, esta plantilla se extiende a base.twig como su plantilla principal o base. los se extiende La etiqueta puede usarse para extender una plantilla de otra..

Aquí, todos los detalles relacionados con el encabezamiento y pie de página se heredan de la base.twig archivo, que es la plantilla principal, mientras que contenido El bloque será reemplazado con el título de la publicación y el contenido. Que tan divertido es eso?

WordPress CheatSheet para la madera

Los desarrolladores de Timber se han asegurado de que complemente a WordPress de todas las formas posibles, desde el núcleo hasta los usuarios finales. Aunque la sintaxis de conversión de las funciones de WordPress en Timber es algo diferente, está bastante bien documentada. Hacia el final de este artículo, compartiré una lista de algunas de las conversiones para las funciones de WordPress y sus equivalentes de Timber. Recapitulemos.

Breve resumen!

En mi artículo anterior, creé un mensaje de bienvenida que se llenaba simplemente a través de una cadena PHP en la página de inicio de mi sitio web de demostración. El código para esto se puede encontrar en su sucursal en GitHub. Repitamos este procedimiento una vez más pero con un enfoque diferente y más técnico..

En este momento, mostraré el mismo mensaje de bienvenida, pero esta vez creando una nueva página que aparecerá en la página de inicio..  

Recuperar funciones de WordPress en Twig

Crea una nueva página con el título "¡Bienvenido a mi blog!" y agrega algo de contenido dentro de él antes de presionar el botón publicar.

Ahora vamos a mostrar los contenidos de esta página de bienvenida en la página de inicio. Para ello, una vez más ir a la index.php Archivo y añadir las siguientes líneas de código..

Aquí, he añadido una $ contexto array, dentro del cual agregué un elemento pagina de bienvenida y luego usamos el get_post () función para recuperar la página que acabo de crear. Para ello, envié el ID de página, que es 4 en este caso.
Dentro de bienvenido.twig archivo, vamos print_r el elemento pagina de bienvenida y veremos qué datos obtenemos. Mi archivo welcome.twig tiene este aspecto en este momento.
# Plantilla de mensaje: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Puedo confirmar que este elemento en la matriz $ context ahora tiene un objeto TimberPost para esa página en particular con ID 4.
Desde aquí, podemos obtener todas las propiedades que se pueden mostrar en el front-end. Por ejemplo, quiero mostrar el Título de la página y contenido solamente. Así que ahora mi bienvenido.twig archivo se ve así:
# Plantilla de mensaje: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Y la página de inicio tiene la información que necesitamos..
WordPress Cheatsheet
Como dije anteriormente, Timber le brinda algunas conversiones útiles de las funciones de WordPress. Estas funciones pueden ayudarlo a obtener información relacionada con:
 
Blog
 
Clases de cuerpo
 
Encabezado / pie de página
 
 get_context () función
Hay un Timber :: get_context () función que recupera cargas de información del sitio que un desarrollador querría mostrar en el front-end en todo el sitio. La documentación lo explica así:
Esto devolverá un objeto con muchas de las cosas comunes que necesitamos en todo el sitio. Cosas como tu nav, wp_head y wp_footer con las que querrás comenzar cada vez (incluso si las sobrescribes más tarde). Puedes hacer un $ context = Timber :: get_context (); print_r ($ context); para ver lo que hay dentro o abierto timber.php inspeccionar por ti mismo.
No solo esto, sino que también puede agregar sus propios datos personalizados a esta función a través de un filtro útil.
A continuación puede encontrar algunas conversiones más como esta, que se pueden usar con Timber.
Información del blog
 
 blog_info ('juego de caracteres') => site.charset 
 
 blog_info ('descripción') =>  descripción del lugar  
 
 blog_info ('nombre de sitio') =>  nombre del sitio  
 
 blog_info ('url') =>  Sitio URL  
 
 Clase de cuerpo
 implode (", get_body_class ()) =>  
 Tema
 
 get_template_directory_uri () => theme.link (para temas de padres)
 
 get_template_directory_uri () => theme.parent.link (para temas infantiles)
 
 get_stylesheet_directory_uri () => theme.link 
 
 get_template_directory () => theme.parent.path 
 
 get_stylesheet_directory () => theme.path 
 
 wp_funciones
 
 wp_head () => wp_head 
 
 wp_footer () => wp_footer 
 
Experimentemos con algunas funciones, comenzando con la información del blog. En lugar de foo, escribir  nombre del sitio . 
El front-end mostrará el título del sitio de esta manera:
Timber también tiene algunas conversiones de funciones para mostrar las publicaciones y la información relacionada con la publicación a través de TimberPost (). Antes de explicar el uso de esta función, enumeremos las conversiones de funciones relacionadas con ella..
Enviar
 
 el contenido() =>  Publicar Contenido  
 
 the_permalink () => post.permalink 
 
 el título() =>  título de la entrada  
 
 get_the_tags () => post.tags 
 
Uso
Usa este código en la single.php expediente.
Ahora vamos a probar el  título de la entrada  Funciona dentro de nuestro archivo Twig.
 
 título de la entrada 
 
 
Guárdalo y el front-end mostrará el título de la publicación de esta manera:
Tu turno!
Hoy, fue testigo de la implementación práctica del principio DRY con Timber y Twig mientras construía un tema de WordPress. Repase este tutorial e intente implementarlo, y hágame saber cualquier pregunta que pueda tener. Puede encontrar el código completo en la rama WP Cheatsheet en este repositorio de GitHub.
En el siguiente y último artículo, discutiré cómo manejar imágenes y menús en una plantilla de WordPress basada en Twig. Hasta entonces, comuníquese conmigo en Twitter para obtener respuesta a sus preguntas, o publique una aquí.



		
			
	   
	




Código