Blog

WordPress como debe ser: Capítulo 2, Setup de Ambiente

Por algún tiempo estuve trabajando y promocionando, mi framework. Esto ha cambiado un poco en estos últimos meses, el proyecto requiere mucho trabajo, y al cambiar las tecnologías y las formas como se trabaja un sitio web, he decidido dejarlo un tiempo, para poder reconstruirlo para no solo facilitar la forma en como se administra el sitio desde WordPress, sino que también hacer más fácil la depuración del proyecto, detallaré el proyecto pronto.

¡Ahora, a lo que venimos!

Me enfocaré en Windows, la idea es la misma para otros sistemas operativos.

Lo primero para crear un tema hacer el  directorio dentro de wp-content/themes/mi-tema, hacemos nuestro folder vacío, y no utilizaremos ningún framework existente.

Sino que utilizaremos un plugin de Grunt.

Instalar Node JS

Para instalar node, es muy sencillo. (Solo vayan al sitio) Esto es por que Grunt corre sobre Nodejs.

Como recomendación, verifiquemos si node está de forma global, verificamos si npm está en los PATH del sistema. Click derecho en Mi PC > Configuración avanzada > Variables de ambiente > PATH, allí si instalamos Node con la ruta predefinida, encontraremos C:\Users\{{ Mi usuario }}\AppData\Roaming\npm.

2014-05-10_2304

¿Qué es Grunt?

Grunt es un manejador de tareas, como ahora existen manejadores de paquetes, este automatiza tareas, como minificar archivos, conversión de Less, Sass a CSS, concatenado, etc, etc.

Lo primero es instalar grunt, y este debe estar habilitado de forma global,  si somos Windows, abrimos nuestra ventana de comandos como administrador y escribimos:

npm install -g grunt-init

Luego que ya instalamos el complemento de scaffold de Grunt, lo siguiente es hacer disponible el proyecto. Instalaremos el complemento de Grunt: 10Up, que es un tema vacío con la estructura (scaffold) y las configuraciones necesarias.

git clone https://github.com/10up/grunt-wp-theme ~/.grunt-init/grunt-wp-theme

Ahora ya tenemos el complemento, Nodejs, y Grunt.

Recordando que estamos en la carpeta donde estará el tema (wp-content/themes/mi-tema) tecleamos:

grunt-init grunt-wp-theme

2014-05-10_2325

Esto nos colocará los archivos necesarios para empezar a programar nuestro tema. Encontraremos un archivo llamado Gruntfile.js y otro package.js

2014-05-10_2325_001

packaje.js

Este archivo contiene las directivas necesarias para que Grunt pueda correr (las tareas que programamos). Para instalarlo simplemente tecleamos:

npm install

2014-05-10_2333

Esto instalará los módulos de Grunt que servirán para hacer las tareas que están especificadas en Gruntfile.js

Gruntfile.js

  • concat – concatena nuestros archivos
  • jshint – valida que nuestro Javascript está correctamente estructurado
  • less – en este caso utilizaremos Less CSS para nuestros estilos, este módulo convierte nuestro archivos LESS en CSS
  • uglify – comprimirá nuestros archivos Js para que pesen menos
  • cssmin – minificará nuestros archivos CSS
  • watch – de vital importancia, ya que este es un proceso que estará al tanto que se cambie un archivo para que se haga una rutina y podamos ver los resultados de forma inmediata

Por último, muy recomendable pero no necesario; crearemos un repositorio para nuestro tema, yo lo haré Bitbucket.

git init

En nuestro siguiente capítulo, empezaremos con las funciones básicas y la construcción de nuestro tema.