Tus sitios web WordPress al máximo nivel con Sage Starter Theme

• Artículos
• Domingo, 28 de agosto de 2016

El mundo del desarrollo con WordPress tiene mala prensa entre el mundo “indie” de la web. Denostado como un software inseguro, lento y caótico, es indudable que gran parte de “mala leche” hacia WordPress es su popularidad. En esta misma línea, muchas de las críticas hacia WordPress no son infundadas. Su facilidad de funcionamiento, su baja barrera de entrada y su énfasis en la compatibilidad hacia atrás producen instalaciones que hacen de huir espantados a muchos desarrolladores. No obstante, la virtud del ecosistema WordPress es su diversidad y experiencia, con proyectos sólidos y desarrolladores que comparten sus mejores conocimientos. Al comentar que usas WordPress ciertas personas te dirigen una mirada entre jocosa y condescendiente. No se creen que una página web WordPress puede albergar un robusto flujo de trabajo con las avanzadas herramientas de desarrollo web. Es indudable que estas personas no conocen Sage.

¿Qué es Sage y qué lo diferencia de otros temas para WordPress?

Conocí Sage hace unos tres años mientras exploraba posibilidades para mejorar el desarrollo de páginas web.En aquel momento conocía herramientas como HTML5 Boilerplate y me pensé que podría existir algo parecido para el desarrollo de temas en WordPress. En primer lugar tropecé con el proyecto Bones y comprendí que lo que estaba buscando era un Starter Theme. No un tema hijo, o un framework al estilo de Genesis. Tras estudiar brevemente Bones, encontré el proyecto Roots de un genial desarrollador web llamado Ben Word, que había creado un Starter Theme que ya en su momento tenía un pinta fantástica. Hallar Roots fue lo más cercano que tuve a una epifanía en WordPress. Sin Roots seguramente no hubiera seguido trabajando con WordPress porque hubiera pensado, erróneamente que limitaría mis posibilidades de aprendizaje. Ahora Roots se llama Sage, el proyecto ha evolucionado una barbaridad y junto con otros dos fenomenales proyectos conforman Roots.io, lo que sin duda es, una de los proyectos más vibrantes en torno al desarrollo con WordPress.

Sin Roots seguramente no hubiera seguido trabajando con WordPress porque hubiera pensado, erróneamente que limitaría mis posibilidades de aprendizaje.

Desde el primer momento Sage desafió mi zona de confort y me ha ayudado, gracias a su fenomenal crecimiento y progresión, a conocer las herramientas más modernas en desarrollo web como son preprocesadores CSS (primero con LESS y luego con SASS) o los gestores de tareas como Grunt y Gulp que automatizan infinidad de trabajos.

Como advierten sus desarrolladores, Roots no debería ser tu primer tema o contacto con WordPress porque sí, es complejo. Necesitas experiencia y un conocimiento sólido del funcionamiento de WordPress con respecto, por ejemplo a la jerarquía de plantillas. Esto es debido a que Sage no es un framework, ni es un tema listo para ser activado o extendido. Es un tema de inicio para desarrolladores WordPress. Para instalar el tema debes asegurarte que dispones de las herramientas de desarrollo instaladas en tu computadora de trabajo (Git, Node.js, Bower y Gulp). Aquí es donde comienza el viaje que te llevará a aprender, como una moderna y práctica instrucción, las herramientas más avanzadas sobre desarrollo web. Básicamente, iniciarás el viaje para convertirte en un auténtico profesional de WordPress.

Para usar Sage necesitarás experiencia y conocimiento pero una vez aprendas la herramienta las posibilidades son inmensas

Por tanto es fundamental comprender que Sage no es un tema convencional. No tiene por objeto otorgarle apariencia a nuestro sitio web. Su objetivo es ofrecer una base de desarrollo sólido y moderno de nuestro sitio web WordPress. Cuando completas la instalación básica de Sage, te encuentras un sitio desprovisto de decoraciones y código superfluo. Obtienes un tema robusto, optimizado y con excelentes funcionalidades para iniciar tu desarrollo web.

¿Qué ventajas ofrece Sage Starter Theme?

La principal ventaja que te ofrece Sage está en mantener un flujo de trabajo organizado y basado en las mejores prácticas de desarrollo. Tan sólo por este motivo merece la pena cruzar el umbral de comodidad que muchas veces nos ponemos al trabajar con WordPress. La advertencia de que Sage no debería ser tu primer tema, no es en absoluto exagerada. Sage cuenta con lista extensa de funcionalidades que deberás comprender y que una vez superadas, serán tus aliadas para desarrollar sitios web modernos y funcionales.

El ingenioso hack Theme Wrapper

Entre las funcionalidades más destacadas nos encontramos su estructura de plantillas fundamentada en el llamado Theme Wrapper. Se trata de un ingenioso “hack” cuyo objeto es evitar la repetición de código en nuestros archivos de plantilla. A cualquier desarrollador WordPress le parecerá común comenzar cada plantilla con un get_header() y acabarla con un get_footer(). Esto vendría a forzar una repetición innecesaria de código en nuestras plantillas (DRY, don’t repeat yourself) y al mismo tiempo suele provocar sitios repletos de archivos de plantillas adicionales. En un sóla palabra: confusión.

