5 FORMAS de DESARROLLO WORDPRESS

No os voy a mentir, WordPress últimamente no tiene muy buena fama en el mundo del desarrollo. Muchos dicen que es inseguro, lento y poco optimizado… pero es porque no conocen el desarrollo WordPress con una visión más global, pues piensan que el desarrollo en WordPress se basa únicamente en temas comprados en Themeforest, en constructores visuales como Elementor, los cuales, ciertamente, no es que estén muy bien optimizados, o en instalaciones con 200 plugins para buscar el resultado que esperamos.

Pero, cuando te adentras en el mundo del desarrollo WordPress, descubres que no todo está limitado a Elementor, y las formas clásicas de desarrollo, y existen diferentes posibilidades para desarrollar un sitio en WordPress, siendo algunas de ellas realmente desconocidas por la gran parte de desarrolladores, como el desarrollo Headless, del cuál ya tenéis una entrada en el blog con un pequeño Webinar de 1h realizado por mí con la colaboración de la empresa Garaje de Ideas, donde os enseño a realizar un desarrollo Headless junto a React.

Así pues, para ofrecer un poco más de información y ampliar la visión de los desarrolladores más inexpertos en WordPress, os voy a compartir, de forma breve, cuáles son las diferentes formas en las que podemos desarrollar un sitio con WordPress.

Formas de desarrollo WordPress

En total, podemos encontrar 5 formas diferentes para el desarrollo de un sitio web o aplicación utilizando WordPress como gestor de contenidos (CMS): el uso tradicional de temas, el uso de pagebuilders, el desarrollo personalizado de temas, la utilización de temas basados en bloques y, finalmente, el desarrollo headless o decoupled.

1. Uso tradicional de temas

Cuando hablamos del desarrollo y uso tradicional de temas, nos estamos refiriendo a una de las formas más comunes a la hora de desarrollar un sitio web con WordPress.

Se trata de la opción donde, teniendo claras las necesidades del sitio, elegimos un tema ya creado, normalmente disponible en las tiendas tipo Themeforest o en el propio repositorio de WordPress, para luego ya personalizarlo según sea necesario.

Las bases del desarrollo, con el diseño, el conjunto de funcionalidades… todo está ya hecho. Simplemente tendremos que invertir el esfuerzo en adaptar ese diseño a las necesidades de nuestro proyecto (textos, imágenes, detalles menores) y poco más.

Las ventajas de esta forma de desarrollo con WordPress son:

1. Los diseños suelen ser llamativos y profesionales, pues suele haber un equipo de diseño UX/UI detrás de ellos.
2. El desarrollo base está hecho, por lo que su implementación es mucho más fácil y rápida.
3. No requiere, de forma general, conocimientos de programación.
4. Si el tema es de pago, suele tener soporte técnico.
5. También hay temas que tienen comunidades activas para preguntar dudas y problemas.
6. Actualizaciones periódicas.

En cambio, esta opción también tiene unas desventajas que tenemos que tener en cuenta, las cuales son:

1. Personalización Limitada: Aunque muchos temas ofrecen opciones de personalización, es posible que encuentres limitaciones en cuanto a la capacidad de personalizar ciertos aspectos del diseño o la funcionalidad para que se ajusten exactamente a tus necesidades.
2. Rendimiento y Velocidad: Algunos temas prediseñados pueden contener una gran cantidad de funciones y estilos que no necesitas, lo que puede afectar el rendimiento y la velocidad de carga de tu sitio web, especialmente si no se optimizan adecuadamente.
3. Costo Adicional por Funcionalidades Extras: Aunque el tema en sí puede tener un precio inicial, es posible que necesites adquirir plugins adicionales para obtener ciertas funcionalidades específicas, lo que puede aumentar los costos totales.
4. Conflictos de Plugins: Al instalar plugins adicionales, es posible que encuentres conflictos con el tema prediseñado, lo que puede afectar la funcionalidad o el aspecto de tu sitio web y requerir un trabajo extra para solventar estos problemas.
5. Dependencia del Desarrollador: Si el desarrollador del tema deja de proporcionar actualizaciones o soporte, podrías encontrarte con problemas de seguridad o compatibilidad en el futuro, especialmente si WordPress se actualiza y el tema no se mantiene al día.
6. Dificultades de SEO: Algunos temas pueden no estar optimizados para SEO de manera adecuada, lo que podría afectar la visibilidad de tu sitio web en los motores de búsqueda si no se ajustan correctamente.
7. Exceso de Funcionalidades: Aunque puede sonar como una ventaja, algunos temas prediseñados vienen con una gran cantidad de funcionalidades que no necesitas, lo que puede hacer que el panel de administración sea abrumador y difícil de navegar.

