Sviluppo Web CMS con WordPress e DIVI, Programmazione Plugin

Introduzione a WordPress

I Content Management System (CMS) facilitano notevolmente la creazione e la gestione dei siti web. Senza conoscenze di programmazione, aziende e privati possono gestire contenuti, adattare il design e rendere i siti web interattivi. I CMS più noti sono WordPress, Joomla, Drupal, Contao e TYPO3, con WordPress che alimenta ormai circa il 43 % di tutti i siti web a livello globale, rendendolo di gran lunga il sistema più utilizzato.

Io stesso ho iniziato con Joomla, poi ho usato Contao e sono passato a WordPress per buone ragioni. Tra i miei clienti, nel settore professionale, vedo ancora spesso siti TYPO3, che però richiedono più tempo per essere appresi a causa di TypoScript e quindi non offrono un rapido avvio per tutti gli utenti e in particolare per gli sviluppatori web. È anche più difficile trovare qualcuno che si occupi di estensioni o manutenzione.

Finché i sistemi funzionano stabilmente e rispettano tutti i requisiti tecnici (versione PHP attuale, aggiornamenti di sicurezza, GDPR, performance), non c'è motivo per un completo rifacimento. In generale, i siti web durano solitamente 4–6 anni prima di essere ridisegnati da zero.

Hosting con all-inkl.com e simili

WordPress in linea di principio non richiede molto. PHP e MySQL/MariaDB sono sufficienti, e quindi i siti WordPress sono eseguibili praticamente con tutti i provider. Tuttavia, oggi ci si aspetta qualcosa in più – ad esempio:

• un dominio di sviluppo/staging
• gestione e-mail confortevole
• certificati Let's Encrypt per HTTPS con rinnovo automatico
• accessi FTP/SFTP o file manager web
• backup automatici e ripristino semplice
• supporto rapido e gratuito
• memoria sufficiente e versioni PHP aggiornate (ad es. 8.1/8.2+)
• la possibilità di configurare le proprie impostazioni DNS
• un rapido trasferimento e la fornitura di codici Auth con un clic
• un semplice assistente di installazione per WordPress e altro

Un provider preferito da molti anni è all-inkl.com (Link Affiliato), che convince con prezzi dei pacchetti molto equi e un supporto eccellente. Chi vuole ospitare solo sistemi CMS è servito al meglio.

Chi necessita inoltre di MongoDB, Node.js o Express dovrebbe noleggiare un proprio server/VPS o rivolgersi a provider che offrono queste funzionalità. Il 99 % di tutti i siti web classici, tuttavia, non ne ha ancora bisogno. Attraverso strumenti basati sull'IA, tuttavia, stanno emergendo sempre più applicazioni individuali – come web-app, API o automazioni. Anche nuonu.com è una di queste applicazioni, che estende WordPress con i propri plugin e offre così funzionalità molto individuali.

Perché WordPress e DIVI?

WordPress offre un'interfaccia user-friendly, una vasta selezione di estensioni (plugin) e temi, oltre a una community molto forte. Che si tratti di un blog, un sito aziendale, una landing page o un negozio online – con WordPress è possibile realizzare quasi tutti i tipi di siti web. L'installazione e la configurazione di base sono rapide, e grazie a page builder come DIVI, anche i non esperti possono creare layout professionali.

Vantaggi di DIVI come Page Builder

DIVI si distingue da molti altri page builder perché può essere utilizzato come tema + builder completo e non è necessario un tema aggiuntivo. Questo significa:

• Design completo da un'unica fonte – nessuna dipendenza aggiuntiva dal tema.
• Opzioni di design flessibili con un editor visivo drag-and-drop.
• Possibilità di modifica lato client direttamente sulla pagina (editing frontend).
• Eccellente adattamento responsive per desktop, tablet e dispositivi mobili.
• Layout e moduli predefiniti, che accelerano notevolmente la creazione di nuove pagine.

Novità: DIVI 5 – Performance & Sicurezza Futura

DIVI 5 è più di un normale aggiornamento: il builder è stato completamente ricostruito internamente e basato su fondamenta moderne e significativamente più snelle. Ciò garantisce tempi di caricamento notevolmente più rapidi, meno codice superfluo e una migliore base per le funzionalità future.

