Temas a medida en WordPress. Mis herramientas de desarrollo

Como desarrollador web WordPress no me gustan los temas que no desarrollo personalmente. Suelen estar pensados para ofrecer gran cantidad de funcionalidades (gran parte de las cuales son innecesarias para el proyecto), así como múltiples posibilidades de visualización. La carga de todos los recursos necesarios para su funcionamiento los hace pesados y lentos. Además si no se conocen en profundidad hay que dedicar mucho tiempo para aprender a configurarlos.

Por supuesto hay temas premium excepcionales como por ejemplo Génesis (aunque Genesis es más un framework que un tema típico). En todo caso prefiero desarrollar un tema de WordPress completamente a medida usando únicamente los recursos que el proyecto requiere.

Es cierto, que en ocasiones me resulta tentador adquirir un tema premium para un proyecto web. Pienso, voy ahorrar mucho tiempo. Pero luego recuerdo algunos proyectos que se convirtieron en pesadillas interminables, y en esa ligera modificación que hubo que hacer sobre una funcionalidad que ya traía el tema, en las horas dándole vueltas a las tripas del tema para encontrar el archivo concreto, las modificaciones sobre el tema hijo, los hacks en el tema padre (que encima exigen apuntarlos para futuras actualizaciones). En fin, muchas horas de trabajo no facturadas porque la funcionalidad venía con el tema y no hacía falta desarrollar nada.

Escarmentado tras varios marrones con temas adquiridos en la archiconocida plataforma Themeforest, he llegado a la conclusión que la mejor solución es desarrollar un tema a medida de WordPress para cada nuevo proyecto, y mis herramientas para hacerlo son:

• Underscores
• Foundation Zurb
• Advanced Custom Fields Pro

Los resultados son páginas webs livianas, rápidas y eficaces que instaladas en el servidor adecuado cargan como un tiro.

Además hacer un tema a medida me parece mucho más divertido.

Underscores

Underscores (también conocido como _s) es un tema gratuito desarrollado por Automattic (la empresa que está detrás de WordPress). Se trata de un starter theme que aporta una estructura mínima básica con la que construir una plantilla personalizada a partir de él. No está pensado para servir como tema padre, sino para que el desarrollador web modifique su código fuente y lo adapte a las necesidades de su proyecto. Es un tema para desarrollar temas por lo que está completamente despojado de diseño. Es una hoja en blanco sobre la que podemos agregar estilos y funcionalidades.

No es el único tema de estas características, pero al estar desarrollado por el mismo equipo que ha desarrollado WordPress tiene varias ventajas:

• Cumplimiento de los últimos estándares de codificación sugeridos por WordPress.
• Código limpio, semántico y comentado.
• Una hoja de estilo mínima desde la que podemos empezar a construir con una base sólida.
• Encabezado personalizado opcional.
• Navegación mediante las flechas del teclado para las plantillas de imágenes adjuntas (attachment.php o image.php).
• Un script que hace que tu menú desplegable se active en dispositivos móviles y tablets.
• Excelente compatibilidad con Jetpack. El tema viene preparado con las funciones necesarias para los módulos scroll infinito y comentarios.
• Preparado para páginas web multidioma.
• Tema super liviano, carga rápida y mínimo uso de recursos.
• Licencia GPL para que hagas lo que quieras con él.

Por todas estas razones, Underscores me parece el mejor punto de partida para cualquier proyecto web desarrollado con WordPress.

Muchos temas tanto gratis como de pago, han sido desarrollados con Underscores.

Lo puedes descargar aquí.

Zurb Foundation

Foundation es un framework open source que proporciona una cuadrícula responsive y trae de serie componentes de interfaz de usuario HTML y CSS. Incluye tipografía, formularios, botones, barras de navegación y otros componentes. Así mismo tiene algunas extensiones JavaScript opcionales para hacer la vida del desarrollador web más fácil.