Como ves, aunque el uso de temas ya desarrollados puede simplificarnos mucho el trabajo, sus desventajas no son pocas.

En general, yo no suelo recomendar el uso de esta opción, pues a menos que encuentras un tema que se ajusta al 100% a tus necesidades y es de un desarrollador confiable, con estos desarrollos sueles depender mucho de la instalación de plugins extras y el rendimiento no suele ser el más óptimo.

2. Uso de constructores visuales o page builders

Sin duda, esta opción de desarrollo e implementación, ha sido la que ha tomado gran popularidad en los últimos 6 años.

Básicamente, los constructores visuales o pagebuilders son herramientas (plugins de WordPress) que permiten crear diseños complejos de manera visual, con drag&drop (o arrastra y suelta) sin la necesidad de conocimientos de programación. Funcionan mediante una interfaz de arrastrar y soltar, donde puedes agregar y organizar elementos como texto, imágenes, botones, formularios, entre otros, para crear el diseño deseado de cada una de las páginas que tendrá tu web.

Las ventajas del uso de los pagebuilders son:

1. Facilidad de uso: Los page builders son herramientas diseñadas para ser intuitivas y fáciles de usar, lo que permite a usuarios sin experiencia en programación crear diseños complejos de manera sencilla mediante su interfaz.
2. Diseño visual: Con los page builders, puedes ver los cambios que realizas en tiempo real, lo que facilita la creación de diseños visualmente atractivos y la experimentación con diferentes elementos de diseño sin tener que recurrir a previsualizaciones constantes.
3. Personalización flexible: Los page builders ofrecen una amplia gama de opciones de personalización, que van desde ajustes básicos como tamaños de fuente y colores hasta opciones avanzadas como animaciones y efectos, lo que te permite adaptar el diseño de tu sitio web a tus necesidades específicas.
4. Versatilidad: Los page builders suelen ser compatibles con una variedad de temas y plugins de WordPress, lo que te permite crear una amplia gama de diseños y funcionalidades sin tener que cambiar de tema (porque sí, tienes que instalar un tema base) o instalar múltiples plugins.
5. Ahorro de tiempo: Al permitirte crear diseños complejos de manera rápida y sencilla, los page builders te ayudan a reducir significativamente el tiempo necesario para desarrollar y mantener tu sitio web, lo que es especialmente útil si tienes plazos ajustados o recursos limitados.
6. Compatibilidad con dispositivos móviles: Muchos page builders ofrecen herramientas de vista previa para dispositivos móviles, lo que te permite asegurarte de que tu sitio web se vea y funcione correctamente en una variedad de dispositivos y tamaños de pantalla.

Sin duda los pagebuilders han sido un gran paso para acercar el desarrollo WordPress a todo tipo de público, pues hoy en día usando estas herramientas, casi cualquiera puede tener una web en WordPress más o menos atractiva… pero atención, que no todo son ventajas y, de hecho, el uso de estas herramientas para mí es unas de las peores opciones si quieres tener una web profesional y optimizada.

¿Cuáles son sus desventajas?

1. Código adicional y bloatedness (sobrecarga): Los page builders a menudo generan un código adicional y complejo en comparación con el código limpio y optimizado que podría producir un diseñador o desarrollador experimentado. Esto puede afectar el rendimiento del sitio web y la capacidad de indexación por parte de los motores de búsqueda.
2. Impacto en el rendimiento: Al generar el código adicional y complejo, además de la sobrecarga, el uso de los pagebuilders de forma general ralentiza la velocidad de carga de la página. Esto puede afectar negativamente la experiencia del usuario, especialmente en dispositivos móviles y conexiones de red más lentas. Además, el rendimiento lento del sitio web puede tener un impacto negativo en el SEO y la clasificación en los motores de búsqueda. Es necesario realizar optimizaciones adicionales para mitigar este impacto y garantizar un rendimiento óptimo del sitio.
3. Dependencia del plugin: Al utilizar un page builder, tu diseño y contenido están vinculados al plugin en particular que estés utilizando. Si decides cambiar a otro page builder o desactivar el actual, es posible que pierdas el diseño y la estructura de tus páginas, lo que puede requerir un esfuerzo adicional para reconstruir o reconfigurar el sitio.
4. Posibles problemas de compatibilidad: Algunos page builders pueden no ser completamente compatibles con todos los temas y plugins de WordPress, lo que puede resultar en problemas de diseño, funcionalidad o rendimiento cuando se utilizan en conjunto.
5. Costo: Aunque muchos page builders tienen versiones gratuitas, si quieres tener una web que luzca profesional, seguramente vas a estar obligado a contratar la versión de pago del plugins, la cuál cuenta con algunas de las funcionalidades más avanzadas, lo que puede aumentar los costos de desarrollo a largo plazo.