• Nuovo sistema core snello – il builder è stato sviluppato da zero e opera in modo più efficiente in termini di risorse.
• Tempi di caricamento più rapidi & editor reattivo – soprattutto le pagine complesse con molti moduli beneficiano della nuova architettura.
• Meno shortcode, codice più pulito – questo facilita la manutenzione a lungo termine, la migrazione e ha un impatto positivo sulla SEO.
• Nuove funzioni di design come variabili di design, unità estese, righe annidate e breakpoint personalizzabili per layout responsive ancora più precisi.
• Migliore gestione di grandi progetti – DIVI 5 è progettato per siti web estesi con molti template, elementi globali e layout di libreria.

Stato attuale da noi: Il sito nuonu.com è già in esecuzione sulla beta di DIVI 5. Tutti i progetti dei clienti che oggi sono realizzati con DIVI 4 potranno essere migrati gradualmente e in modo controllato dopo il rilascio finale di DIVI 5 – idealmente prima su un ambiente di staging. In questo modo, i siti esistenti rimarranno stabili, ma potranno beneficiare dei vantaggi in termini di performance e comfort della nuova versione non appena sarà opportuno e sicuro.

La struttura generale dei siti web moderni

I siti web odierni sono chiaramente strutturati, d'impatto e devono essere soprattutto responsive. I seguenti aspetti sono cruciali:

• Colori & Caratteri dovrebbero essere coerenti con l'immagine aziendale.
• Logo & Spazi devono essere integrati armoniosamente nel layout.
• Header & Menu personalizzati per una navigazione intuitiva.
• Footer strutturato, che contiene link legali, profili social media e opzioni di contatto.
• Definire la pagina iniziale, in modo che la pagina principale sia impostata tramite “Impostazioni > Lettura”.

Requisiti legali: Imprint, Protezione dei dati & Consenso ai cookie

Ogni sito web necessita di un'impronta e di una dichiarazione sulla protezione dei dati. Inoltre, è necessario uno strumento di consenso ai cookie funzionante per conformarsi al GDPR e al TTDSG. Un esempio è Reel Cookie Consent, che può essere testato ed esteso con script personalizzati, ad esempio per integrare Matomo in conformità al GDPR.

Utilizzo di Matomo in sottodominio

Matomo può essere gestito sia sul dominio principale che su un sottodominio. I vantaggi dell'utilizzo di un sottodominio sono:

• Migliore controllo dei dati & Sicurezza – i dati rimangono completamente sul proprio server.
• Configurazione rispettosa della privacy, poiché i dati non vengono trasmessi a terzi.
• Proprie opzioni di opt-out per gli utenti, per soddisfare i requisiti del GDPR.

Plugin obbligatori per un sito WordPress-