Gracias al Theme Wrapper, con un sólo archivo base.php podemos extender y manejar elegantemente la estructura de plantillas de nuestro WordPress. Es importantísimo destacar que el Theme Wrapper no suplanta a la jerarquía de plantillas de WordPress. Simplemente, la extiende y la mejora, con lo que es posible recurrir a la jerarquía habitual en caso de necesitarlo. Además es perfectamente posible extender los archivos base.php de la misma forma que lo haríamos con la jerarquía de plantillas. Por ejemplo base-front-page.php tendría prioridad al cargar una plantilla front-page.php que existiera en en la raíz del tema.

Gestión y construcción de los recursos del tema

Sin duda otra de las joyas indiscustibles de Sage se encuentra en la automatización de las tareas relacionadas con los activos de nuestra web. Gracias a esta funcionalidad (desarrollada por Austin Pray) y a la gestión de tareas realizadas a través de Gulp (conveniente programadas en un archivo gulpfile.js) se realizan multitud de trabajos de especial importancia para un sitio web moderno (compresión, mimificación, etc). Esto significa que mientras estamos en desarrollo un simple “gulp” ejecutado en la raíz del tema en nuestra línea de comandos, ejecuta por nosotros todas las tareas descritas en archivo Gulp. Es muy interesante comprender que estas tareas son distintas cuando estamos en desarrollo o en producción. Un comando gulp –production (una vez modificado una variable en el archivo config.php) ejecutará las tareas precisas para que nuestros activos estén listos para ser servidos en producción.

Es importante destacar también que las tareas gulp pueden ejecutarse por separado. Por ejemplo un gulp styles simplemente ejecutará las tareas específicas para la tarea “styles”. No obstante para cuando nos encontramos en la fase de desarrollo Sage cuenta con una funcionalidad extraordinaria y es BrowserSync. Esto permite a través de la ejecución de la tarea “gulp watch”, lanzar la aplicación BrowserSync que sirve para sincronizar todos nuestros navegadores (móviles y de escritorio) mientras probamos los cambios.A tal efecto cada vez que guardamos un archivo de nuestro tema Sage mientras se ejecuta gulp watch, muestra los cambios automáticamente en nuestro navegador sin necesidad de refrescar. ¿No es genial?

Una estructura limpia y personalizable.

Sage es increiblmente flexible a la hora de personalizar cualquiera de sus elementos. Sage usa Bower como gestor de paquetes y su estructura permite modificar los paquetes que cargamos. Esto implica que si no necesitamos algunas de las librerías que vienen por defecto como Bootstrap, o decidimos prescindir de alguno de sus componentes todo esto fácilmente personalizable. El objetivo es contar con una herramienta flexible y moderna que se adapte las necesidades del desarrollador.

Un aspecto muy destacable de Sage es su énfasis en producir un código fuente ordenado y desprovisto de elementos innecesarios.

Un aspecto muy destacable de Sage es su énfasis en producir un código fuente ordenado y desprovisto de elementos innecesarios. En por ello que tanto las plantillas como el código generado en la cabecera y el pie de la página, sea limpio y descriptivo. A tal efecto y para conseguir los mejores resultados Roots también distribuye un plugin llamado Soil que proporciona interesantes funciones como limpieza de cabecera y de los elementos de navegación, al igual que interesantes modificaciones en nuestro código. Un aliado indispensable para contar con páginas optimizadas y dirigidas a un excelente rendimiento.

Roots un proyecto que crece de manera imparable

El proyecto Roots.io ha crecido más allá de Sage y ya cuenta con un pila de avanzados productos dirigidos al desarrollo profesional con WordPress. Es interesante comprobar que este progreso va muy en línea con la evolución del desarrollo web, y que se dirige hacia el control y optimización tanto del front-end como del back-end. De esta manera la pila (stack) de Roots se divide en:

• Trellis en el lado servidor, permitiendo gracias a herramientas de virtualización como Vagrant, crear y provisionar servidores para alojar sitios web WordPress. El objetivo es contar con el mismo entorno de trabajo tanto en producción como en desarrollo.
• Bedrock en el lado aplicación, con una estructura de archivos mejor organizada y una gestión de plugins y recursos realizada con Composer. Bedrock ofrece una seguridad mejorada y una gestión apropiada de dependencias.
• Sage en el lado tema, con herramientas de desarrollo modernas orientadas a conseguir temas bien organizados y optimizados.

Roots ha conseguido atraer la atención de muchos desarrolladores que confían en WordPress como una herramienta sólida para construir sitios web modernos y funcionales. Es sorprendente el trabajo que voluntarios y entusiastas desarrollan en torno a estas herramientas. Si quieres llevar al máximo nivel tu sitios webs WordPress es indudable que el camino pasa por empezar a desarrollar con Roots. La documentación (sólo en inglés) es buenísima y está muy desarrollada en su foro de Discourse, donde encuentras siempre temprana respuesta por parte de los colaboradores del proyecto.