Desarrollo web CMS con WordPress y DIVI, programación de plugins

Introducción a WordPress

Los sistemas de gestión de contenidos (CMS) facilitan enormemente la creación y administración de sitios web. Sin conocimientos de programación, las empresas y particulares pueden mantener contenidos, ajustar el diseño y hacer que los sitios web sean interactivos. Los CMS más conocidos son WordPress, Joomla, Drupal, Contao y TYPO3, siendo WordPress el sistema más utilizado con diferencia, impulsando alrededor del 43% de todos los sitios web a nivel mundial.

Yo mismo empecé con Joomla, luego usé Contao y me cambié a WordPress por buenas razones. Entre mis clientes, en el ámbito profesional, todavía veo con frecuencia sitios TYPO3, pero estos requieren más familiarización debido a TypoScript y, por lo tanto, no ofrecen una entrada rápida para todos los usuarios y, en particular, para los desarrolladores web. Así, también es más difícil encontrar a alguien que se encargue de las extensiones o el mantenimiento.

Mientras los sistemas funcionen de manera estable y cumplan con todos los requisitos técnicos (versión actual de PHP, actualizaciones de seguridad, RGPD, rendimiento), no hay razón para un rediseño completo. Generalmente, los sitios web suelen funcionar entre 4 y 6 años antes de ser rediseñados fundamentalmente.

Alojamiento en all-inkl.com y otros

WordPress, en principio, no necesita mucho. PHP y MySQL/MariaDB son suficientes, por lo que los sitios de WordPress pueden funcionar con prácticamente todos los proveedores. Sin embargo, hoy en día se espera algo más, por ejemplo:

• un dominio de desarrollo/staging
• gestión cómoda de correo electrónico
• certificados LetsEncrypt para HTTPS con renovación automática
• accesos FTP/SFTP o gestor de archivos web
• copias de seguridad automáticas y fácil restauración
• soporte rápido y gratuito
• suficiente memoria RAM y versiones actuales de PHP (por ejemplo, 8.1/8.2+)
• la posibilidad de realizar configuraciones DNS propias
• una migración rápida y la provisión de códigos de autorización con un solo clic
• un asistente de instalación sencillo para WordPress y otros

Un proveedor preferido durante muchos años es all-inkl.com (enlace de afiliado), que convence con precios de paquetes muy justos y un soporte excelente. Quien solo quiera alojar sistemas CMS, estará perfectamente atendido.

Quien necesite además MongoDB, Node.js o Express, debería alquilar un servidor/VPS propio o acudir a proveedores que ofrezcan estas funciones. Sin embargo, el 99% de todos los sitios web clásicos todavía no lo necesitan. No obstante, las herramientas basadas en IA están dando lugar a un número creciente de aplicaciones individuales, como aplicaciones web, APIs o automatizaciones. nuonu.com es también una de estas aplicaciones, que amplía WordPress con sus propios plugins y ofrece así funciones muy individuales.

¿Por qué WordPress y DIVI?

WordPress ofrece una interfaz fácil de usar, una enorme selección de extensiones (plugins) y temas, así como una comunidad muy sólida. Ya sea un blog, una página corporativa, una landing page o una tienda online, con WordPress se pueden implementar casi todo tipo de sitios web. La instalación y configuración básica se realizan rápidamente, y gracias a constructores de páginas como DIVI, incluso los principiantes pueden crear diseños profesionales.

Ventajas de DIVI como constructor de páginas

DIVI se distingue de muchos otros constructores de páginas porque puede utilizarse como un tema + constructor completo y no requiere un tema adicional. Esto significa:

• Diseño completo de una sola fuente – sin dependencias de temas adicionales.
• Opciones de diseño flexibles con un editor visual de arrastrar y soltar.
• Posibilidades de edición del lado del cliente directamente en la página (edición frontend).
• Excelente adaptación responsiva para dispositivos de escritorio, tabletas y móviles.
• Diseños y módulos predefinidos que aceleran significativamente la creación de nuevas páginas.

Novedad: DIVI 5 – Rendimiento y seguridad futura

DIVI 5 es más que una actualización normal: el constructor ha sido completamente reconstruido internamente y se ha asentado sobre una base moderna y mucho más ligera. Esto garantiza tiempos de carga notablemente más rápidos, menos código redundante y una mejor base para futuras funciones.

