Desarrollo de temas WordPress con Underscores

Cuando hablamos de desarrollo de proyectos web con WordPress en muchas ocasiones nos referimos a la creación de temas personalizados desde cero.

En anteriores ediciones he tenido la ocasión de hablar de algunos starter themes para WordPress que nos permiten disponer de una estructura o framework para poder trabajar de una forma ágil en un nuevo tema.

En esta ocasión continúo en esa línea, pero centrándome en Underscores, un tema pensado para desarrolladores que respeta la forma de funcionar de WordPress del mejor modo y que debería ser nuestra referencia a la hora de trabajar en nuestros diseños web.

¿Qué es Underscores?

Underscores ( _s) es un starter theme o tema creado para trabajar desde cero en nuestros proyectos WordPress. Está creado por el equipo de desarrolladores de Automattic, su código es libre, y está sujeto a modificaciones a través del repositorio público de Github.

Con Underscores podemos disponer de un tema base sobre el cual trabajar añadiendo nuestros propios estilos CSS y completando las funciones y plantillas específicas del propio tema. No hablamos en este caso de un tema sobre el cual crear otro tema hijo, sino de un tema que en sí mismo no recibirá actualizaciones al ser creado y desarrollado desde cero por nosotros.

Se caracteriza por respetar el modo de codificación recomendado por la documentación de WordPress a la hora de jerarquizar archivos, disponer de una hoja de estilos simple y bien estructurada sobre la cual poder trabajar y estar ampliamente mantenido por la comunidad con constantes mejoras y actualizaciones.

Desde el propio sitio web de Underscores es posible descargar una copia personalizada que directamente podemos utilizar y sobre la que podremos trabajar en nuestros desarrollos.

Ventajas de utilizar Underscores

¿Por qué te recomiendo conocer y utilizar Underscores en tus temas WordPress creados desde cero? Además de las razones indicadas anteriormente, me gustaría enumerar unas cuantas razones que harán que desees comenzar a probarlo:

• Te permitirá conocer, de una manera sencilla, el funcionamiento de la jerarquía de archivos de un tema WordPress.
• Ofrece un código limpio, semántico y bien comentado.
• Incluye solamente los elementos necesarios para que el sitio web funcione de una manera optimizada y accesible.
• Dispondrás de una hoja de estilos simple y estructurada incluyendo simplemente elementos de reajuste y normalización.
• Incluye soporte para menús en dispositivos móviles.
• Está especialmente pensado para desarrolladores, siendo la base de los nuevos temas oficiales de WordPress, los famosos twenties.
• Está preparado para sitios web multiidioma y ser compatible con los plugins más populares como Jetpack o WooCommerce.
• Podrás trabajar sin problemas en la edición de contenidos con el nuevo editor de bloques Gutenberg.
• Tiene el tiempo suficiente de desarrollo y uso dentro de la comunidad como para ser considerado el principal estándar a la hora de crear temas personalizados.
• La licencia es GPL para que puedas reutilizarlo del modo en que creas conveniente.

Entendiendo los archivos de Underscores

Para poder comenzar a trabajar correctamente con Underscores siempre viene bien una primera aproximación a los archivos que nos vamos a encontrar una vez descargamos el tema. Haremos un breve repaso para sentar unas primeras bases.

Elementos estructurales

header.php

Añade los elementos estructurales y de declaración del documento HTML finalizando el archivo con el inicio de la clase “site-content” para abrir el contenido. Incluye elementos de branding y el menú de navegación.

https://github.com/Automattic/_s/blob/master/header.php

footer.php

Es un pié de página sencillo que incluye simplemente los créditos de WordPress y el cierre del cuerpo del documento. Podremos ampliar su uso añadiendo zonas de widgets para crear bloques de contenido.

https://github.com/Automattic/_s/blob/master/footer.php

sidebar.php

Incluye la llamada a una barra lateral por defecto en el caso de que exista y la opción de mostrar elementos en caso contrario.

https://github.com/Automattic/_s/blob/master/sidebar.php

Elementos de contenido

single.php

Añade el loop de WordPress mostrando el contenido del post en el que se encuentra con el marcado de clases correspondiente.

