Iniciar desarrollo de WordPress con Twig: Bloques, anidamiento y WP Cheatsheet

() translation by (you can also view the original English article)

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

Crear una plantilla de Base en Twig

Twig trabaja con el principio DRY (no te repitas). Una de las características más importantes de Twig es plantillas base con anidación y herencia múltiple. Mientras que la mayoría de la gente utiliza include en PHP de forma lineal, se pueden crear infinitos niveles de bloques anidados para controlar especialmente las plantillas de página.

Piensa en tu plantilla base como una plantilla padre con conjuntos de bloques en su interior. Una plantilla hijo puede extender de una plantilla padre y modificar cualquier bloque o bloques dentro de ella sin reescribir el código, que sería similar en ambas plantillas.

Echemos un vistazo a un ejemplo de una plantilla padre o base, el archivo base.twig. Se puede colocar con otras plantillas Twig en la carpeta views. Llamas a este archivo dentro de cualquiera de las plantillas Twig donde se usa como una plantilla padre para ese archivo en particular de Twig. Escriba las siguientes líneas de código para crear una carpeta de views (vistas). Esta plantilla base ofrecerá una estructura de base para tu tema de WordPress. Aquí está el código de un archivo de base.twig simple.

{# Base Template: base.twig #}

{% block html_head_container %}

    {% include 'header.twig' %}

{% endblock %}

  <body class="{{body_class}}">

		<div class="wrapper">

			{% block content %}

			    <!-- Add your main content here. -->
			    <p>SORRY! No content found!</p>

			{% endblock %}

		</div>
		<!-- /.wrapper -->

	{% include "footer.twig" %}

	</body>

</html>

Comentarios en Twig: `{# plantilla Base: base.twig #}`

Puedes escribir comentarios en Twig con {# comentar aquí #} sintaxis. Para comentar una parte de una línea en una plantilla, utilice la sintaxis de comentario {#... #}. Esto es útil para depuración o para añadir información de otros diseñadores de plantilla o a ti mismo. Puedes encontrar un Comentario en línea #1.

Bloques: `{% block html_head_container %}` `{% endblock %}`

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

Bloques son utilizados para la herencia y actúan como marcadores de posición y sustituciones a la vez. Están documentados en detalle en la documentación de la etiqueta extends.

{% block add_block_name_here %} Contenido de bloques aquí {% endblock}

En el código escrito anteriormente, puedes encontrar un bloque llamado html_head_container que se extiende en la línea #3 a la línea #7. Cualquier plantilla que se extienda de esta plantilla base base.twig puede heredar el mismo contenido del bloque o modificarlo para añadir algo más. Hay otro bloque llamado content (contenido) {% block contenido %} que abarca la línea #13 a la línea #18.

Del mismo modo, el concepto de creación de bloques se amplía más donde puedes crear infinitos niveles de bloques anidados, así. Este es el verdadero principio DRY.

Declaración de incluir: `{% incluyen "header.twig" %}` %}

Las plantillas Twig pueden incluir otras plantillas Twig, al igual que hacemos en PHP. Este archivo base.twig va a ser un contenedor general, y está incompleto sin los archivos de encabezado y pie de página. Por lo tanto, la sintaxis {% incluyen "file.twig" %} nos ayuda a incluir dos diferentes plantillas Twig:

La plantilla de encabezado {% incluyen "header.twig" %} en línea #5.
La plantilla de pie de página ({% incluyen "footer.twig" %} en línea #23.

Extender la plantilla Base

Creamos un archivo base.twig como plantilla padre y dejamos el bloque de contenido vacío. Este bloque puede ser usado en cualquiera de los archivos personalizados de Twig que se modifiquen, y el resto de la plantilla base será heredado. Por ejemplo, vamos a crear un archivo single.twig que extenderá de la plantilla base.twig y modificará el bloque content (contenido).

{# Single Template: `single.twig` #}

{% extends "base.twig" %}

{% block content %}

    <div class="single_content">
        <h1>{{ post.title }}</h1>
        <p>{{ post.get_content }}</p>
    </div>

{% endblock %}

Este código muestra un archivo single.twig personalizado. En la línea #3, esta plantilla es extendida a base.twig como su padre o plantilla base. La etiqueta extends puede ser utilizada para extender la plantilla de otra plantilla.

Aquí, todos los detalles relacionados con el header (encabezado) y el footer (pie de página) se heredan desde el archivo base.twig, que es la plantilla padre, mientras que el bloque content (contenido) se reemplazará con el título del post y el contenido. ¿Cuán divertido es eso?

WordPress CheatSheet para Timber

Los desarrolladores de Timber se han asegurado que complementa WordPress en todos los sentidos posibles desde el núcleo hasta usuarios. Aunque la sintaxis de conversión de funciones de WordPress en Timber es algo diferente, está bastante bien documentado. Hacia el final de este artículo, voy a compartir una lista de algunas de las conversiones para las funciones de WordPress y sus equivalentes en Timber. Vamos a recapitular.

Breve resumen!

En mi artículo anterior, he creado un mensaje de bienvenida que se genera simplemente a través de una cadena PHP en la Página principal de mi web demo. El código para esto puedes encontrarlo en GitHub. Vamos a repetir este procedimiento una vez más pero con un enfoque diferente y más técnico.

Ahora mismo, voy a mostrar el mismo mensaje de bienvenida pero esta vez creando una nueva página que rellena en la Página principal.

Recuperación de funciones de WordPress en Twig.

Crea una nueva página con el título "Welcome to My Blog!" (Bienvenido a mi Blog!) y añade algún contenido en su interior antes de pulsar publicar.

Ahora vamos a mostrar el contenido de esta página de bienvenida en la Página principal. Para ello, una vez más ve al archivo index.php y añade las siguientes líneas de código.

<?php
/**
 * Homepage
 */

// Context array.
$context = array();

// Add the page ID which is 4 in my case.
$context[ 'welcome_page' ] = Timber::get_post( 4 );

// Timber render().
Timber::render( 'welcome.twig', $context );

Aquí, he añadido un arreglo $context, dentro del cual añadí un elemento welcome_page y utiliza la función get_post() para buscar la página que acaba de crear. Para ello, he presentado el ID de la página, que en este caso es 4.

Dentro del archivo welcome.twig, vamos a usar print_r el elemento welcome_page y ver los datos que obtenemos. Mi archivo welcome.twig luce asi en este momento.

{# Message Template: `welcome.twig` #}
<section class="message">
        <pre>
            <code>{{ welcome_page | print_r }}</code>
        </pre>
</section>

Puedo confirmar que este elemento del arreglo $context tiene ahora un objeto TimberPost para esa página particular con ID 4.

Desde aquí, podemos obtener todas las propiedades que se pueden mostrar en el front-end. Por ejemplo, quiero mostrar el page title ( título de la página) y el content contenido solamente. Ahora mi archivo de welcome.twig luce de esta manera:

{# Message Template: `welcome.twig` #}
<section class="message">
        <h2>{{ welcome_page.title }}</h2>
        <p>{{ welcome_page.content }}</p>
</section>

Y la página tiene la información que necesitamos.

WordPress Cheatsheet

Como he dicho antes, Timber proporciona algunas conversiones útiles de las funciones de WordPress. Estas funciones pueden ayudar a obtener información relacionada con:

Blog
Body Classes (Clases de cuerpo)
Header/Footer (Encabezado y pie de página)

función `get_context()`

Hay una función de Timber:: get_context() que recupera información del sitio que un desarrollador le gustaría mostrar en el front-end a través del sitio. La documentación lo explica así:

Esto va para devolver un objeto con un muchas de las cosas comunes que necesitamos en todo el sitio. Cosas como su nav, wp_head y wp_footer que querrás para comenzar cada vez (incluso si las sobre-escribe más adelante). Usted puede hacer un $context = Timber::get_context(); print_r ($contexto); para ver lo que hay dentro o abre timber.php para inspeccionar por tí mismo.

1	<?php $context = Timber::get_context(); ?>

No sólo esto sino que puedes añadir tus propios datos personalizados a esta función a través de un filtro práctico.

<?php

/**
 * Custom Context
 *
 * Context data for Timber::get_context() function.
 *
 * @since 1.0.0
 */
function add_to_context( $data ) {
    $data['foo'] = 'bar';
	$data['stuff'] = 'I am a value set in your functions.php file';
	$data['notes'] = 'These values are available everytime you call Timber::get_context();';
	$data['menu'] = new TimberMenu();
	return $data;
}
add_filter( 'timber_context', 'add_to_context' );

A continuación puedes encontrar algunas conversiones como ésta, que puede ser utilizado con Timber.

Blog Info (Información de blog)

blog_info('charset') => {{ site.charset }}
blog_info('description') => {{ site.description }}
blog_info('sitename') => {{ site.name }}
blog_info('url') => {{ site.url }}

Body Class (Clase de cuerpo)

implode (' ', get_body_class()) => <body class="{{body_class}}">

Theme (Tema)

get_template_directory_uri() => {{ theme.link }} (para temas padres)
get_template_directory_uri() => {{ theme.parent.link }} (para temas hijos)
get_stylesheet_directory_uri() => {{ theme.link }}
get_template_directory() => {{ theme.parent.path }}
get_stylesheet_directory() => {{ theme.path }}

wp_functions

wp_head() => {{ wp_head }}
wp_footer() => {{ wp_footer }}

Vamos a experimentar con algunas funciones, partiendo de la información del blog. En lugar de foo, escriba {{ site.name }}.

El front-end mostrará el título del sitio web como este:

Timber también tiene algunas conversiones de función para mostrar los mensajes y la información relacionados via TimberPost(). Antes de explicar el uso de esta función, vamos a enumerar las conversiones de función relacionados con ella.

Post

the_content() => {{ post.content }}
the_permalink() => {{ post.permalink }}
the_title() => {{ post.title }}
get_the_tags() => {{ post.tags }}

Uso

Usa este código en el archivo single.php.

<?php
$context = Timber::get_context();
$context[ 'post' ] = new TimberPost(); 
Timber::render( 'welcome.twig', $context );
?>

Ahora vamos a probar la función {{ post.title }} dentro de nuestro archivo Twig.

1	<section class="single_post">
2	<h2>{{ post.title }}</h2>
3	</section>

Guardarlo y el front-end mostrará el título del post como este:

Tu turno!

Hoy, fuiste testigo de la aplicación práctica del principio DRY con Timber y Twig mientras construías un tema de WordPress. Ve a través de este tutorial y trata de implementarlo y dejame saber cualquier pregunta que puedas tener. Puedes encontrar el código completo en el repositorio GitHub de Cheatsheet de WP.

En el siguiente y último artículo, discutiremos cómo manejar imágenes y menús de una plantilla de WordPress basada en Twig. Hasta entonces, llega a mí a través de Twitter para darte respuesta a tus preguntas, o envialas aquí.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!