
La siguiente es una publicación invitada de Charlie Walter. Charlie nos ha escrito antes, cuando no está haciéndome extremadamente envidioso. Ahora ha vuelto para compartir algo completamente diferente. Vamos a aprender sobre los métodos que ha aprendido para optimizar la temática de WordPress utilizando motores de plantillas.
¡Los motores de plantillas son fantásticos! Hacen que los lenguajes de programación complejos sean mucho más fáciles de escribir e incluyen características que agilizan el proceso de desarrollo.
WordPress es un entorno natural para que veamos cómo funcionan los motores de creación de plantillas, no solo porque se basa en plantillas, sino por su dependencia de PHP. El propio WordPress es elogiado por su baja barrera de entrada para los editores de contenido, pero el conocimiento de PHP que requiere para una gran personalización lo convierte en una barra algo más alta para los desarrolladores que desean ingresar al juego más allá de la temática básica.
Cómo funcionan los motores de plantillas
En su forma más básica, un motor de plantillas es un paquete que se incluye en un proyecto que nos permite compilar un lenguaje en otro.
Lo comparo con el dominio de un idioma extranjero. Sí, tomaste cuatro años de instrucción en español en la escuela secundaria, y es posible que puedas leerlo y escribirlo a un nivel decente, pero aún es muy difícil juntar una cadena compleja de palabras. Si tuvieras una aplicación en tu teléfono que pudiera tomar tu spanglish y traducirlo a un español bellamente compuesto, eso sería similar a lo que hace un motor de plantillas para PHP.
Veamos el ejemplo básico del bucle de WordPress en PHP vanilla:
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><a href="https://css-tricks.com/templating-languages-and-wordpress/<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ) ?></p>
<?php endif; ?>
… Y lo mismo, pero en Twig:
{% for post in posts %}
<article>
<h1>{{post.title}}</h1>
{{ post.excerpt }}
</article>
{% else %}
<p>{{ __('Sorry, no posts matched your criteria.') }}</p>
{% endfor %}
Si eso no merece un pingüino deslizándose feliz, entonces no sé qué lo hará.
Diferentes ejemplos de plantillas para WordPress
Voy a ejecutar varios motores de creación de plantillas que se pueden usar para hacer que el desarrollo de temas de WordPress sea mucho más divertido de escribir. En cada caso, daremos una descripción general del motor de plantillas en sí, un ejemplo de cómo se puede usar con el ciclo de WordPress y luego los recursos para conectarlos a WordPress.
- Jade-PHP
- Jade
- Bigote
- Madera
- Madera + Jade
Jade-PHP
Jade-PHP hace posible escribir PHP en archivos Jade.
¡Esperar! ¿Qué es Jade?
Jade es una sintaxis limpia y sensible a los espacios en blanco que es un motor de creación de plantillas HTML por derecho propio. Entonces, por ejemplo, esto …
.my-class
a.btn(href="http://charliejwalter.net/") I'm a link
… compila en esto:
<div class="my-class">
<a class="btn" href="http://charliejwalter.net/">I'm a link</a>
</div>
Si bien Jade en sí es una abstracción de HTML, Jade-PHP nos permite abstraer PHP junto con HTML, lo que lo convierte en una opción ideal para el desarrollo de temas de WordPress.
La puesta en marcha
Las plantillas de WordPress están escritas y guardadas dentro .jade
archivos. Usando Grunt y la tarea grunt-jade-php, podemos compilar archivos Jade (.jade
) en los archivos PHP (.php
) WordPress requiere hacer lo suyo.
Las plantillas de Jade tienen una relación de uno a uno con las plantillas de WordPress. En otras palabras, donde WordPress tiene una page.php
archivo para la plantilla de página predeterminada, incluiríamos un page.jade
en nuestro directorio que nuestra tarea Grunt traducirá al archivo PHP. WordPress luego usará los archivos PHP compilados como si hubiéramos escrito PHP dentro de ellos, aunque nunca tuvimos que tocar PHP en absoluto. ¡Bastante genial!
Nota: Estos archivos PHP deben estar donde los coloca normalmente.
Una desventaja es que tenemos que compilar nuestro Jade a PHP localmente y, cuando eso sucede, Jade-PHP produce un documento HTML completo para cada plantilla en lugar de usar métodos de WordPress como get_header()
y get_template_part()
para reutilizar plantillas. Esto no es un problema de mantenimiento, pero en términos de rendimiento, estaríamos cargando código que podría haberse almacenado en caché.
La forma en que estructuro mis archivos personalmente es crear tanto source
y compiled
carpetas en mi proyecto para mantener todos los archivos fuente separados de las versiones compiladas. El compiled
carpeta es lo que WordPress utilizará realmente como tema. Sin embargo, los archivos que no necesitan compilarse deberán copiarse en esta carpeta compilada. Esto se puede hacer con grunt-contrib-copy
. También significa que podemos watch
estos archivos y conéctelos a livereload
para refrescar nuestro trabajo sobre la marcha!
├── source
├── header.jade
├── index.jade
├── footer.jade
├── functions.php
├── style.css
├── compiled
├── header.php
├── index.php
├── footer.php
├── functions.php
├── style.css
├── Gruntfile.coffee
└── package.json
WordPress intentará leer el source
carpeta como otro tema, lo que generará un mensaje de error como “Falta la plantilla”, ya que no puede ubicar todos los archivos necesarios para construir un tema completo. No es ideal, aunque teóricamente podría excluir los archivos de origen en el proceso de implementación para evitar que aparezca ese tipo de mensaje.
Una cosa a tener en cuenta sobre Jade-PHP es la falta de resaltado de sintaxis específico para Atom, Sublime o TextMate, al menos en el momento de escribir este artículo. Eso podría ser un factor decisivo para algunos.
El bucle de WordPress en Jade-PHP
:php
if (have_posts()) :
while (have_posts()) : the_post();
article
h1: a(href= the_permalink())= the_title()
!= the_excerpt()
endwhile;
Tema de inicio Jade-PHP
Descargue un tema de inicio Jade-PHP para WordPress.
Jade
Siempre encuentro la creación de temas de WordPress terriblemente desordenada debido a lo difícil que es hacer que PHP y HTML se vean bien juntos en el mismo marcado. Podemos usar Jade solo para ayudar con el levantamiento. La principal diferencia aquí con Jade-PHP es que nuestros activos se compilarán en el lado del servidor. Eso significa que no se necesita compilación local porque se realizará sobre la marcha a medida que se acceda a las plantillas. Además, eso resuelve el problema de la compilación de plantillas en documentos HTML completos, lo que nos permite aprovechar las funciones de creación de plantillas más avanzadas de Jade, como extender una plantilla a otra.
La puesta en marcha
En primer lugar, necesitamos el compilador de Jade para PHP, que se puede encontrar en el repositorio de Jade en GitHub en la sección “Implementaciones en otros idiomas”.
Entonces, creemos el composer.json
archivo en nuestra carpeta de temas:
{
"require": {
"path-to-project/jade-php": "*"
}
}
Ahora, ejecute la instalación de Composer. Si su instalación de Composer es global, sería:
composer install
O, si composer está instalado localmente en el proyecto:
php bin/composer install
Ahora, necesitamos los siguientes archivos en nuestro directorio de temas:
compiler.php
page-data.php
layout.jade
index.jade
functions.php
index.php
Nota: Todos los temas de WordPress requieren style.css
también, pero lo dejamos fuera de esta y otras listas porque no tiene nada que ver con comenzar con nuestros motores de plantillas.
compiler.php
Este archivo se encarga de devolver el compilador de Jade a sus plantillas requiriéndolo en todas partes.
<?php
require_once('vendor/autoload.php');
use JadeJade;
return new Jade();
?>
page-data.php
Esto es para las variables de página comunes que queremos que estén disponibles para su reutilización.
<?php
$data = array(
'wp_title' => wp_title('', false),
'wp_head' => output_buffer_contents(wp_head),
'wp_footer' => output_buffer_contents(wp_footer),
'template_directory_uri' => get_template_directory_uri(),
'stylesheet_url' => get_bloginfo('stylesheet_url'),
'home_url' => esc_url( home_url( "https://css-tricks.com/" ) ),
'blog_title' => get_bloginfo(),
'pages' => get_pages(),
'categories' => get_categories('show_count=0&title_li=&hide_empty=0&exclude=1')
);
// To compensate for WordPress not providing a url for each post
foreach ( $data['pages'] as $page ) {
$page->permalink = get_permalink($page->ID);
}
// To compensate for WordPress not providing a url for each category
foreach ( $data['categories'] as $category ) {
$category->link = get_category_link( $category->term_id );
}
return $data;
?>
layout.jade
Extender plantillas a otras es un gran beneficio para Jade. Esto nos permite crear un caparazón que se puede usar como el bloque de construcción principal para el diseño de nuestro sitio y luego modificarlo a medida que se extiende.
Esto podría ser casi cualquier cosa, pero podría verse así:
doctype
html(lang='en')
head
meta(charset="UTF-8")
title= wp_title('')
link(rel="stylesheet" type="text/css" href= bloginfo('stylesheet_url') media="screen")
- wp_head();
body
header
a(href= esc_url( home_url( "https://css-tricks.com/" ) ))= get_bloginfo()
- get_template_part('nav')
block content
:php
get_sidebar();
wp_footer();
functions.php
La mayoría de los temas de WordPress utilizan un functions.php
Archivo. En este contexto, le estamos agregando una función para compensar la falta de un get_wp_head()
método:
<?php
function output_buffer_contents($function, $args = array()){
ob_start();
$function($args);
$contents = ob_get_contents();
ob_end_clean();
return $contents;
}
?>
index.php
Esta es la plantilla principal o página de inicio en la mayoría de los directorios de temas de WordPress. Aquí hay un ejemplo práctico de index.php
que incluye el compilador de Jade y los datos de la página:
$compiler = include('compiler.php');
$data = include('page-data.php');
$data['posts'] = array();
if ( have_posts() ) :
while ( have_posts() ) : the_post();
array_push($data['posts'], array(
'permalink' => get_permalink(),
'title' => get_the_title(),
'excerpt' => get_the_excerpt()
));
endwhile;
$data['next_posts_link'] = get_next_posts_link('Older');
$data['previous_posts_link'] = get_previous_posts_link('Newer');
endif;
echo $compiler->render('index', $data);
Aquí, se usa el ciclo familiar de WordPress pero, en lugar de representar el marcado dentro del ciclo, agregamos propiedades a un posts
matriz en la página $data
donde queremos que Jade compile y complete el contenido.
El bucle de WordPress en Jade
Aquí está el ciclo de WordPress, en Jade:
each post in posts
article
h1
a(href= post['permalink'])= post['title']
!= post['excerpt']
Tema de inicio de jade
Descarga un tema de inicio de Jade para WordPress.
Bigote
Te bigote una pregunta: ¿quieres menos lógica en tus plantillas? Moustache ofrece un enfoque sin lógica para las plantillas, lo que te obliga a mantener la lógica separada de las plantillas, lo que las ordena de manera efectiva. Bonza!
La puesta en marcha
La configuración es muy similar a cómo renderizamos las plantillas de Jade. ya que el compilador se puede instalar usando Composer.
En primer lugar, creemos el composer.json
archivo en nuestro directorio de temas:
{
"require": {
"mustache/mustache": "~2.5"
}
}
Ejecute la instalación de Composer y, así, podemos agregar lo siguiente a nuestras plantillas de página de WordPress para garantizar que el compilador se ejecute:
echo $mustache->render('index', $data);
Ahora que estamos armados con Bigote, necesitamos agregar un mustache-compiler.php
archivo a nuestra carpeta de temas para requerir que el compilador cargue en nuestras plantillas, y para hacerlo sin necesidad de especificar una ruta explícita al views
carpeta donde residirá nuestro archivo de fuentes:
<?php
require_once('vendor/autoload.php');
return new Mustache_Engine(array(
'loader' => new Mustache_Loader_FilesystemLoader(get_template_directory() . '/views')
));
?>
El bucle de WordPress en bigote
{{#posts}}
<h1><a href="https://css-tricks.com/templating-languages-and-wordpress/{{permalink}}">{{{title}}}</a></h1>
{{{excerpt}}}
{{/posts}}
Tema de inicio de bigote
Descarga un tema de inicio de Moustache para WordPress.
Madera
Entonces, te gustan las ideas compartidas en esta publicación hasta ahora, pero es posible que no quieras pasar por toda la configuración. Aquí es donde entra Timber.
Timber está disponible como un complemento gratuito de WordPress, por lo que es quizás el más fácil de instalar de los motores de plantillas que hemos cubierto aquí. De hecho, Timber en sí no es el motor de creación de plantillas, sino que confía en Twig para eso mientras actúa como la configuración necesaria para escribir archivos Twig. Además, cuenta con una biblioteca que integra enlaces de WordPress en Twig, lo que lo hace tan poderoso como escribir PHP nativo en WordPress.
Ah, sí, y tenemos un artículo que cubre los entresijos para comenzar con Timber.
La puesta en marcha
Descargue e instale el complemento directamente desde el repositorio de complementos de WordPress.
A continuación, necesitaremos asegurarnos de que nuestro directorio de temas incluye los siguientes archivos:
layout.twig
index.twig
functions.php
index.php
layout.twig
Este será el fragmento principal de marcado para nuestro sitio que incluye el documento <head>
y el diseño básico del sitio. En otras palabras, podemos extenderlo a todos nuestros archivos de plantilla Twig y cambiar ciertos bloques plantilla por plantilla.
Aquí hay un ejemplo básico usando un diseño de sitio bastante común:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>{{wp_title}}</title>
<link rel="stylesheet" type="text/css" href="https://css-tricks.com/templating-languages-and-wordpress/{{theme.link}}/style.css" media="screen">
{{wp_head}}
</head>
<body>
<header>
{{site.name}}
</header>
{% block content %}
{% endblock %}
{{wp_footer}}
</body>
</html>
Cualquier cosa envuelta en tirantes dobles {{ }}
son variables que Timber completará con la salida compilada de Twig. Y, cuando extendamos esta plantilla a otras plantillas, podremos modificar cada variable directamente en la plantilla donde se extiende.
functions.php
Este es el mismo archivo estándar que viene empaquetado con la mayoría de los temas de WordPress. Lo que estamos agregando son instrucciones sobre cómo se configura Timber, así como definiciones para cualquier variable que llamemos en nuestras plantillas.
<?php
add_filter('timber_context', 'add_to_context');
function add_to_context($data){
$data['menu'] = new TimberMenu();
$data['categories'] = Timber::get_terms('category', 'show_count=0&title_li=&hide_empty=0&exclude=1');
return $data;
}
?>
index.php
Esta es a menudo la plantilla de página principal o de inicio de un tema de WordPress. Necesitamos llamar a las variables que definimos en functions.php
para que la plantilla sepa qué renderizar cuando Timber compila los archivos Twig en PHP. En este caso:
<?php
$context = Timber::get_context();
$context['pagination'] = Timber::get_pagination();
Timber::render('index.twig', $context);
?>
El bucle de WordPress en madera
{% for post in posts %}
<article>
<h1>{{post.title}}</h1>
{{post.get_preview}}
</article>
{% endfor %}
Tema de inicio de madera
Descarga un tema de inicio de Timber + Twig para WordPress.
Madera + Jade (… ¿Twade?)
Si bien Timber incluye un motor de plantillas listo para usar, podemos configurarlo para usar algo más además de Twig. Puede parecer una tontería usar dos motores de plantillas juntos pero, si te gustan las características que ofrece Twig y prefieres escribir código en Jade … bueno, ¡podemos hacerlo!
La puesta en marcha
Usaremos la configuración estándar de Timber pero compilaremos Jade localmente en Twig. La gente compila Jade en otras sintaxis con AngularJS todo el tiempo, así que ¿por qué no hacerlo también con Timber?
Así es como se estructurará nuestra carpeta de temas:
├── source
├── views
├── header.twade
├── index.twade
├── footer.twade
├── index.php
├── functions.php
├── style.styl
├── compiled
├── views
├── header.twig
├── index.twig
├── footer.twig
├── index.php
├── functions.php
├── style.css
├── Gruntfile.coffee
└── package.json
Una vez más, WordPress intentará cargar el source
carpeta como su propio tema a menos que lo excluyamos durante la implementación.
Mira eso gracioso .twade
¿extensión? Esos son solo archivos de Jade que se compilan (localmente con Grunt) en .twig
archivos que, lo has adivinado, son leídos por .php
archivos y compilados en PHP del lado del servidor.
El bucle de WordPress en Timber + Jade
{% for post in posts %}
h1
a(href="https://css-tricks.com/templating-languages-and-wordpress/{{post.permalink}}") {{post.title}}
{{post.get_preview}}
{% endfor %}
Tema de inicio de Timber + Jade
Descarga un tema de inicio Timber + Jade para WordPress.
Grita por Timber + Jade, menos la ramita
Alternativamente a lo anterior, podemos omitir Twig por completo para unir las características de plantillas de Jade con la simplicidad de la configuración de Timber y la biblioteca rica en características. Esta es exactamente la misma configuración que Timber, pero interceptando Timber::render
con esto en nuestro index.php
en lugar de:
<?php
$compiler = include 'compiler.php';
$context = Timber::get_context();
$context['pagination'] = Timber::get_pagination();
echo $compiler->render(get_template_directory() . '/views/index.jade', $context);
?>
Eso nos da la posibilidad de escribir el bucle de WordPress como:
each post in posts
h1
a(href= post->permalink)!= post->title
!=post->get_preview
Aquí hay un tema de inicio para un puñetazo uno-dos puro de Timber + Jade.
Terminando
Los motores de creación de plantillas son fantásticos y funcionan muy bien con WordPress. Es puramente una cuestión de preferencia en cuanto a cuál funciona mejor para su conjunto de habilidades y el sitio web que está construyendo.
Los sitios que requieren muchas vistas complejas pueden beneficiarse de un motor que ofrece más lógica en las plantillas como Timber o Jade. Los desarrolladores de PHP experimentados pueden preferir Moustache por su capacidad para mantener toda la lógica en el servidor.
He configurado temas de inicio para todas las opciones escritas en esta publicación. Siéntase libre de usarlos para poner en marcha sus propios proyectos, o simplemente para experimentar:
- Jade-PHP
- Jade
- Bigote
- Madera
- Madera + Jade
- Madera + Jade (sin Ramita)
¡Feliz tematización!