Per un sito WordPress professionale e funzionale, alcuni plugin sono a nostro avviso quasi indispensabili (l'elenco può ovviamente variare a seconda del progetto):

• RankMath – Plugin SEO con supporto Schema, redirect e molti aiuti on-page
• Happy Files – Gestione file con cartelle per media, articoli, pagine e molto altro
• Reel Cookie Consent – Gestione dei cookie (o alternative come Real Cookie Banner, Borlabs Cookie o Complianz)
• DIVI Supreme – Moduli ed effetti avanzati per DIVI
• WP Armour – Protezione dallo spam dei moduli
• AIOS (All in One Security) – Plugin di sicurezza completo per la protezione di login, file system e firewall

Configurazione di sicurezza in WordPress

Dopo l'installazione, le impostazioni di sicurezza dovrebbero essere ottimizzate immediatamente:

• Attivare AIOS & WP Armour per la protezione contro attacchi brute-force, spam e semplici attacchi bot.
• Modificare il nome utente admin predefinito, per rendere più difficili gli attacchi mirati.
• Autenticazione a due fattori per maggiore sicurezza (opzionale, ma consigliata).
• Impostare backup regolari (ad es. con Duplicator, UpdraftPlus o BackWPup) e testare il ripristino.

Personalizzazione delle impostazioni media di WordPress

Per impostazione predefinita, WordPress salva i media in cartelle suddivise per mese. Questo è utile per i blog, ma spesso poco pratico per i siti web aziendali. Si consiglia quindi di disattivare la struttura automatica delle cartelle in “Impostazioni > Media” e di organizzare invece la libreria multimediale con uno strumento come Happy Files.

Fase di design dopo l'installazione di base

Dopo l'installazione di base, inizia la vera e propria progettazione:

• Definire colori, caratteri & spazi – in DIVI globalmente come base di design (o in DIVI 5 aggiuntivamente tramite variabili di design).
• Creare un header & menu personalizzati, per rendere la navigazione intuitiva.
• Personalizzare il footer, che contiene l'impronta, la protezione dei dati, i link ai social media e le opzioni di contatto.
• Rendere cliccabili i numeri di telefono con tel: e gli indirizzi e-mail con mailto:.
• Creare la pagina iniziale e successivamente impostarla come pagina principale in “Impostazioni > Lettura”.

Con questa struttura, i clienti ricevono una chiara guida per costruire il loro sito web in modo moderno, legalmente sicuro e funzionale. Se fossero necessarie ulteriori personalizzazioni, i plugin e gli strumenti menzionati possono essere configurati individualmente.

Processo di sviluppo congiunto

Per noi è importante coinvolgere il cliente – se lo desidera – il prima possibile nello sviluppo. Questo riguarda la decisione e l'approvazione dell'aspetto visivo, ma anche la creazione di pagine, menu, la gestione dei dati SEO, il caricamento dei media e molto altro. Più il cliente può fare da solo, meglio è – e più facile sarà la gestione autonoma in seguito.

Logo e Favicon

Spesso non sono disponibili design propri o sono obsoleti. In questo caso, creiamo anche loghi e favicon come file vettoriali e PNG trasparenti. Grazie a Midjourney e Illustrator, possiamo fornire una selezione di loghi 2D e 3D su richiesta. Ci occupiamo anche della ricerca del nome, inclusa la verifica e la registrazione di domini liberi o il loro trasferimento.

Link ai Social Media

DIVI include un proprio modulo con loghi già pronti e legalmente sicuri di molti fornitori di social media. Anche nella dashboard, sotto DIVI > Opzioni Tema, è possibile salvare link globali. Header con logo, menu e footer personalizzato sono visibili anche su questa pagina.

Creazione di contenuti SEO

Da ora in poi, iniziamo a creare pagina dopo pagina – e RankMath deve essere immediatamente preso in considerazione. Titolo, Descrizione, og:image, h1, h2, h3 … titoli e testi SEO-friendly e di facile lettura con evidenziazioni significative, oltre a materiale illustrativo espressivo e ben ottimizzato. SEO first significa: il contenuto è personalizzato non solo per i visitatori, ma anche per i motori di ricerca e i social media. Cosa considerare e quali strumenti sono necessari, lo trovate nella guida della nostra Strategia SEO.

Finalizzazione di tutti i contenuti e dati SEO

La creazione può richiedere tempi diversi per ogni pagina. Alcune pagine richiedono configurazioni aggiuntive, come moduli e il loro invio sicuro tramite SSL o impostazioni speciali di tracciamento/consenso. In media, si deve prevedere circa un'ora o più per pagina. Solo quando tutte le pagine sono complete e l'ultimo link è stato testato, il sito è pronto per un test dal vivo.

Fase di test con ottimizzazioni delle performance

Un sito web finito è sempre un'esperienza – ma ora deve essere testato a fondo. Verifichiamo:

• tutti i link interni ed esterni,
• tutte le raccomandazioni di RankMath,
• la visualizzazione sui social network (ad es. con il Facebook Debugger / URL Debugger),
• i tempi di caricamento con speed test (ad es. PageSpeed Insights, GTmetrix, WebPageTest).

Solo quando tutti gli errori sono stati eliminati e il sito convince nei test di performance, viene finalmente messo online.

Generazione della Sitemap e registrazione nella Google Search Console

L'atto finale della creazione è la registrazione nella Google Search Console. La sitemap generata da RankMath o WordPress viene depositata affinché Google possa acquisire tutti i contenuti rilevanti in modo strutturato.

Monitoraggio a breve e lungo termine

Dopo alcuni giorni, il sito dovrebbe apparire nei risultati di ricerca. Con site:domain.de o direttamente nella Google Search Console, verifichiamo se tutti i contenuti importanti sono stati effettivamente elencati. Al più tardi ora, eventuali errori dovrebbero essere notati e corretti.

Da ora in poi, possiamo anche visitare regolarmente il nostro sottodominio Matomo e valutare in tempo reale il successo del sito. A seconda dell'interesse dei visitatori, i contenuti possono essere ampliati, i termini di ricerca affinati e nuove landing page create. In questo modo, il sito web non rimane statico, ma si evolve con gli obiettivi dell'azienda.

Scheda Google Business

Chi si occupa della creazione e ottimizzazione del sito web dovrebbe dare un'occhiata anche a Google Business, Maps, Immagini, Video, Notizie ecc... Siamo fornitori di servizi e siamo anche responsabili di quali dati un visitatore vede. Spesso sono proprio questi dati che attirano l'attenzione di un visitatore sul sito web o che innescano una chiamata.