Aunque puedes obtener resultados llamativos y funcionales, para mí la experiencia de usuario con esta opción está lejos de ser lo que busco como desarrollador. La optimización no es el punto fuerte de los pagebuilders y, aunque se puede trabajar en ella con el uso de plugins y haciendo un gran trabajo de WPO (WordPress Optimization), hay otras opciones que pueden dar resultados iguales o de mejor calidad con una mejor optimización.

Además, la mayoría de desarrollos realizado con pagebuilders carecen de personalidad. La mayoría son casi iguales, por lo que destacar con tu web usando pagebuilders, se hace un poco más difícil.

3. Desarrollo personalizado de temas

Al igual que podemos utilizar temas desarrollados por terceros, también podemos utilizar temas desarrollados por nosotros (o por un desarrollador), hechos especialmente desde cero para nuestra web.

No hay mucho misterio en esto, haremos un desarrollo completo de un tema de WordPress y sus plugins para crear un tema que encaje al 100% con lo que buscamos. Sin funcionalidades y elementos de diseño extras que no usaremos, sin código de más, ni de menos.

¿Cuáles son las ventajas de este tipo de desarrollo?

1. Diseño a medida: Puedes crear un diseño único y específico para tu proyecto, adaptado a tus necesidades y preferencias. Esto te permite destacarte frente a otros sitios web que podrían estar utilizando temas predefinidos.
2. Funcionalidad específica: Al desarrollar un tema personalizado, puedes integrar funcionalidades específicas que no están disponibles en los temas prediseñados. Esto te permite tener un control completo sobre las características y la experiencia del usuario en tu sitio web.
3. Optimización de rendimiento: Al eliminar el código innecesario y optimizar el código para satisfacer las necesidades exactas de tu proyecto, puedes mejorar el rendimiento de tu sitio web. Esto puede traducirse en tiempos de carga más rápidos y una mejor experiencia de usuario.
4. Mejor seguridad: Los temas personalizados están menos expuestos a vulnerabilidades de seguridad en comparación con los temas populares que pueden ser blanco de ataques cibernéticos. Además, al desarrollar tu propio tema, puedes implementar prácticas de seguridad personalizadas para proteger tu sitio web.
5. Flexibilidad y escalabilidad: Un tema personalizado te brinda la flexibilidad para ajustar y expandir tu sitio web a medida que evolucionan tus necesidades. Puedes agregar nuevas características y realizar cambios según sea necesario sin depender de las limitaciones de un tema prediseñado.
6. Marca coherente: Un tema personalizado te permite mantener una identidad de marca coherente en todo tu sitio web. Puedes personalizar cada aspecto del diseño para que se alinee perfectamente con tu marca, lo que contribuye a una experiencia de usuario más cohesiva.

Sin duda, el desarrollo de un tema a medida para tu web es una opción que tienes que tener en cuenta si quieres tener un proyecto serio y profesional. No obstante, también tiene una serie de desventajas:

1. Costo y tiempo: Desarrollar un tema personalizado puede ser más costoso y llevar más tiempo en comparación con la instalación de un tema prediseñado. Requiere la contratación de un desarrollador web con experiencia, lo que puede aumentar los costos iniciales y el tiempo de desarrollo.
2. Mantenimiento continuo: Los temas personalizados requieren un mantenimiento continuo para garantizar su compatibilidad con las actualizaciones de WordPress, los complementos y los cambios en los estándares de desarrollo web. Esto puede requerir recursos adicionales en términos de tiempo y dinero a lo largo del tiempo.
3. Posible falta de soporte: A diferencia de los temas populares de WordPress que suelen tener comunidades activas de usuarios y desarrolladores que proporcionan soporte y actualizaciones regulares, un tema personalizado puede carecer de este tipo de apoyo. Esto significa que cualquier problema técnico o actualización futura puede requerir la intervención de un desarrollador.
4. Curva de aprendizaje: Si eres nuevo en el desarrollo web o en WordPress, la creación de un tema personalizado puede tener una curva de aprendizaje empinada. Es posible que necesites tiempo para familiarizarte con las mejores prácticas de desarrollo, los estándares de WordPress y las tecnologías relacionadas.
5. Posible falta de funcionalidades avanzadas: A menos que tengas un desarrollador web altamente capacitado, es posible que no puedas implementar todas las funcionalidades avanzadas que están disponibles en algunos temas prediseñados o a través de complementos populares. Esto podría limitar las capacidades de tu sitio web en ciertos aspectos.
6. Dependencia del desarrollador: Si tu tema personalizado está desarrollado por un profesional externo, puedes volverte dependiente de esa persona o equipo para futuras actualizaciones, personalizaciones y mantenimiento. Esto puede generar problemas si el desarrollador deja de estar disponible o si surge un desacuerdo en el futuro.

