Primer fracaso en mi primer tema desde cero

Problemas con el entorno de trabajo Sass

Tal vez sea mala suerte, o que es muy difícil para los autodidactas.

El caso es que después de beber de muchas fuentes solventes, me he propuesto crear mi primer tema desde cero utilizando para ello el mejor esqueleto posible, el desarrollado por los mayores expertos en WordPress,  UnderScores. Aunque tengo que decir que para personas que no tengan una sólida formación en programación lo mejor es que utilicen la versión sencilla del tema.

Puede ser que por exceso de confianza o por algún problema de incompatibilidad que tenga con el software instalado en mi pc, pero el caso es que no he podido configurar el entorno de trabajo  correctamente.

Ya puestos, me dije, voy a instalar el tema UnderScores que está preparado para ser desarrollado con Sass.

Así,  no solo lo tendré siempre optimizado, sino que cualquiera que lo utilice podrá estar seguro que:

  • mantiene la estructura correcta,
  • cumple con los estándares más exigentes
  • siempre va a tener el código minificado y las imágenes con la mejor compresión
  • será un tema ligero que trabajará detrás del desarrollador, sin que este tenga que hacer nada porque todo estará automatizado para que se mantenga optimizado.

Me puse a la tarea y después de mucho leer y ver muchos vídeos ya tengo claro lo que tengo que hacer y cómo (o eso creo).

Primero el entorno normal de WordPress

Antes de comenzar con el desarrollo del tema, hay que instalarlo (ver entrada anterior).

Personalmente le dejo solo el tema twenty seventeen para tener un tema al que volver si “parto” el tema sobre el que estoy trabajando.

Luego instalo el plugin Show Current Template para saber que plantilla está utilizando WordPress para “pintar” la página.

Como complemento el plugin de Automattic developer, para saber que pasa y donde si falla algo.

Por último, tengo que llenar mi WordPress de datos, así que me bajo los datos de test del plugin Theme-unit-test-master.

Hecho esto, voy a UnderScores.me y genero mi tema con compatibilidades Sass marcando la casilla  _sassify!

Descomprimo el tema y lo activo. Se ve bastante feo pero tiene post, comentarios, imágenes y páginas para hacer todo tipo de pruebas.

Segundo instalar el entorno para que se hagan las tareas automáticas.

Primero instalo Nodejs


“Node.js es una forma de ejecutar JavaScript en el servidor, además de mucho más. Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome.”

Node.js a su vez me instala Npm.


“Node Package Manager o simplemente npm es un gestor de paquetes, el cual hará más fáciles nuestras vidas al momento de trabajar con Node, ya que gracias a él podremos tener cualquier librería disponible con solo una línea de código, npm nos ayudará a administrar nuestros módulos, distribuir paquetes …..”

Abro una instancia de administrador de Windows y trato de instalar Gulp.


“Gulp es una herramienta, en forma de script en NodeJS, que te ayuda a automatizar tareas comunes en el desarrollo de una aplicación, como pueden ser: mover archivos de una carpeta a otra, eliminarlos, minificar código, sincronizar el navegador cuando modificas tu código, validar sintaxis y un largo etcétera.”

Aparentemente es fácil, solo hay que teclear :

npm install gulp-cli -g
npm install gulp -D
touch gulpfile.js
gulp --help

Se empieza a bajar un montón de paquetes y finalmente me dice que está instalado, pero con 6 problemas que no son graves

Ahora que está el entorno, instalar Sass

Continuo con la tarea y antes de instalar Sass tengo que instalar Ruby. Me bajo el instalador y lo instalo.


“Ruby es un lenguaje de programación. Ante todo, se usa para crear webs. Es un lenguaje de alto nivel, es decir, su expresión está adaptada a la capacidad cognitiva humana, en lugar de la capacidad ejecutora de las máquinas.”

Ahora solo me queda instalar, por fin, Sass. Es muy fácil sólo hay que teclear npm install -g sass . 


“Sass es un lenguaje de hoja de estilos inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum.​​Después de sus versiones iniciales, Nathan Weizenbaum y Chris Eppstein han continuado extendiendo Sass con SassScript, un lenguaje de script simple, usado en los ficheros Sass. Wikipedia”

Compruebo que todo está correcto preguntándole a cada uno, por su versión y está todo OK. (con la instrucción node -v, npm -v, ruby -v, sass-v).

Todo está correcto pero me sigue rayando los 6 Warning que me mostró cuando instalé Gulp.

En teoría ya está todo instalado. Ahora la automatización de tareas

Después de mucho investigar, creo el archivo gulpfile.js con todas las tareas que tendrá que hacer y el package.json con todas las dependencias y librerías que tiene que instalar.

Ejecuto el comando npm install y empieza a listarme errores el gulpfile, pero el package.json crea su carpeta y se baja un montón de librerías y dependencias.

El caso es que no funciona, no supervisa las tareas ni hace nada de lo que tiene que hacer.

Después de tres días instalando y desinstalando, he decido dejarlo para más adelante y “conformarme” por el momento por el tema de UnderScores sin soporte Sass.

Es una pena pero ya volveré y lo conseguiré hacer más adelante🖖  Ya sabéis, cualquier comentario será bienvenido🖖 

CONSULTA NUESTROS ÚLTIMOS POSTS. ESPERAMOS TUS COMENTARIOS


¡Suscríbete a nuestra newsletter!

suscríbete