• Nuevo sistema central, más ligero – el constructor ha sido desarrollado desde cero y funciona de manera más eficiente en el uso de recursos.
• Tiempos de carga más rápidos y editor más reactivo – especialmente las páginas complejas con muchos módulos se benefician de la nueva arquitectura.
• Menos shortcodes, código más limpio – esto facilita el mantenimiento a largo plazo, la migración y tiene un impacto positivo en el SEO.
• Nuevas funciones de diseño como variables de diseño, unidades extendidas, filas anidadas y puntos de interrupción ajustables individualmente para diseños responsivos aún más precisos.
• Mejor manejo de grandes proyectos – DIVI 5 está diseñado para sitios web extensos con muchas plantillas, elementos globales y diseños de biblioteca.

Estado actual con nosotros: La página nuonu.com ya está funcionando con la beta de DIVI 5. Todos los proyectos de clientes que actualmente se implementan con DIVI 4 podrán migrarse de forma gradual y controlada después del lanzamiento final de DIVI 5, idealmente primero en un entorno de staging. De esta manera, las páginas existentes se mantienen estables, pero pueden aprovechar las ventajas de rendimiento y comodidad de la nueva versión tan pronto como sea sensato y seguro.

La estructura general de los sitios web modernos

Los sitios web actuales están claramente estructurados, son llamativos y, sobre todo, deben ser responsivos. Los siguientes aspectos son cruciales:

• Colores y fuentes deben coincidir consistentemente con el diseño corporativo.
• Logotipo y espaciado deben integrarse armoniosamente en el diseño.
• Encabezado y menú individuales para una navegación intuitiva.
• Pie de página estructurado, que contenga enlaces legales, perfiles de redes sociales y opciones de contacto.
• Definir página de inicio, para que la página principal se establezca a través de “Ajustes > Lectura”.

Requisitos legales: Aviso legal, protección de datos y consentimiento de cookies

Cada sitio web necesita un aviso legal y una política de privacidad. Además, se requiere una herramienta de consentimiento de cookies funcional para cumplir con el RGPD y la TTDSG. Un ejemplo de esto es Reel Cookie Consent, que puede probarse y ampliarse con scripts propios para, por ejemplo, integrar Matomo de forma compatible con el RGPD.

Uso de Matomo en subdominio

Matomo puede operarse tanto en el dominio principal como en un subdominio. Las ventajas de usar un subdominio son:

• Mejor control y seguridad de datos – los datos permanecen completamente en tu propio servidor.
• Configuración respetuosa con la privacidad, ya que los datos no se transmiten a terceros.
• Opciones de exclusión voluntaria para los usuarios, para cumplir con los requisitos del RGPD.

Plugins obligatorios para un sitio web de WordPress

Para un sitio de WordPress profesional y funcional, ciertos plugins son, desde nuestro punto de vista, casi indispensables (la lista puede variar, por supuesto, según el proyecto):

• RankMath – Plugin SEO con soporte de esquema, redirecciones y muchas ayudas on-page
• Happy Files – Gestión de archivos con carpetas para medios, entradas, páginas y mucho más.
• Reel Cookie Consent – Gestión de cookies (o alternativas como Real Cookie Banner, Borlabs Cookie o Complianz)
• DIVI Supreme – Módulos y efectos avanzados para DIVI
• WP Armour – Protección contra spam en formularios
• AIOS (All in One Security) – Completo plugin de seguridad para el endurecimiento de inicio de sesión, sistema de archivos y firewall

Configuración de seguridad en WordPress

Después de la instalación, la configuración de seguridad debe optimizarse inmediatamente:

• Activar AIOS y WP Armour para proteger contra ataques de fuerza bruta, spam y ataques de bots simples.
• Cambiar el nombre de usuario de administrador predeterminado para dificultar los ataques dirigidos.
• Autenticación de dos factores para mayor seguridad (opcional, pero recomendada).
• Configurar copias de seguridad regulares (por ejemplo, con Duplicator, UpdraftPlus o BackWPup) y probar la restauración.

Ajuste de la configuración de medios de WordPress

Por defecto, WordPress guarda los medios en carpetas divididas por meses. Esto es útil para blogs, pero a menudo poco práctico para sitios web corporativos. Por lo tanto, se recomienda desactivar la estructura de carpetas automática en “Ajustes > Medios” y organizar la biblioteca de medios con una herramienta como Happy Files.

Fase de diseño después de la instalación básica

Después de la instalación básica, comienza el diseño real:

