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, empresas y particulares pueden mantener contenidos, adaptar 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, sigo viendo a menudo sitios TYPO3, pero estos requieren más formació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 forma 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 similares

WordPress, en principio, no necesita mucho. PHP y MySQL/MariaDB son suficientes, por lo que los sitios de WordPress pueden funcionar en 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 de correo electrónico cómoda
• certificados Let's Encrypt para HTTPS con renovación automática
• accesos FTP/SFTP o gestor de archivos web
• copias de seguridad automáticas y restauración sencilla
• soporte rápido y gratuito
• suficiente memoria RAM y versiones actuales de PHP (p. ej., 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 clic
• un asistente de instalación sencillo para WordPress y otros

Un proveedor preferido desde hace muchos años es all-inkl.com (enlace de afiliado), que convence con precios de paquete 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 de empresa, una landing page o una tienda online, con WordPress se pueden implementar casi todo tipo de sitios web. La instalación y la 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 responsive para ordenadores de escritorio, tabletas y dispositivos móviles.
• Diseños y módulos predefinidos que aceleran considerablemente 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 carga de código 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 cuanto a 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 responsive 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 funciona con la beta de DIVI 5. Todos los proyectos de clientes que hoy se implementan con DIVI 4 podrán migrarse de forma gradual y controlada tras el lanzamiento final de DIVI 5, idealmente primero en un entorno de staging. Así, los sitios existentes se mantendrán estables, pero podrán 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 responsive. Los siguientes aspectos son cruciales:

• Colores y fuentes deben coincidir consistentemente con la identidad corporativa.
• Logotipo y espaciado deben integrarse armoniosamente en el diseño.
• Encabezado y menú personalizados para una navegación intuitiva.
• Pie de página estructurado que contenga enlaces legales, perfiles de redes sociales y opciones de contacto.
• Definir la 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, es necesaria 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 ser probado y ampliado 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 los 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 propias 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 de SEO con soporte de Schema, 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) – Plugin de seguridad completo 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 protección 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 (p. ej., 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 encabezado y menú personalizados 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 más ajustes, 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 del aspecto 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 archivos vectoriales y PNG transparentes. 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 a Redes Sociales

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

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 gráfico expresivo y bien optimizado. SEO first significa: el contenido no solo se adapta a los visitantes, sino también a los motores de búsqueda y las redes sociales. Lo que debes tener en cuenta 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 durar diferente tiempo por página. Algunas páginas requieren configuraciones adicionales, como formularios y su envío seguro a través de SSL o configuraciones 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 (p. ej., con el depurador de Facebook / depuradores de URL),
• los tiempos de carga con pruebas de velocidad (p. ej., PageSpeed Insights, GTmetrix, WebPageTest).

Solo cuando todos los errores hayan sido eliminados y el sitio convenza en las pruebas de rendimiento, se pondrá finalmente en línea.

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 realmente se han indexado todos los contenidos importantes. 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 contenidos, afinar 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.

Ficha 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, Vídeos, Noticias, etc. Somos proveedores de servicios y también responsables de los datos que ve un visitante. A menudo, son precisamente estos datos los que hacen que un visitante se fije en el sitio web o que realice una llamada.