Recursos para Desarrollar un Tema de WordPress

Hay mucho que aprender sobre el desarrollo de temas de WordPress. Internet es un lugar donde se alojan bastante artículos sobre la creación de temas, puede que encuentres algunos temas hermosos y profesionales y otros que son un poco pobre en verdad.

En lugar de escribir sobre como desarrollar un tema de WordPress creo sería mejor compartir aquellos recursos que necesitamos a mano para mejorar nuestro flujo de trabajo, así que porque no compartir algunos consejos y técnicas para ayudarles a mejorar y perfeccionar el proceso de diseño y desarrollo de un tema.

Y estaría perfecto comenzar por:

Desarrollar Local

Hay bastantes requisitos para ejecutar un sitio con WordPress localmente como son: un servidor web como Apache, un lenguaje de programación como PHP y una base de datos como MySQL, creo que esa es una de las causas de porque algunas personas siguen trabajando con su sitio en internet en lugar de hacerlo local y es que quizás eso se deba a que no se tienen lo conocimientos necesarios para manejar esas herramientas. Pero eso debe cambiar, así que si no estás desarrollando de forma local, entonces es el momento de que empieces a hacerlo. Estas son algunas de las cosas que puedes aprender de Chris Coyier:

Configurar MAMP

¿Abandodar FTP?

El desarrollo local tiene muchos beneficios. Serás capaz de hacer lo siguiente:

  • Es más rápido para hacer todo tipo de pruebas.
  • Es más fácil deshacer errores.
  • Se es más eficiente usando un editor de texto cuando buscas un archivo en particular.
  • Trabajas sin la preocupación de cargarte el sitio web por completo.

Herramientas Alternativas para un Servidor Local:

Usar Live Reload

En un articulo que escribrí explico la importancia que tiene refrescar los cambios en el navegador de forma automática y como hacerlo usando herramientas como Live Reload.

Usar Git

Y es que usar un cliente FTP para actualizar tu sitio, ya eso es cosa del pasado. Git es un sistema de control de versiones distribuido que es popular entre los desarrolladores de todo el mundo. Lo bueno sobre Git es que puedes crear rápidamente una rama (branch), realizar cambios dentro de esa rama y luego probar esos cambios sin afectar la versión principal del código fuente. Si no eres un amante a la consola aquí hay algunas alternativas visuales para usar Git:

Usar las Herramientas del Navegador

Muchos de los navegadores de hoy en día tienen herramientas integradas para mejorar, afinar y depurar un diseño o desarrollo de un tema. Y la verdad es que editar un código CSS en un tema complejo puede ser molesto, especialmente si no sabes la estructura del código.

Cada navegador popular moderno, si incluyendo Internet Explorer :P, poseen “Herramientas de Desarrollo”, las cuales te ayudarán a encontrar rápidamente un código CSS de un elemento determinado o un código Javascript el cual quieres analizar.

Todos los cambios de CSS, HTML y JS que haces son automáticamente visible en el sitio. Ahora bien, ninguno de estos cambios se guardan en el archivo, si fuese así podrías hackear fácilmente a amazon ¿o no?. Una vez que refresques la página esos cambios se perderán. Es muy útil solo si necesitas probar rápidamente algunos cambios en CSS o encontrar un elemento determinado en el código, herramientas alternativas que puedes usar son:

Usar un Preprocesador

Un preprocesador compila el código que has escrito en el lenguaje por defecto. Esto optimiza el flujo de trabajo y puedes ahorrarte muchas horas de desarrollo. También extendiende las funcionalidades de CSS, como el uso de variables, reglas anidadas, funciones, importar librerías, etc.

Para ilustrar un ejemplo de lo que digo, suponiendo que usamos SASS como preprocesador para CSS:

// variables
$color: blue;
$backg: yellow;

body {
  color: $color;
  background: $backg;
}

Declaramos dos vaiales, que luego se la pasamos como valores a las propiedades del body. Por lo que se compilará a la forma estándar de CSS:

body {
  color: blue;
  background: yellow;
}

Aquí listo algunos enlaces que te ayudarán a conocer más a fondo los preprocesadores para CSS.

Utilizar un Tema Base

Iniciar con un tema base es importante porque te brinda todo lo que necesitas para comenzar con el desarrollo de un tema, mejora tu flujo de trabajo y te ahorra tiempo. Normalmente un tema base viene con stilos basicos ya definos, como los CSS Resets, templates de páginas, etc. En mi cuenta de Github he creado un repositorio con mi propio tema base el cual utilizo llamado WP-Theme-Scratch, ya que cada vez que inicio un nuevo proyecto para desarrollar en wordpress siempre tenía la necesidad de reutilizar código que ya había usado en otros temas porque me resultaban beneficos, como los loops, funciones, etc.

Aquí dejo una lista de los temas base más populares:

Consejos Finales

Otro de los consejos es siempre diseña con contenido de verdad. El habitual “Lorem Ipsum”, sólo contaminará tus conceptos y la elegancia de lo que diseñas.

Pensar en el concepto Mobile First y Responsive Design.

Conclusión

El diseño y desarrollo de un tema puede tomar mucho tiempo, y se basa en mucho aprendizaje. Estas son algunas técnicas y consejos que te ayudarán a refinar tu flujo de trabajo, ahorrándote tiempo y haciendo que seas más eficiente. ¿Tienes algo que agregar?.

Recomendado