Es el primer framework mobile first responsive construido con Sass/SCSS y facilita buenas prácticas de desarrollo a diseñadores web. Incluye los patrones necesarios más comunes para maquetar fácil y rápidamente un sitio web que se adapte al dispositivo desde el que se ve. Gracias al uso de Sass mixins, es fácil modificar el aspecto de los componentes para que se adapten a nuestro diseño.

El proyecto está desarrollado y mantenido por zurb.com.

Advanced Custom Fields Pro

Advanced Custom Fields Pro (ACF) es un plugin premium que permite la creación de campos personalizados mediante una sencilla herramienta gráfica. Existe una versión gratuita con menos funcionalidades que también funciona muy bien, pero las opciones extras que ofrece la versión premium hacen que merezca la pena su compra.

Para que entendáis que es un campo personalizado os lo explico con un ejemplo. Supongamos que un cliente nos ha pedido un sitio web corporativo con una página llamada “Quiénes somos”. Desde el gestor de contenidos de WordPress el cliente puede añadir y editar contenido cómodamente. Pero qué ocurre si además quiere una sección en esa misma página llamada “Equipo”. Como su empresa sufre cambios constantes de personal quiere tener la posibilidad de añadir o eliminar miembros del equipo de forma fácil y sin que se rompa el diseño de la página. Lo más sencillo es crear campos personalizados que él puede añadir, editar y eliminar en el mismo lugar del back-end desde donde edita la página “Quienes somos”.

Aunque los campos personalizados son elementos nativos de WordPress que se pueden crear escribiendo código, ACF facilita enormemente la creación y gestión de estos elementos.

Es como si en lugar de un editor de texto para cada página tuviéramos varios, y el contenido de dichos editores lo podemos colocar en distintos lugares de la plantilla que muestra dicha página. En realidad ACF es mucho más, ya que permite añadir distintos tipos de contenido: campos de texto, de imagen, completos editores WYSIWYG, mapas de Google… en total 29 tipos de contenido distintos para hacernos la vida más fácil. Además existen plugins de terceros que amplían los tipos de contenido que es posible añadir, como Advanced Custom Fields: Table Field que permite insertar tablas.

ACF se integra perfectamente en el back-end de la página.

Desarrollo web con Underscores, Foundation y Advanced Custom Fields

Para comenzar a desarrollar mi página lo primero que hago es instalar WordPress localmente, una vez el proyecto esté terminado lo subiré al alojamiento del cliente. Trabajar en local es una buena práctica, permite hacer modificaciones en un entorno neutro en el que si se comete algún error la web en producción no se verá afectada.

Aunque hace tiempo escribí un artículo en el blog de Estudio Q41 sobre como instalar WordPress, recientemente he leído otro que me parece más completo y que os recomiendo, es este de Hostinger, hasta la fecha el mejor que he encontrado. Explica detalladamente cómo hacer este proceso en distintos entornos (local, servidor compartido con cPanel, VPS…). Lee cualquiera de los dos tutoriales y realiza tu instalación de WordPress.

Una vez tengo instalado WordPress en entorno de desarrollo local, voy a la web de Underscores para descargar mi próximo tema. El proceso es tan sencillo como darle un nombre al tema y hacer clic en el botón «Generate». Existe la posibilidad de activar las opciones avanzadas y añadir varias opciones al tema (slug, nombre del autor, descripción…). También es posible descargar una versión con funcionalidades extra si vamos a desarrollar una tienda online con WooCommerce.

Al darle al botón “Generate”, se crea y descarga el tema en un archivo comprimido en formato zip. Dado que underscores es un starter theme, no tiene un nombre propio, en su lugar se crea uno nuevo con el que le hemos asignado previamente. De este modo cada tema descargado desde esta página web es único desde el principio.

Solo trabajar con Underscores ya es una buena decisión, pero si le añadimos las ventajas de Foundation y Advanced Custom Fields estaremos optimizando nuestro trabajo de modo exponencial.

