
He pasado una buena parte de mi carrera profesional trabajando con WordPress y he aprendido un par de cosas: la popularidad genera desprecio, y descartar algo basado únicamente en las críticas de los demás es una oportunidad perdida.
WordPress y yo comenzamos muy bien, pero a medida que pasaba el tiempo, nos alejamos cada vez más. No es que estuviéramos pasando menos tiempo juntos, pero parecía que estábamos haciendo los movimientos. La chispa se estaba desvaneciendo, pero aún sabía que era una parte muy importante de lo que hago. A veces se necesita un cambio, y fue entonces cuando Timber nos volvió a presentar.
Entiendo que WordPress no es la herramienta perfecta para todo o para todos, pero ¿qué es? Hay un momento y un lugar para ello, y espero trazar un mapa de algunos caminos que quizás te hayas perdido.
¿Qué es Twig?
Twig es un maravilloso lenguaje de plantillas para PHP. No dejes que el nombre te engañe; es todo menos frágil.
Si alguna vez ha visto algún lenguaje de plantilla de JavaScript, a-la Handlebars o Moustache, esto le resultará familiar. Si no es así, no se preocupe; Twig es un placer para la vista al brindarte una sintaxis concisa y accesible para trabajar. Solo eche un vistazo a este ejemplo de su página de inicio:
<?php echo $var ?>
<?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>
{{ var }}
{{ var|escape }}
{{ var|e }} {# shortcut to escape a variable #}
¡Dime que eso no provocó ninguna emoción!
Para hacer eco de una variable, simplemente envuélvala entre llaves dobles mientras omite el signo de dólar, por ejemplo {{ var }}
. También puede acceder a los atributos de una variable así: {{ user.name }}
Las estructuras de control aparecen dentro {% ... %}
bloques, y son tan amigables de manejar:
{% for post in posts %}
{{ post.title }}
{% endfor %}
Puede obtener más información en su documentación.
Imagínese escribir sus plantillas de WordPress de esta manera …
¿Qué es la madera?
Timber es el complemento que une WordPress con Twig. Junto con los beneficios de usar Twig, esto le permite separar PHP de sus plantillas HTML. Esto, a su vez, le brinda un entorno más respirable para que pueda desarrollar su tema, como lo exploraremos en un momento.
Echemos un vistazo a un ejemplo de la documentación, y luego lo revisaremos:
$context = Timber::get_context();
$context['post'] = new TimberPost(); // It's a new TimberPost object, but an existing post from WordPress.
Timber::render('single.twig', $context);
El archivo `single.twig`:
<article>
<h1 class="headline">{{post.post_title}}</h1>
<div class="body">
{{post.content}}
</div>
</article>
Comenzando con `single.php`, lo primero que estamos haciendo es buscar el contexto del tema con Timber::get_context();
. Este objeto contendrá cosas como sus menús, wp_head
, y wp_footer
. Más adelante veremos cómo agregar a esto si necesita algo más accesible globalmente en su tema. Usarás mucho esta línea.
A continuación, necesitaremos obtener la publicación que queremos mostrar en nuestra plantilla. Usando nuevo TimberPost();
averiguará qué publicación buscar.
Finalmente, queremos mostrar algo. Madera render
La función llamará a nuestro archivo Twig y pasará los datos que acabamos de recopilar.
Una bomba final, y espero que no sea demasiado: Timber viene con soporte integrado para Campos personalizados avanzados.
¿Por qué utilizar Twig?
Después de un tiempo con WordPress, es posible que no pueda ver la madera de los árboles en medio de un baile confuso entre PHP y HTML. Esto no quiere decir que todos los temas sean así, pero puede ver con qué facilidad puede suceder.
Lo que encontré bastante encantador de Timber es que mitiga este problema potencial al crear espacio entre los dos. Nunca está mezclando PHP con HTML, pero todavía se están hablando entre sí. Puede encontrar las conversaciones más significativas, ya que esto brinda a las mejores partes de WordPress la oportunidad de brillar.
Por ejemplo, nuestro archivo `single.php` tiene solo 3 líneas, y eso es solo para tratar con nuestros datos. Para cuando los datos llegan a nuestra vista, nos alegra saber que tenemos todo lo que necesitamos; todo lo que queda es marcarlo.
Empezando
Instalación
¡Así que vamos a quedar atrapados! Puede instalar esto a través de composer
si lo desea, pero en aras de la brevedad, lo instalaré a través de Complementos> Agregar nuevoy haga una búsqueda de palabras clave para Timber y Twig. Alternativamente, puede tomarlo del Directorio de complementos y cargarlo en su sitio.
Tema de inicio
Timber se envía con un tema básico básico, que es perfecto para comenzar a correr. Una vez que el complemento esté instalado, encontrará la siguiente carpeta que puede copiar a su carpeta de temas. Esto debería estar ubicado en `wp-content / plugins / timber / timber-starter-theme`. O, si solo desea echar un vistazo, puede navegar por el repositorio de temas de inicio.
Notarás a primera vista que no hay nada fuera de lo común aquí. ¿Dónde está la magia? Está bien sentirse aprensivo en este punto, así que profundicemos un poco más.
functions.php
El propósito de su archivo `functions.php` seguirá siendo en gran medida el mismo. Puede usarlo como lo haría normalmente, ya sea para declarar tipos de publicaciones personalizadas o para definir sus funciones personalizadas. Sin embargo, con Timber Starter Theme, notará que una declaración de clase aguarda adentro. El método más notable de esta clase es add_to_context
.
Desde aquí podemos agregar elementos a los que queremos acceder en todo nuestro tema. Digamos, por ejemplo, que creé un menú dentro del Panel de administración con una barra de primary-menu
, Podría agregarlo al contexto global así:
$context['primary_menu'] = new TimberMenu('primary-menu');
Ahora puedo acceder a él así:
<nav role="navigation">
<ul>
{% for item in primary_menu.get_items %}
<li class="{{item.classes | join(' ')}}">
<a href="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{item.get_link}}">{{item.title}}</a>
</li>
{% endfor %}
</ul>
</nav>
¡No está nada mal! Otro ejemplo que me gustaría compartir es cuando se usa algo como esta configuración de múltiples entornos. Esto crea una constante para denotar el entorno actual como desarrollo, puesta en escena o producción. Puedo incorporar esta información en mi tema fácilmente agregando lo siguiente a mi add_to_context
método:
$context['env'] = WP_ENV;
Dentro de mis plantillas puedo llamar {{ env }}
para decirme en qué entorno se está ejecutando mi sitio.
Se extiende y bloquea
Echemos un vistazo a `index.php`.
$context = Timber::get_context();
$context['posts'] = Timber::get_posts();
$templates = array( 'index.twig' );
if ( is_home() ) {
array_unshift( $templates, 'home.twig' );
}
Timber::render( $templates, $context );
Ok, la mayor parte de esto lo hemos visto antes. Aquí hay un pequeño extra de tener una variedad de plantillas. Todo esto está haciendo es agregar `home.twig` al inicio de la matriz si is_home()
devuelve verdadero.
Digamos is_home()
devuelve falso, por lo que le dirá que muestre `index.twig`. Los archivos Twig viven dentro del directorio `views`, así que comenzaremos allí, en nuestro archivo` index.twig`:
{% extends "base.twig" %}
{% block content %}
{% for post in posts %}
{% include 'tease.twig' %}
{% endfor %}
{% endblock %}
Hay un par de cosas nuevas para presentar aquí, a saber extends
y block
. Si no está seguro de lo que hacen, estoy seguro de que lo arreglará pronto.
Cuando llamamos extends
, estamos diciendo “use este diseño para cualquier contenido que declare en esta plantilla”. Luego, dentro de `base.twig` tendrás algo como esto:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
{% block content %}
No content found!
{% endblock %}
</body>
</html>
Por lo general, con WordPress podemos incluir nuestro pie de página y encabezado en cada plantilla, pero aquí está todo en un archivo que le decimos a nuestra plantilla que extienda.
Puedes nombrar tus bloques como quieras. Esa cadena de “¡No se encontró contenido!” solo se mostrará si no se proporciona nada en un content
cuadra. En Timber Starter Theme, verá que tienen bloques adicionales declarados para partes del encabezado y pie de página, pero se trata de usar lo que tenga sentido para usted.
Plantilla personalizada
Suficiente de esta charla suelta, ¡es hora de enrollar a mano nuestra propia plantilla! Este tutorial hará uso de Campos personalizados avanzados, así como algunas características adicionales de Timber + Twig que seguramente te encantarán.
Vamos a crear un ejemplo muy simple de una página que tiene una imagen de banner con un texto cruzado. Un elemento héroe, por así decirlo. Nuestro héroe nos revelará la expresividad de Twig y desafiará nuestro modelo mental de WordPress tal como lo conocemos. Imaginemos que nuestro elemento héroe se ha definido mediante campos personalizados avanzados. Puede llamar a un campo personalizado con lo siguiente: post.get_field('field_name');
. Si está utilizando los propios campos personalizados de WordPress, entonces es tan fácil como post.field_name
.
Hay un par de formas de crear una plantilla de página personalizada y, como en mi caso no siempre sabré la URL final, seguiré la ruta del “Archivo PHP personalizado”. ¡Finalmente, comencemos a escribir cosas!
base.twig
Para nuestro diseño base, combiné el archivo de diseño del tema de inicio de Timber con el archivo de índice de HTML5 Boilerplate:
<!doctype html>
<html class="no-js" {{site.language_attributes}}>
<head>
<meta charset="{{site.charset}}">
<title>
{% if wp_title %}
{{ wp_title }} - {{ site.name }}
{% else %}
{{ site.name }}
{% endif %}
</title>
<meta name="description" content="{{site.description}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{ site.theme.link }}/style.css">
</head>
<body>
<nav role="navigation">
<ul>
{% for item in primary_menu.get_items %}
<li class="nav-item {{item.classes | join(' ')}}">
<a class="nav-link" href="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{item.get_link}}">{{item.title}}</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="wrapper">
{% block content %}
No content found!
{% endblock %}
</div>
</body>
</html>
Llamando {{ site.theme.link }}
puede ser bastante útil, y si está usando Wiredep + Gulp, puede mirar este fragmento para ver cómo puede combinarlo en su flujo de trabajo.
Archivos de plantilla personalizados
Como ya hemos visto, su archivo PHP será simple. Unas pocas líneas en `your-custom-page.php` deberían hacerlo:
<?php
/*
* Template Name: Your Custom Page
*/
$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
Timber::render( 'your-custom-page.twig', $context );
¡Eso es todo lo que necesitamos! Nuestro archivo héroe `your-custom-page.twig` espera …
{% extends 'base.twig' %}
{% block content %}
<section>
<h1>{{ post.get_field('hero_title') }}</h1>
<img src="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{ TimberImage(post.get_field("hero_image')).src }}" alt="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{ TimberImage(post.get_field("hero_image')).alt }}">
</section>
{% endblock %}
Estamos usando TimberImage
aquí para obtener la información que necesitamos sobre la imagen. En este caso, es la URL y el texto alternativo.
Podríamos dejarlo ahí … pero como ya estamos en racha, vamos a aprovechar la resize
filtrar. Esto toma 3 argumentos: ancho, alto y recorte. Solo vamos a especificar el ancho.
Refactoricemos nuestra imagen de héroe para que sea un poco más receptiva:
<img alt="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{ TimberImage(post.get_field("hero_image')).alt }}"
hero_image')).src | resize(1600)}} 1600w,
{{ TimberImage(post.get_field('hero_image')).src | resize(1000)}} 1000w,
{{ TimberImage(post.get_field('hero_image')).src | resize(700)}} 700w
"
src="https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/{{ TimberImage(post.get_field("hero_image')).src | resize(1000)}}"
>
Si tu puedes hacerlo.
Conclusión
WordPress tiene mucho que ofrecer y soy culpable de darlo por sentado. Amar lo que haces es una recompensa en sí misma, y creo que tomarse un tiempo para abordar algo de una manera nueva es una gran oportunidad para cultivar algunas habilidades nuevas y revitalizar la motivación. No puedo decirte cuántos sitios he creado con WordPress, pero puedo decirte el momento exacto en que me voló la cabeza cuando usé Timber por primera vez.
Recursos
- Documentación de madera
- Documentación de Twig