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 ora alimenta circa il 43% di tutti i siti web a livello mondiale, 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 rapido accesso a tutti gli utenti e, in particolare, agli 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, prestazioni), non c'è motivo per un completo rifacimento. In generale, i siti web durano solitamente 4-6 anni prima di essere radicalmente ridisegnati.

Hosting con all-inkl.com e simili

WordPress in linea di principio non richiede molto. PHP e MySQL/MariaDB sono sufficienti, e così i siti WordPress sono eseguibili praticamente con tutti i provider. Tuttavia, oggi ci si aspetta qualcosa di più – per 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 effettuare impostazioni DNS personalizzate
• 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 eccellente supporto. Chi vuole solo ospitare sistemi CMS è servito al meglio.

Chi necessita di MongoDB, Node.js o Express dovrebbe affittare 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. Tuttavia, grazie agli strumenti basati sull'IA, 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 completo + builder 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 – Prestazioni e 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 base migliore per le funzionalità future.

• Nuovo sistema core snello – il builder è stato sviluppato da zero e lavora 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 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 implementati 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 prestazioni 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, accattivanti 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 homepage, in modo che la pagina principale sia impostata tramite "Impostazioni > Lettura".

Requisiti legali: Impronta, 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 su 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.
• Possibilità di opt-out personalizzate 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ò naturalmente variare a seconda del progetto):

• RankMath – Plugin SEO con supporto Schema, reindirizzamenti 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 il rafforzamento di login, filesystem 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.
• Cambiare il nome utente admin standard, 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 header & menu personalizzati, per rendere la navigazione intuitiva.
• Personalizzare il footer, che contiene impronta, protezione dei dati, link ai social media e opzioni 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 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, i caricamenti multimediali 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 aggiornati o propri. 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 inserire 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 per pagina – tenendo subito conto di RankMath. 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 Prestazioni

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 nei social network (ad es. con il debugger di Facebook / debugger URL),
• 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 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 indicizzare 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 di siti 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.