Deberemos tener en cuenta que para el propio contenido se hace referencia al archivo /template-partes/content.php

https://github.com/Automattic/_s/blob/master/header.php

https://github.com/Automattic/_s/blob/master/template-parts/content.php

page.php

Del mismo modo que el archivo single.php trabaja mostrando las entradas, page.php hace lo propio con las páginas. También hace una llamada a /template-parts/content-page.php para el contenido en sí mismo.

https://github.com/Automattic/_s/blob/master/page.php

https://github.com/Automattic/_s/blob/master/template-parts/content-page.php

archive.php

Podemos personalizar la apariencia de la página de listado de archivos de categorías, taxonomías y etiquetas.

https://github.com/Automattic/_s/blob/master/archive.php

search.php

Los resultados de búsqueda de WordPress se imprimen utilizando este tipo de listado de contenido.

https://github.com/Automattic/_s/blob/master/search.php

404.php

Underscores incluye también una página de error 404 que podemos personalizar como creamos conveniente, algo no del todo habitual en muchos themes y que puede darnos bastante juego.

https://github.com/Automattic/_s/blob/master/404.php

Plantilla por defecto

index.php

Si alguno de los tipos de contenidos y archivos comentados anteriormente no dispone de una plantilla asignada, entra en juego el fichero índice que permite que se muestre la información igualmente a través del loop de WordPress.

https://github.com/Automattic/_s/blob/master/index.php

Comentarios

comments.php

Una de las partes más complicadas para la maquetación suele ser la sección de comentarios que en este caso viene incorporada con una declaración de estilos sencilla y las funciones más habituales como navegación por comentarios y comentarios anidados.

https://github.com/Automattic/_s/blob/master/comments.php

Archivo de funciones

functions.php

El archivo reservado a añadir funcionalidades en WordPress también tiene su lugar en Underscores. En este caso tenemos elementos como el encolado de estilos y scripts, la declaración de las zonas de widgets o la llamada a otros archivos de funciones de compatibilidad con Jetpack o WooCommerce

https://github.com/Automattic/_s/blob/master/functions.php

Hoja de estilos

style.css

El archivo style.css ofrece un primer nivel de normalización para los estilos para después incluir los elementos básicos de tipografía, elementos, navegación o contenidos.

Dispondremos solamente de elementos básicos que tendremos que trabajar a posterori, pero que nos permitirán incluir solamente aquello que sea estrictamente necesario para el proyecto.

https://github.com/Automattic/_s/blob/master/style.css

Directorios de organización

Además de los archivos esenciales para que el contenido pueda mostrarse y dotar de funcionalidades a nuestro tema WordPress, encontramos directorios de organización que a través de estándares nos permiten organizar la información adicional que vayamos creando siguiendo el esquema propuesto a continuación.

/inc

Se incluyen archivos PHP que no son esenciales para el funcionamiento pero que nos permiten organizar modularmente la información que ofrecemos en el front.

/js

Está pensado para añadir los archivos JavaScript con los que vayamos a trabajar incluyendo por defecto los siguientes: customizer.js, navigation.js y skip-link-focus-fix.js.

/languages

El directorio que debemos utilizar para trabajar en la localización de nuestro tema añadiendo aquí los archivos de traducción.

/layouts

Permite añadir estilos concretos para disposiciones de estructuras diferentes a la básica añadiendo por defecto dos de las más utilizadas como son content-sidebar.css y sidebar-content.css.

Conclusiones

Si estamos pensando dedicarnos al desarrollo de temas para WordPress, encontraremos en Undescores un aliado perfecto para poder conocer todos los elementos necesarios para poner en marcha un nuevo theme limpio, ordenado y optimizado. Incluso podemos avanzar en la creación de nuestro propio entorno de trabajo utilizando alternativas avanzadas como Understrap o algunas otras que podemos encontrar en Github tales como bulmapress o wd_s.

Como la mejor forma de aprender es la práctica, mi recomendación personal es que descargues e instales ya mismo tu propia copia de Underscores y te pongas manos a la obra añadiendo tus propias modificaciones en la hoja de estilos y nuevas funciones para comprobar los excelentes resultados que puedes conseguir.