4. Desarrollo basado en bloques

El desarrollo de WordPress basado en bloques se refiere a una metodología de construcción de sitios web en WordPress que se centra en el uso de bloques de contenido como la unidad fundamental de diseño y estructura. Esta metodología se introdujo con la llegada de Gutenberg, el nuevo editor de bloques de WordPress, que reemplazó al editor clásico basado en texto.

En el desarrollo de WordPress basado en bloques, los elementos de contenido como párrafos, imágenes, videos, botones y widgets se presentan como bloques individuales. Cada bloque puede ser personalizado, movido y editado de forma independiente, lo que brinda una mayor flexibilidad y control sobre el diseño del sitio web.

Es una forma de desarrollo bastante visual y que puede resultar simple cuando comprendes su funcionamiento. Si necesitas un ejemplo, esta web (juliancampos.es) está desarrollada con Gutemberg, el constructor de bloques nativo de WordPress y Spectra, un plugin también de bloques. Un desarrollo bastante simple, sin requerir de plugings y agradable visualmente.

Las ventajas del desarrollo basado en bloques son:

1. Facilidad de uso: El enfoque basado en bloques hace que la creación y edición de contenido sea más intuitiva y accesible para usuarios de todos los niveles de habilidad. Los usuarios pueden simplemente arrastrar y soltar bloques para construir páginas y entradas sin necesidad de conocimientos de codificación.
2. Flexibilidad de diseño: Los bloques permiten una mayor flexibilidad en el diseño de páginas y entradas. Los usuarios pueden personalizar fácilmente el diseño y la disposición del contenido, agregando, eliminando o moviendo bloques según sea necesario para lograr el diseño deseado.
3. Reutilización de contenido: Los bloques pueden ser guardados y reutilizados en diferentes partes del sitio web, lo que facilita la creación de diseños coherentes y la gestión eficiente del contenido.
4. Compatibilidad con temas y complementos: La mayoría de los temas y complementos de WordPress están diseñados para ser compatibles con el editor de bloques de Gutenberg, lo que garantiza que los sitios web desarrollados con esta metodología puedan beneficiarse de una amplia gama de opciones de diseño y funcionalidades adicionales.
5. Mayor control y personalización: Los desarrolladores pueden crear bloques personalizados con funcionalidades específicas para adaptarse a las necesidades únicas de un proyecto.
6. Mejora del rendimiento: El uso de bloques puede conducir a un mejor rendimiento del sitio web, ya que los bloques individuales pueden cargarse de forma más eficiente que las estructuras de página más complejas. Esto puede traducirse en tiempos de carga más rápidos y una mejor experiencia de usuario.

Y bueno, como todo, también tiene sus desventajas:

1. Curva de aprendizaje inicial: Aunque el editor de bloques de WordPress es intuitivo, puede llevar algo de tiempo acostumbrarse a este nuevo flujo de trabajo, especialmente para aquellos que están familiarizados con el editor clásico o que son nuevos en WordPress en general.
2. Limitaciones de diseño: Aunque los bloques ofrecen flexibilidad en el diseño, a veces pueden imponer ciertas limitaciones en comparación con la codificación manual o el uso de constructores de páginas más avanzados. Algunos diseños más complejos pueden requerir trabajo adicional para lograr con bloques.
3. Personalización limitada para usuarios no técnicos: Aunque los bloques personalizados pueden ser creados por desarrolladores para ofrecer funcionalidades específicas, los usuarios no técnicos pueden tener dificultades para personalizar o modificar estos bloques sin ayuda adicional.

Sin duda, para mí hoy en día es mi opción favorita, desbancando al desarrollo de temas personalizados. En mi experiencia como desarrollador WordPress, hoy en día con la combinación de Gutemberg + Spectra (y usando en tema base optimizado como puede ser Astra Pro), puedes realizar cualquier tipo de desarrollo con una gran optimización y rendimiento.

5. Desarrollo Headless

