Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Pequeña guía de desarrollo rápido y optimizado de un theme de WordPress usando un starter theme, npm, gulp y sass

Imago voragine.net
[actualizado el ]

La mayor parte de los sitios web que funcionan con WordPress pueden hacerlo eligiendo un theme del repositorio oficial o de cualquier otro y personalizándolo con las opciones disponibles en el panel de control. Incluso si se necesita desarrollar un theme hoy día es buena idea no empezar de cero, sino usando una estructura básica, genérica ya desarrollada. Por otro lado es recomendable usar ciertas herramientas que produzcan un theme optimizado, que cargue lo más rápido posible, que se adapte a todo tipo de dispositivos. Esto pasa, además de por estructurar bien la información para minimizar las consultas a base de datos, por producir archivos CSS, JS minimizados e imágenes comprimidas y optimizadas que agilicen la carga. Un buen starter theme para WordPress facilita ambas cosas: una estructura genérica sobre la que empezar a construir rápidamente, y un entorno de desarrollo que permita automatizar las tareas de optimización e ir probando los avances ágilmente.

En este post comparto mi manera de trabajar: qué starter theme utilizo últimamente y cuál es el flujo de trabajo con él.

Understrap Starter theme

Undestrap es el starter theme que mejor se adapta a mi manera de desarrollar, que tiene todo lo que necesito:

  • npm para instalar y gestionar librerías y otras dependencias.
  • Gulp para automatizar rutinas: compilación de archivos de estilo y javascript, optimización de imágenes, carga de librerías y otras dependencias en la estructura del theme…
  • Brwsersync para ir probando el desarrollo en tiempo real en el navegador.
  • Bootstrap 4 como framework de maquetación.
  • understrap-child como child theme para no tocar el theme understrap y poder actualizarlo en cualquier momento.

Tiene una comunidad bastante activa: el repositorio del theme tiene 73 usuarios que mantiene el proyecto muy actualizado. Por ejemplo, cuando escribo esto theme funciona con la última versión 4.3.1 de bootstrap que salío hace menos de un mes. La comunidad ha desarrollado varios child themes. Algunos están disponibles libremente en la cuenta de github del proyecto, otros son de pago. La documentación del theme no es una maravilla, pero algo hay.

Instalar Understrap y todo lo necesario

node.js y npm

Para empezar a desarrollar con Understrap hace falta instalar primero el gestor de paquetes npm, que nos permitirá después instalar el resto de paquetes y librerías que usa Understrap; y node.js que permite levantar un servidor web en local para el desarrollo.

Como acostumbro en este blog cuento cómo instalar ambas dependencias en un entorno Debian 10 Buster. Versiones suficientemente actualizadas de npm y nodejs, aunque no las últimas, se puede instalar desde los repositorios oficiales de Debian:

Para instalar la última versión de node.js, que no es necesario para trabajar con Understrap, se pueden seguir las instrucción de Nodesource. Para instalar la última versión de npm se puede consultar su repositorio en github.

Cómo actualizar con npm las librerías que usa el theme

npm es muy útil para mantener actualizadas las librerías que usa el starter theme. Por ejemplo, si el framework Bootstrap libera una nueva versión, se puede incorporar a nuestros proyecto usando npm. Primero hay que moverse a la carpeta que contenga el theme. Con npm outdated se puede ver los paquetes que no están actualizados:

Para actualizar los paquetes:

Cuando se ejecuta npm para actualizar, una vez que se han descargado las últimas versiones, se ejecuta gulp copy-assets para copiar las nuevas versiones a las ubicaciones adecuadas del theme, tal como se definen en gulpconfig.json, como se explica en el apartado sobre Gulp de este tutorial.

Si se quieren actualizar paquetes sin tener en cuenta el archivo package.json se puede hacer con ncu. Para ello hay que instalarlo primero:

En este caso, al instalar ncu, npm nos indica además que hay una actualización para el propio npm. Se puede actualizar también como nos indica:

Para comprobar las actualizaciones pendientes:

El mismo ncu nos dice cómo proceder:

Una vez actualizado el archivo package.json se puede ejecutar npm install para actualizar:

Si se vuelve a comprobar las actualizaciones, se verá que todo está actualizado:

All dependencies match the latest package versions :)

Si al actualizar hubiese algún error, aconsejo editar el archivo package.json con las versiones a las que se quiera volver y luego ejecutar npm install.

También se puede volver a una versión anterior de alguno de los paquetes. Por ejemplo, si se quiere hacer un downgrade de gulp a la versión 3.9.1:

