Plantillas de WordPress para principiantes: Madera

Desde que hablé sobre las plantillas de WordPress, he cubierto algunos motores diferentes que están disponibles:

• Jade-PHP
• Bigote
• Puntilla
• Espada

Si está mirando a Moustache, es posible que le interesen los manillares, y si está mirando a Blade, le recomiendo que consulte a Sage del equipo de Roots.

Pero para esta publicación final, continuaré con Timber, que es lo que presenté ayer. No me importa mucho cuál se usa (ya que todos tienen sus compensaciones), siempre que sea consistente.

Plantillas de WordPress: uso de madera

Dicho esto, así es como puede comenzar a usar Timber en sus proyectos.

Para comenzar, deberá estar familiarizado con Composer y deberá tener una configuración de entorno de desarrollo local. Si no tiene ninguno de estos o necesita ayuda, lo tengo cubierto:

1. Usando Laravel para el desarrollo de WordPress
2. Configuración de Composer para WordPress

Una vez que haya seguido los pasos en cada una de esas guías, debería estar listo para comenzar. Así que esto es lo que vamos a hacer.

1 Configurar una instalación local para madera

Usaré Valet para esto, lo que significa que tendré un directorio con la última versión de WordPress (que es 4.8.3) instalada en su directorio.

Esto significa que ya tendré una base de datos lista para funcionar:

Y voy a emitir los siguientes comandos para configurar Laravel y una instalación segura (para imitar un entorno de prueba):

$ valet link
$ valet secure

Para que pueda acceder al sitio en un navegador.

Para aquellos que tienen curiosidad, estoy usando:

• WordPress 4.8.3
• veintiquince
• Limpiar enlaces permanentes

Y ningún otro complemento. Es solo una instalación básica distinta de lo que ves arriba.

En este punto, estoy listo para instalar Timber.

2 Instalación de madera

Suponiendo que haya seguido las guías anteriores para Valet y Composer, debería estar listo para comenzar. Entonces, usando una terminal, navegue a su directorio de instalación de WordPress.

Luego emita el siguiente comando:

$ composer require timber/timber

Esto instalará Timber, pero aún deberá actualizar el archivo functions.php de su tema para que use correctamente el cargador automático de Composer.

Suponiendo que todo haya ido correctamente, debería poder actualizar su sitio, navegar a cualquier publicación, página, etc. y nada debería estar fuera de servicio.

3 Inicializar madera

Finalmente, es hora de usar Timber para reemplazar gran parte de lo que estamos acostumbrados a ver dentro del contexto de una plantilla de WordPress.

Estoy optando por hacer esto dentro de content-page.php para que sea fácil de seguir. Tenga en cuenta que el segmento de código que estoy cambiando originalmente se ve así:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>

    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php the_content(); ?>
        <?php
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">'. __( 'Pages:', 'twentyfifteen' ). '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">'. __( 'Page', 'twentyfifteen' ). ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',) );
        ?>
    </div><!-- .entry-content -->

    <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>

</article><!-- #post-## -->

En esta publicación, no voy a volver a crear completamente lo que ve arriba, pero voy a comenzar con lo que se necesita para comenzar a usar un motor de plantillas dentro del contexto de una base PHP.

Primero, necesitará crear una plantilla que se pueda aplicar a la página de muestra en una instalación estándar de WordPress. Llamé al mío template-timber-page.php y se ve así:

<?php

/**
 * Template Name: Timber Template
 * Description: Replaces the standard page with a Timber template.
 */

$timber  = new TimberTimber();
$context = Timber::get_context();
$post    = new TimberPost();

$context['post'] = $post;
Timber::render(
  array( 'content-'. $post->post_name. '.twig', 'page.twig' ),
  $context
);

En el código anterior, esto es lo que sucede:

1.  Estoy instanciando el objeto Timber.
2. Entonces, obtengo un contexto de madera. El contexto contiene mucha información que es útil dentro de la plantilla (o el sitio) dependiendo de dónde esté usando su plantilla.
3. Después de eso, estoy agarrando un TimberPost que es esencialmente una extensión de una publicación de WordPress. Tiene los datos de WP_Post pero lo pone a disposición de nuestras plantillas.
4. A continuación, configuro el índice de publicación de la matriz $context con una referencia a Timber Post (que he llamado $post ).
5. Finalmente, le digo a Timber que represente una página llamada content-sample-page.twig usando el contexto dado.

Aquí es donde es importante crear el archivo twig real (que es la extensión del archivo de plantilla de Timber). Así que creé content-sample-page.twig y se ve así:

{% block content %}
  <article id="post-{{post.ID}}" class="{{body_class}}">

    <header class="entry-header">
      <h1 class="article-h1">{{post.title}}</h1>
    </header><!-- .entry-header -->

    <div class="entry-content">
        {{post.content}}
    </div><!-- .entry-content -->

  </article><!-- #post-## -->
{% endblock %}

Después de instanciar el objeto Timber y luego reemplazar el código que ve arriba, notará que el código se lee un poco diferente (aunque no del todo difícil de seguir).

4 Aplicación de la plantilla

Para aplicar la plantilla, vaya a Páginas en WordPress. Ubique la página de muestra y luego, en el menú desplegable de plantillas, elija la que acabamos de crear usando el título de arriba:

Una vez hecho esto, puede ver la publicación. Notarás que se ve un poco desnudo en comparación con lo que estamos acostumbrados a ver:

Pero tiene una idea general de cómo podemos usar el contexto para acceder a muchas de las mismas propiedades que estamos acostumbrados a ver en WordPress sin tener que ensuciar el código con marcado y PHP y cualquier otra cosa que estemos acostumbrados. a usar

Más recursos

Sé que este es predominantemente un curso intensivo en plantillas y no cubre tanto como podría. Como esta publicación se acerca a las 1000 palabras, necesito trazar la línea en alguna parte, así que opté por hacerlo aquí.

Sin embargo, esto no significa que haya terminado de discutirlo. Planeo volver a temas más avanzados sobre las plantillas en macetas futuras.

Pero si está interesado, le recomiendo que siga la Guía de inicio para Timber y el proyecto en GitHub.

Esto al menos le dará un punto de partida desde el cual puede progresar aún más en sus esfuerzos por crear un código más limpio y separado lógicamente de lo que estamos acostumbrados a ver en WordPress.