Hoy os traemos un buen artículo de cómo abordar el desarrollo y diseño web con WordPress. Algo que mucha gente toca, pero que no todo el mundo sabe hacerlo bien. En muchas ocasiones es necesaria la contratación de un programador web freelance.
No es un secreto que la base de código de WordPress no es lo mejor del mundo, pero es un CMS fácil de utilizar y poderoso.Además sigue siendo el más popular de todos los CMS del mercado.
Entonces, ¿por qué nos preocupamos por la calidad del código del núcleo de WordPress? Funciona, ¿verdad? Sí, funciona, y es improbable que la base de código de 15 años sea completamente refactorizada. ¿Pero y a quién le importa el código malo si todavía hace su trabajo? Bueno, nada es gratis, y los proyectos con mala base de código se hacen poco sostenibles a lo largo del tiempo.
Para cualquier sistema, incluso moderadamente complejo, el costo del desarrollo inicial es insignificante en comparación con el costo de mantenimiento, y el mantenimiento también significa añadir nuevas funcionalidades. Contratar a un desarrollador para arreglar un software mal diseñado e implementado va a costar varias veces más que desarrollarlo correctamente desde el principio.
Las soluciones baratas son siempre las más caras a largo plazo. O se abandonan después de agotar el presupuesto. En realidad ahorramos el dinero de los clientes cuando seguimos principios y prácticas de buen diseño de software.
Obviamente, esto no se aplica a tareas realmente simples como añadir unas pocas líneas de CSS o un par de posts personalizados y reescribir. Pero juntar unos cuantos plugins (o más comúnmente varias docenas de plugins) o crear un sitio alimentado por Visual Composer no es ingeniería de software, de todos modos.
Eso no es algo malo, son solamente algunas soluciones así de simples para WOrdpress. Pero en este capitulo de hoy hablaré del verdadero desarrollo de WordPress: escribir código de calidad en PHP, HTML, CSS y JavaScript. Empezaré con el flujo de trabajo general y luego me centraré en el desarrollo del front-end de WordPress en este artículo.
Flujo de trabajo en el diseño web con WordPress
En general hay una premisa principal, y es que el código debe ser de calidad y debe cumplir los siguientes parametros:
- Que se pueda leer y sea fácil de entender lo que hace el código y por qué.
- Modular. Pequeños bloques de código con un claro propósito son fáciles de entender, desarrollar y probar.
- Reutilizable. Reutilizar los módulos ya desarrollados para resolver problemas similares acelera significativamente el desarrollo. Además es fácil de sacar y utilizar en otros sitios
- Mantenible. Modificar la vieja funcionalidad o introducir nuevas características es fácil.
Mejores prácticas en el diseño web con CMS WordPress
Usar el control de versiones es clave, esto significa usar Git. Lamentablemente, el “código vaquero” en producción por FTP sigue siendo una cosa del pasado.
Lo primero que debes hacer al tomar un sitio web basado en WordPress es ponerlo bajo control de versión. El estado de git muestra cualquier archivo nuevo, borrado o cambio en cualquier archivo, nos permite volver a atrás en el tiempo y poder manipular acciones sobre el proyecto.
Está claro que es importante usar Git. Pero cuando lo hagas, es igual de importante evitar exponer tu repositorio de Git a ser hackeado. El problema viene cuando tienes expuestas las carpetas .git y guardas tus credenciales en ellas.
Una instalación estándar de WordPress vive completamente en una carpeta pública de la web, y es muy probable que la carpeta .git también esté allí. Obviamente, ninguna credencial de acceso debe ser almacenada en el repositorio de Git, pero sucede que la mayoría de los repositorios contienen alguna información sensible que no debe ser filtrada al exterior.
Utilizar entornos separados
No haga el desarrollo en sitios en vivo, es aconsejable tener un entorno para desarrollo, fase de staging y producción. Este es un método probado para evitar problemas y hacer buen testing, todas las actualizaciones de núcleo, plugin y temas se hacen primero localmente, luego se prueban en entorno de staging y finalmente se despliegan en producción.
Utiliza WP-CLI
La interfaz de línea de comandos de WordPress (WP-CLI) es una herramienta extremadamente útil para administrar las instalaciones de WordPress. Tener acceso a WP-CLI significa tener la capacidad de ejecutar virtualmente cualquier función de la API de WordPress. Por ejemplo, puedes añadir, eliminar y editar usuarios y sus contraseñas con WP-CLI.
Además, estas acciones pueden ser programadas y automatizadas.
Utilizar las opciones de despliegue avanzadas
Hablando de automatización, vale la pena aprender algunas tecnologías y procesos de despliegue como:
- Integración continua/despliegue continuo/entrega (CI/CD)
- Docker
- Pruebas automatizadas (incluyendo pruebas de regresión frontal)
Usar Linting para tener código legible
“Linting” significa comprobar automáticamente si hay errores en el código. Un IDE con todas las funciones como PHPStorm ya lo hace de forma automática; sin embargo, los editores más simples como VSCode o Sublime Text necesitan un programa dedicado llamado linter. Una forma de configurar esto es configurando tu editor para que ejecute un linter cada vez que guardas un archivo.
PHP_CodeSniffer es el linterna de facto para PHP. Además de comprobar si hay errores de sintaxis, también puede comprobar si su código sigue las pautas de estilo como PSR-2. Esto simplifica enormemente el seguimiento de los estándares de codificación.
Técnicas modernas de desarrollo de WordPress
Con un flujo de trabajo adecuado ahora configurado para tu proyecto general de WordPress, vamos a sumergirnos en las mejores prácticas de frontend para trabajar diseño web con WordPress.
Utiliza las herramientas modernas: Sass y ES6
El mundo del desarrollo está siempre cambiando y siempre en movimiento. Una vez pensamos que Sass era la mejor herramienta para escribir CSS y para el desarrollo de WordPress antes de Gutenberg, todavía lo es, pero entonces todo el mundo empezó a hablar de CSS en JS y de componentes.
Ni siquiera WordPress pudo resistirse y recogió algunas de esas nuevas tecnologías. Gutenberg, el nuevo editor de bloques, está construido sobre React y una API REST.
ES6 y Sass son JavaScript y CSS de hoy en día, respectivamente, y Webpack es una herramienta que permite utilizar todas estas características modernas sin preocuparse por la compatibilidad con las versiones anteriores. Webpack puede ser llamado un compilador de aplicaciones de front-end que genera archivos para su uso en un navegador.
Transición de jQuery a Vue.js o React
El núcleo de WordPress y casi todos los plugins de WordPress dependen de jQuery, así que no puedes dejar de usarlo. En realidad, no tiene sentido dejar de usarlo para tareas simples como ocultar un par de divs o hacer una petición AJAX de una sola vez cuando estás acostumbrado a hacerlo de esa manera. jQuery va a ser cargado de todos modos, y es simple y fácil de usar.
Por otro lado, .as modernas bibliotecas de front-end, como React, utilizan los principios de la programación orientada a objetos (POO) y organizan la arquitectura de las aplicaciones de front-end en componentes modulares y reutilizables.
Hay dos bibliotecas basadas en componentes que están de moda en este momento: Vue.js y React. React sería una opción obvia porque ya es usada por la última versión de WordPress Gutenberg. Sin embargo, para alguien nuevo en el Javascript moderno, Vue.js podría ser mejor para empezar.
Vue.js es mucho más amigable para los principiantes, y puede ser usado con solo poner una etiqueta de script. Vue.js usa JavaScript (ES5), HTML y CSS. La introducción de nuevos conceptos es mucho más gradual sobretodo si vienes de librerias como JQuery.
Usar la API REST que ofrece WordPress
La API REST de WordPress es sólo una interfaz estandarizada para solicitar y modificar datos de WordPress de forma remota. Es más una cosa de arquitectura de software que una forma completamente diferente de codificación. Los mismos viejos fragmentos de jQuery AJAX podrían ser usados con parámetros ligeramente diferentes.
¿El beneficio más importante? Dado que la API REST de WordPress estandariza la comunicación entre el back end y el front end, es un gran paso hacia la modularidad, la reutilización y la legibilidad de su código.
Aprende WordPress Gutenberg
El objetivo final de Gutenberg es la personalización completa del sitio, esto sienta las bases de un nuevo modelo para el WordPress Core que, en última instancia, impactará en toda la experiencia de publicación de la plataforma.