Y de manera local, solo para el proyecto:

Understrap y el entorno de desarrollo

Una vez instalados npm y node.js se puede clonar Understrap desde el repo. Si como en mi caso se va a desarrollar usando el child theme de Understrap, hay que clonarlo también. Y luego usar npm para instalar gulp y browsersync y el resto de dependencias, y copiar las librerías necesarias desde node_modules a src:

Dejo aquí una lista de los archivos que incluyen tanto understrap como understrap-child que conforman el entorno de desarrollo:

  • css/. Contiene los archivos CSS del theme, compilados a partir de los archivos Sass ubicados en sass/.
  • gulpconfig.json. Contiene las variables de configuración de Gulp: las ubicaciones en las que debe mirar para compilar, dónde colocar los archivos compilados, qué URL debe vigilar browsersync para crear el navegador de testeo…
  • gulpfile.js. Contiene la definición de las rutinas a automatizar con gulp.
  • node_modules/. Contiene los paquetes instalados con npm.
  • package.json. Contiene las dependencias de Understrap a instalar al ejecutar npm install, que se instalarán en node_modules.
  • package-lock.json. Contiene un registro de los paquetes instalados con npm.
  • sass/. Contiene los archivos Sass con las reglas para construir los CSS del theme.
  • src/. En las carpetas js/ y sass/ contiene los archivos fuente de las librerías que usa el theme que gulp copia desde node_modules/. En la carpeta images/ se alojarán las imágenes del theme que queramos que gulp comprima.

Gulp

Antes de comenzar a desarrollar es conveniente echar un vistazo a la configuración de gulp para personalizarlo según nuestra manera de trabajar. Las variables de configuración de gulp están en gulpconfig.json:

La opción proxy permite configurar la URL de la instalación de WordPress en localhost que se quiere asociar al servidor de desarrollo. Los tipos de archivo listados en browserSyncWatchFiles son los que serán vigilados por Browsersync y que cuando se modifiquen harán que el navegador se recargue automáticamente para poder ver los cambios. En paths se pueden definir todas las ubicaciones que usa gulp para buscar los archivos CSS, JS y de imagen que compilará, minimizará y optimizará. Estas ubicaciones están vigiladas por gulp que tratará automáticamente todos los archivos que se guarden en ellas.

Los distintos comandos de gulp están definidos en gulpfile.js. Este archivo está bien documentado: cada comando está precedido de una explicación. Por ejemplo:

gulp imagemin comprime las imágenes alojadas en src/images y guardarlas en images/.

Para lanzar el navegador de desarrollo se puede ejecutar gulp watch-bs:

Los comandos definidos en gulpfile.js se pueden modificar fácilmente. Por ejemplo, el comando gulp copy-assets copia las librerías usadas por el theme de node_modules/ a src/:

Si se quiere añadir por ejemplo la librería Isotope a los archivos del theme, se puede añadir las siguientes líneas al comando gulp copy-assets:

Previamente, si el paquete no está instalado, se tiene que instalar usando npm.

Bootstrap

Understrap viene preparado para usar Bootstrap: los archivos PHP del theme incluyen las clases de bootstrap y los archivos Sass de bootstrap vienen incluidos también. Las variables de bootstrap se pueden sobreescribir en el archivo sass/theme/_child_theme_variables.scss. Para un listado completo de variables se puede consultar el archivo src/sass/bootstrap4/_variables.scss.

Otros starter themes

Por si alguien quiere probar algún otro Starter theme para WordPress aquí dejo una lista de los que he probado en algún momento:

HTML5 Blank
Realmente un starter theme. Lo más básico que he encontrado. No incluye entorno de desarrollo. Enlace al repositorio del proyecto.
_s

Es el starter theme de Automattic, la empresa detrás del desarrollo del WordPress, lo que da ciertas garantías de continuidad del proyecto. Su web permite generar un theme mínimamente personalizado basado en Underscore, lo cual agiliza el desarrollo al principio. Enlace al repositorio del proyecto.

Bootstrap Starter Theme for WordPress
Starter theme basado en el framework Bootstrap. Permite generar un theme con las variables de bootstrap personalizadas desde su web.Enlace al repositorio del proyecto.
WordPress Starter Theme
Tiene todo lo necesario, aunque algo desactualizado (último cambio hace 4 años), lo que hace necesario actualizar todos los módulos antes de empezar a desarrollar. Enlace al repositorio del proyecto.

Dejar un comentario

No hay comentarios en esta entrada.
*
*

 

No hay trackbacks