Y por último, tenemos el desarrollo Headless. En este enfoque, WordPress se utiliza como un CMS (Sistema de Gestión de Contenidos) para administrar el contenido, pero la presentación del sitio se maneja completamente mediante una tecnología diferente, como React, Angular o Vue.js (utilizando los endpoint de la API de WordPress). Esto permite una mayor flexibilidad en el desarrollo de la interfaz de usuario y una mejor separación entre el contenido y su presentación.

Es una opción muy interesante y de la cuál ya os he hablado anteriormente, así que si queréis tener una vista más completa, os invito a ver este artículo y el webinar de Introducción al desarrollo Headless con WordPress que realicé con el equipo de Garaje de Ideas.

Las ventajas del desarrollo Headless son:

1. Flexibilidad en la presentación: Al separar el backend (WordPress) del frontend (la interfaz de usuario), el desarrollo headless permite una mayor flexibilidad en la presentación del contenido. Los desarrolladores pueden utilizar tecnologías modernas como React, Angular o Vue.js para crear interfaces de usuario altamente interactivas y personalizadas.
2. Mejora del rendimiento: Al eliminar la carga de renderizado del servidor de WordPress y dejar que el frontend maneje la presentación del contenido, se puede lograr un mejor rendimiento del sitio web. Esto puede resultar en tiempos de carga más rápidos y una experiencia de usuario más fluida.
3. Escalabilidad: La arquitectura headless permite escalar cada componente de manera independiente según sea necesario. Esto significa que puedes escalar verticalmente (añadir recursos a una instancia) o horizontalmente (añadir más instancias) el frontend y el backend de forma separada, lo que facilita el manejo de picos de tráfico y el crecimiento del sitio web.
4. Mayor seguridad: Al separar el frontend del backend, se reduce la superficie de ataque para los posibles exploits de seguridad. Además, al utilizar tecnologías frontend modernas, los desarrolladores pueden implementar medidas de seguridad adicionales para proteger el sitio web.
5. Facilidad para la creación de aplicaciones: Al utilizar una API RESTful o GraphQL para comunicarse entre el frontend y el backend, los desarrolladores pueden crear fácilmente aplicaciones web, aplicaciones móviles o incluso aplicaciones de escritorio que consuman datos y funcionalidades de WordPress.
6. Reutilización de contenido: La API RESTful o GraphQL de WordPress permite acceder y manipular el contenido de WordPress de forma programática, lo que facilita la reutilización del contenido en múltiples plataformas y dispositivos.

Y sus inconvenientes:

1. Complejidad técnica: El desarrollo headless puede ser más complejo que el desarrollo tradicional de WordPress, ya que implica la integración de dos sistemas separados (el backend de WordPress y el frontend de la aplicación) y la gestión de la comunicación entre ellos.
2. Curva de aprendizaje: Los desarrolladores que no estén familiarizados con tecnologías frontend modernas como React, Angular o Vue.js pueden enfrentar una curva de aprendizaje pronunciada al adoptar el enfoque headless. Además, los desarrolladores deben comprender cómo interactuar con la API RESTful o GraphQL de WordPress.
3. Mayor costo inicial: El desarrollo headless puede requerir una inversión inicial más alta en términos de tiempo y recursos debido a la complejidad técnica involucrada y la necesidad de desarrolladores con experiencia en tecnologías frontend modernas.
4. Gestión de contenido más compleja: Aunque la API RESTful o GraphQL de WordPress permite acceder y manipular el contenido de WordPress de forma programática, la gestión del contenido puede volverse más compleja debido a la separación entre el backend y el frontend. Esto puede requerir herramientas y procesos adicionales para garantizar la coherencia y la integridad del contenido.
5. Dependencia de servicios externos: Al utilizar un frontend separado del backend de WordPress, el sitio web puede depender de servicios externos (como servicios de alojamiento para el frontend) que pueden introducir puntos únicos de fallo o potenciales cuellos de botella.
6. Limitaciones de la API de WordPress: Aunque la API RESTful y GraphQL de WordPress ofrece una amplia funcionalidad, puede haber algunas limitaciones en comparación con el acceso directo al sistema de WordPress. Algunas funcionalidades específicas de WordPress pueden ser difíciles de replicar o pueden requerir soluciones personalizadas.

Conclusiones

Si te interesa saber sobre cómo podemos desarrollar un sitio o aplicación en WordPress, estas son las 5 formas que puedes utilizar en 2024.

Mi opinión personal es que las mejores formas para desarrollar una web con WordPress es la del desarrollo basado en bloques y la de los temas personalizados.

Con estas formas estamos mirando por la optimización y limitando el uso de plugins que pueden afectar al rendimiento.