Ya tengo WordPress funcionando y mi tema creado, aunque no instalado. Antes de hacerlo descargo Foundation. Y lo hago antes porque trabajo con CodeKit y esta aplicación exige un directorio vacío para llevar a cabo la instalación de Foundation. CodeKit es una aplicación para Mac que entre otras cosas, compila una gran variedad de lenguajes entre ellos SCSS. Además permite la instalación de otros componentes para el desarrollo web con Node modules, un administrador de paquetes para componentes web front-end que gestiona las dependencias y permite actualizarlos fácilmente.

El proceso que sigo para instalar Foundation y mi nuevo tema es el siguiente:

1. Creo un nuevo directorio en la carpeta themes de mi instalación.
2. Le pongo el mismo nombre que el que tiene mi tema.
3. Instalo Foundation en dicho directorio.
4. Meto el contenido de mi tema en la carpeta donde he instalado Foundation. ¡Ojo! Tanto Foundation como Underscores tienen una carpeta llamada js y el contenido de ambas es necesario para el correcto funcionamiento del tema. Así que nada de eliminar esa carpeta, en su lugar mete en ella los archivos javascript de Foundation y del tema.
5. Creo una función en mi tema para que cargue los archivos CSS y js necesarios para que Foundation funcione correctamente (*).
6. Activo mi nuevo tema.

(*) La función para cargar Foundation, que hay que incluir en el archivo functions.php, es la siguiente:

add_action( 'wp_enqueue_scripts', 'sauco_dependencies' );
function sauco_dependencies() {
if (!is_admin()) { // Solo cargo los archivos en el front-end
// CSS Styles
wp_enqueue_style( 'sauco-style', get_stylesheet_uri() );
// Foundation Scripts
wp_enqueue_script( 'sau_what_input_js', get_template_directory_uri() . '/node_modules/what-input/dist/what-input.js', array('jquery'), '20151215', true );
wp_enqueue_script( 'sau_foundation_js', get_template_directory_uri() . '/node_modules/foundation-sites/dist/js/foundation.js', array('jquery'), '20151215', true );
// My own Scripts
wp_enqueue_script( 'sau_app_js', get_template_directory_uri() . '/js/min/app-min.js', array('jquery'), '20151215', true );
}
}

Con esto lo tenemos prácticamente todo hecho. Solo faltan dos pequeños cambios. El primero consiste en indicarle a CodeKit que el archivo /scss/app.scss lo compile en /style.css ya que este archivo, además de controlar el aspecto visual de las páginas, es obligatorio para cada tema de WordPress.

El segundo es poner la información del tema en la cabecera del archivo app.scss para que cuando CodeKit lo compile aparezca dicha información en lo más alto de la hoja de estilos. WordPress usa la sección de comentarios del encabezado de style.css para mostrar información sobre el tema en el panel Apariencia > Temas. El texto a poner será similar a este:

/*
 Theme Name: Sauco web
 Theme URI: http://underscores.me/
 Author: Antonio García-Saúco Iglesias
 Author URI: https://sauco-web.com
 Description:Description
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI:LICENSE
 Text Domain:sauco
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

Me aseguro que el código no devuelve errores y de que se están llamando a todos los archivos correctamente. Si todo va bien, estoy listo para comenzar a desarrollar mi nuevo tema.

Después hacer todo esto activo el tema e instalo el plugin Advanced Custom Fields.

Aunque todo este trabajo puede parecer arduo lo hago en menos de 10 minutos instalación de WordPress incluida, y teniendo en cuenta lo que Foundation me facilita el trabajo de maquetación y los dolores de cabeza que me evitan Underscores y ACF vale mucho la pena.

Anímate a hacer tus propios temas de WordPress con las tres magníficas herramientas que te acabo de presentar, y que harán tu vida de desarrollador web WordPress mucho más fácil.