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 i 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 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 l'apprendimento a causa di TypoScript e quindi non offrono un avvio rapido 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 di solito durano circa 4-6 anni prima di essere fondamentalmente ridisegnati.

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 di più – ad esempio:

• un dominio di sviluppo/staging
• gestione e-mail confortevole
• certificati LetsEncrypt per HTTPS inclusivo di rinnovo automatico
• accessi FTP/SFTP o file manager web
• backup automatici e ripristino semplice
• supporto rapido e gratuito
• memoria RAM sufficiente e versioni PHP aggiornate (es. 8.1/8.2+)
• la possibilità di effettuare impostazioni DNS personalizzate
• un trasferimento rapido 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 di pacchetto 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. Grazie agli 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 plugin personalizzati e offre così funzioni 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 per il fatto che 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 visuale drag-and-drop.
• Possibilità di editing lato client direttamente sulla pagina (frontend-editing).
• 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 e Sicurezza Futura

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

• Nuovo sistema core snello – il builder è stato sviluppato da zero e opera con un minore consumo di risorse.
• Tempi di caricamento più rapidi e 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 regolabili individualmente per layout responsive ancora più precisi.
• Migliore gestione di progetti di grandi dimensioni – 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 possono 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 rimangono stabili, ma possono sfruttare i vantaggi di performance e comfort della nuova versione non appena sia sensato 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 e caratteri dovrebbero essere coerenti con la corporate identity.
• Logo e spaziature devono essere integrati armoniosamente nel layout.
• Header e menu personalizzati per una navigazione intuitiva.
• Footer strutturato, che contiene link legali, profili social media e possibilità di contatto.
• Definire la homepage, in modo che la pagina principale sia impostata tramite “Impostazioni > Lettura”.

Requisiti legali: Imprint, Protezione dei dati e 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 e ampliato 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 e sicurezza – i dati rimangono completamente sul proprio server.
• Configurazione rispettosa della privacy, poiché i dati non vengono trasmessi a terzi.
• Possibilità di opt-out personalizzate per gli utenti, per soddisfare i requisiti del GDPR.

Plugin obbligatori per un sito web WordPress

Per un sito WordPress professionale e funzionale, alcuni plugin sono a nostro avviso quasi indispensabili (l'elenco può naturalmente 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, filesystem e firewall

Configurazione di sicurezza in WordPress

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

• Attivare AIOS e WP Armour per la protezione contro attacchi brute-force, spam e semplici attacchi bot.
• Cambiare il nome utente admin predefinito per rendere più difficili gli attacchi mirati.
• Autenticazione a due fattori per maggiore sicurezza (opzionale, ma consigliata).
• Configurare 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 e spaziature – in DIVI globalmente come base di design (o in DIVI 5 anche tramite variabili di design).
• Creare header e menu personalizzati per rendere la navigazione intuitiva.
• Personalizzare il footer, che contiene imprint, protezione dei dati, link ai social media e possibilità di contatto.
• Rendere cliccabili i numeri di telefono con tel: e gli indirizzi e-mail con mailto:.
• Creare la homepage e poi 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 più presto 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, i caricamenti multimediali e molto altro. Più il cliente può fare da sé, 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 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 possono essere memorizzati link globali. Header con logo, menu e footer personalizzato li potete vedere anche su questa pagina.

Creazione di contenuti SEO

Da ora in poi, iniziamo a creare pagina per pagina – e RankMath deve essere considerato immediatamente. Titolo, Descrizione, og:image, h1, h2, h3 … Titoli e testi SEO-friendly e facilmente leggibili con evidenziazioni significative, oltre a materiale illustrativo significativo 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 calcolare 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

Una pagina finita è sempre un'esperienza – ma ora deve essere testata a fondo. Verifichiamo:

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

Solo quando tutti gli errori sono stati eliminati e la pagina convince nei test di performance, viene finalmente messa online.

Generazione 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, in modo che Google possa acquisire tutti i contenuti rilevanti in modo strutturato.

Monitoraggio a breve e lungo termine

Dopo alcuni giorni, la pagina 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 il successo del sito in tempo reale. 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 dei dati che un visitatore vede. Spesso sono proprio questi dati che attirano l'attenzione di un visitatore sul sito web o che innescano una chiamata.