• Definir colores, fuentes y espaciado – globalmente en DIVI como base de diseño (o adicionalmente en DIVI 5 a través de variables de diseño).
• Crear un encabezado y menú individuales para una navegación intuitiva.
• Personalizar el pie de página, que contenga el aviso legal, la política de privacidad, enlaces a redes sociales y opciones de contacto.
• Hacer clicables los números de teléfono con tel: y las direcciones de correo electrónico con mailto:.
• Crear la página de inicio y luego establecerla como página principal en “Ajustes > Lectura”.

Con esta estructura, los clientes obtienen una guía clara para construir su sitio web de forma moderna, legalmente segura y funcional. Si se necesitan ajustes adicionales, los plugins y herramientas mencionados pueden configurarse individualmente.

Proceso de desarrollo conjunto

Para nosotros es importante que el cliente, si lo desea, participe en el desarrollo lo antes posible. Esto incluye la decisión y aprobación de la apariencia visual, así como la creación de páginas, menús, el mantenimiento de datos SEO, la carga de medios y mucho más. Cuanto más pueda hacer el cliente por sí mismo, mejor, y más fácil será el mantenimiento independiente más adelante.

Logotipo y Favicon

A menudo, no existen diseños propios o están desactualizados. En este caso, también creamos logotipos y favicons como archivo vectorial y PNG transparente. Gracias a Midjourney e Illustrator, podemos ofrecer una selección de logotipos 2D y 3D si lo deseas. También nos encargamos de la búsqueda de nombres, incluyendo la verificación y el registro de dominios libres o su traslado.

Enlaces de Redes Sociales

DIVI incluye su propio módulo con logotipos ya preparados y legalmente seguros de muchos proveedores de redes sociales. También en el panel de control, en DIVI > Opciones del Tema, se pueden almacenar enlaces globales. También puedes ver un encabezado con logotipo, menú y pie de página personalizado en esta página.

Creación de Contenido SEO

A partir de ahora, comenzamos a crear página por página, y RankMath debe tenerse en cuenta de inmediato. Título, descripción, og:image, h1, h2, h3… Encabezados y textos amigables para SEO y fáciles de leer con resaltados significativos, así como material visual expresivo y bien optimizado. SEO first significa: el contenido se adapta no solo a los visitantes, sino también a los motores de búsqueda y las redes sociales. Lo que debes considerar y las herramientas que necesitas para ello, lo encontrarás en la guía de nuestra Estrategia SEO.

Finalización de todos los contenidos y datos SEO

La creación puede llevar diferente tiempo por página. Algunas páginas requieren configuraciones adicionales, como formularios y su envío seguro a través de SSL o ajustes especiales de seguimiento/consentimiento. En promedio, se debe calcular aproximadamente una hora o más por página. Solo cuando todas las páginas estén terminadas y el último enlace haya sido probado, el sitio estará listo para una prueba en vivo.

Fase de prueba con optimizaciones de rendimiento

Un sitio web terminado es siempre una experiencia, pero ahora debe ser probado exhaustivamente. Verificamos:

• todos los enlaces internos y externos,
• todas las recomendaciones de RankMath,
• la visualización en redes sociales (por ejemplo, con el depurador de Facebook / depuradores de URL),
• los tiempos de carga con pruebas de velocidad (por ejemplo, PageSpeed Insights, GTmetrix, WebPageTest).

Solo cuando todos los errores hayan sido eliminados y el sitio web convenza en las pruebas de rendimiento, se lanzará finalmente en vivo.

Generación de Sitemap y registro en Google Search Console

El acto final de la creación es el registro en Google Search Console. El sitemap generado por RankMath o WordPress se deposita para que Google pueda indexar todos los contenidos relevantes de forma estructurada.

Monitorización a corto y largo plazo

Después de unos días, la página debería aparecer en los resultados de búsqueda. Con site:domain.de o directamente en Google Search Console, verificamos si todos los contenidos importantes han sido realmente indexados. A más tardar ahora, cualquier error debería ser detectado y corregido.

A partir de ahora, también podemos visitar regularmente nuestro subdominio de Matomo y evaluar el éxito del sitio en vivo. Dependiendo del interés de los visitantes, se pueden ampliar los contenidos, afinar los términos de búsqueda y crear nuevas landing pages. De esta manera, el sitio web no permanece estático, sino que evoluciona con los objetivos de la empresa.

Entrada de Google Business

Quien se encarga de la creación y optimización de sitios web, también debería echar un vistazo a Google Business, Maps, Imágenes, Videos, Noticias, etc. Somos proveedores de servicios y también somos responsables de los datos que un visitante ve. A menudo, son precisamente estos datos los que hacen que un visitante se fije en el sitio web o realice una llamada.