WordPress Sviluppo Avanzato — Custom Theme, Plugin, REST API e Gutenberg • Meteora Web Agency

Come sviluppare un child theme WordPress senza rischi?

Partiamo da uno scenario concreto: hai un tema che funziona bene, ma devi personalizzare una pagina, aggiungere uno script o modificare un template. Se tocchi i file del tema padre, al prossimo aggiornamento perdi tutto. La soluzione è il child theme. Noi, di Meteora Web, lo consideriamo obbligatorio su ogni progetto custom.

Un child theme è una cartella minima che eredita stili e funzionalità del tema padre, ma ti permette di sovrascrivere solo ciò che serve. Struttura consigliata:

/wp-content/themes/tuo-tema-figlio/
│   style.css (con Template: nome-tema-padre)
│   functions.php
│   screenshot.png

Il style.css deve avere l'intestazione corretta:

/*
Theme Name: Nome Child
Template: nome-del-tema-padre
*/

In functions.php carica lo stile padre con wp_enqueue_style e poi aggiungi le tue sovrascritture. Mai usare @import nel CSS: rallenta il rendering. Questo approccio ti dà un ambiente sicuro per modifiche e aggiornamenti. Cosa fare adesso: se non hai un child theme, crealo in 10 minuti. Il tuo sito ti ringrazierà.

Perché i Custom Post Types e le Taxonomy sono la base di un CMS flessibile?

WordPress nasce per i blog, ma con i Custom Post Types (CPT) e le tassonomie personalizzate diventa un CMS enterprise. Usare plugin come Custom Post Type UI è comodo, ma noi preferiamo registrare i CPT direttamente nel tema o in un plugin mu. Questo garantisce performance migliori e nessun blocco se il plugin viene disattivato.

Registrare un CPT "Prodotto" con tassonomia "Categoria Prodotto" si fa con register_post_type() e register_taxonomy() dentro una funzione agganciata a init. Esempio:

function crea_cpt_prodotto() {
    register_post_type('prodotto', array(
        'labels' => array('name' => 'Prodotti', 'singular_name' => 'Prodotto'),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'rewrite' => array('slug' => 'prodotti')
    ));
}
add_action('init', 'crea_cpt_prodotto');

Per aggiungere un meta box personalizzato (ad esempio "Prezzo") usa add_meta_box e salva con save_post. Questo ti libera da plugin extra e rende il dato nativo. Errore comune: dimenticare di aggiornare i permalink dopo aver cambiato gli slug. Vai su Impostazioni -> Permalink e clicca "Salva" senza modifiche per flushare le rewrite rules. Cosa fare adesso: analizza la struttura informativa del tuo progetto e registra i CPT senza plugin. Pochi minuti di codice, anni di flessibilità.

Come usare la WordPress REST API per applicazioni headless?

La WordPress REST API trasforma il tuo sito in un backend puro per app React, Vue o mobile. È nativa dal 4.7, e noi l'abbiamo usata per costruire un'app di prenotazione per una palestra: frontend in Vue, dati via API, zero pagine PHP custom.

Endpoint base: /wp-json/wp/v2/posts. Puoi estendere l'API registrando route personalizzate con register_rest_route() in functions.php. Esempio per leggere prodotti con prezzo:

add_action('rest_api_init', function () {
    register_rest_route('mio/v1', '/prodotti/(?P<id>\d+)', array(
        'methods' => 'GET',
        'callback' => function ($data) {
            $post = get_post($data['id']);
            $price = get_post_meta($data['id'], '_prezzo', true);
            return array('title' => $post->post_title, 'price' => $price);
        },
        'permission_callback' => '__return_true'
    ));
});

Attenzione alla sicurezza: mai esporre dati sensibili con __return_true in produzione. Usa autenticazione JWT o OAuth. Noi preferiamo JWT tramite plugin JWT Authentication for WP-API (o sviluppiamo un nostro endpoint). Cosa fare adesso: se devi integrare WordPress con un frontend moderno, inizia con gli endpoint nativi: testali con curl o Postman. Poi estendi se necessario.

Come creare blocchi Gutenberg personalizzati con React?

Gutenberg non è solo un editor testuale. Con i blocchi personalizzati puoi creare componenti visuali custom per i tuoi clienti. Noi abbiamo realizzato blocchi per griglie di prodotti, mappe interattive e call-to-action dinamici.

Per sviluppare un blocco serve JavaScript moderno (React). Il modo più semplice è usare @wordpress/create-block dalla riga di comando:

npx @wordpress/create-block nome-blocco
cd nome-blocco
npm start

Questo genera uno scaffold con file src/index.js (definizione del blocco) e src/edit.js (editor React). Un blocco base per un riquadro con titolo personalizzabile:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('mio/riquadro', {
    title: 'Riquadro',
    icon: 'admin-page',
    category: 'layout',
    attributes: { content: { type: 'string' } },
    edit: ({ attributes, setAttributes }) => (
        <RichText value={attributes.content} onChange={(v) => setAttributes({content: v})} />
    ),
    save: ({ attributes }) => (<div className="riquadro">{attributes.content}</div>)
});

Attenzione: il save deve tornare HTML statico, non React, per garantire la portabilità del contenuto. Per blocchi dinamici (dati live), usa render_callback in PHP. Cosa fare adesso: installa Node.js, crea un blocco semplice e provalo. Il tempo investito nel blocchi personalizzati ripaga in flessibilità editoriale.

Come sfruttare gli hooks WordPress per modificare qualsiasi cosa?

Gli hooks (action e filter) sono il cuore modulare di WordPress. Senza toccare i file core, puoi modificare output, aggiungere funzionalità o integrare servizi esterni. Noi li usiamo quotidianamente: ad esempio abbiamo aggiunto un campo extra al checkout di WooCommerce con woocommerce_after_order_notes.

Le action eseguono funzioni in punti specifici del ciclo di WordPress. I filter modificano valori prima dell'output. Esempio classico: aggiungere un Read More personalizzato al riassunto del post:

add_filter('excerpt_more', function($more) {
    return '... <a href="'.get_permalink().'">Leggi tutto</a>';
});

Per rimuovere uno style di default (es. da un plugin), usa remove_action o remove_filter con priorità corretta. Best practice: dichiara i tuoi hook in functions.php del child theme, raggruppandoli per funzionalità. Evita callback anonimi se devi rimuoverli. Cosa fare adesso: apri il tuo functions.php e cerca almeno un hook da utilizzare per migliorare il sito. La documentazione WordPress ha l'elenco completo.

WP-CLI: perché la riga di comando accelera lo sviluppo?

WP-CLI è un'interfaccia a riga di comando per gestire WordPress: installazioni, aggiornamenti, cron, utenti, search-replace nel database. Noi lo usiamo ogni giorno per deploy e manutenzione. Un esempio reale: abbiamo dovuto migrare un multisito con 30 subdomini. Con wp search-replace abbiamo cambiato vecchio dominio in nuovo in pochi secondi.

Comandi essenziali:

# Installare WordPress
wp core download --locale=it_IT
wp config create --dbname=miodb --dbuser=root --dbpass=
wp db create
wp core install --url=esempio.it --title=MioSito --admin_user=admin --admin_password=pass --admin_email=email@esempio.it

# Aggiornare plugin e temi
wp plugin update --all
wp theme update --all

# Cancellare cache transient
wp transient delete --all

Attenzione: usa wp search-replace solo su tabelle non serializzate, o passa --skip-columns=meta_value per evitare corruzione. Cosa fare adesso: installa WP-CLI sul tuo server o locale su wp-cli.org. Prova a eseguire wp core version. La produttività triplica.

WordPress Multisite: quando e come configurarlo per domini e sottodomini?

Il Multisite permette di gestire più siti da una sola installazione WordPress. Noi lo abbiamo usato per una rete di negozi locali di un brand di abbigliamento: ogni punto vendita aveva il proprio sottodominio (es. roma.miomarchio.it) con temi e plugin condivisi, ma contenuti separati.

Per attivarlo, aggiungi define('WP_ALLOW_MULTISITE', true); in wp-config.php. Poi vai su Strumenti -> Rete e scegli tra subdomini o sottodirectory. Dopo la configurazione, editare .htaccess e wp-config.php come indicato. Quando conviene? Se gestisci più siti con stessa base di temi/plugin e vuoi aggiornamenti centralizzati. Evitalo se i siti hanno esigenze di performance indipendenti o plugin incompatibili.

Problema comune: i plugin di cache spesso non gestiscono bene il multisite. Usa un approccio per-sito con Redis o WP Rocket con configurazione per dominio. Cosa fare adesso: valuta se il tuo progetto può beneficiare di un'installazione centralizzata. In caso affermativo, segui la documentazione ufficiale.

Come ottimizzare le performance di WordPress (caching, database, CDN)?

Un sito lento perde visitatori e fatturato. Noi partiamo sempre dall'analisi: Google PageSpeed, GTmetrix. Poi interveniamo su tre fronti: caching (server-side con Varnish o plugin come WP Rocket, cache del browser), ottimizzazione immagini (WebP con conversione automatica), database (pulizia revisioni, transients scaduti, indici).

Esempio concreto: un cliente e-commerce aveva immagini da 3 MB ciascuna. Ottimizzandole con compressione lossless abbiamo ridotto il peso del 60% senza perdita di qualità, e il tempo di caricamento è passato da 6 a 2 secondi. Per il database, esegui periodicamente:

DELETE FROM wp_posts WHERE post_type = 'revision';
OPTIMIZE TABLE wp_postmeta, wp_options;

Oppure usa WP-CLI: wp db optimize. Un CDN come Cloudflare o BunnyCDN accelera la distribuzione globale. Attenzione: la cache del server deve essere configurata per escludere pagine di checkout e aree dinamiche. Cosa fare adesso: testa il tuo sito con PageSpeed, segui i suggerimenti e considera un servizio di caching lato server. Non serve hardware costoso se il software è ottimizzato.

Quali sono le vulnerabilità più comuni e come proteggere un sito WordPress?

La sicurezza in WordPress è spesso sottovalutata. Le vulnerabilità tipiche che vediamo: XSS in plugin vecchi, SQL injection in query mal scritte, brute force su login, permessi file sbagliati. Noi adottiamo una checklist di hardening:

Disabilitare XML-RPC se non usato (aggiungi add_filter('xmlrpc_enabled', '__return_false');)
Cambiare prefisso tabelle da wp_ a qualcosa di univoco (solo su installazione nuova)
Limitare tentativi di login con plugin come Limit Login Attempts Reloaded
Usare permessi 644 per file, 755 per directory e impedire l'esecuzione di PHP in /wp-content/uploads con un .htaccess
Abilitare HTTPS con certificato configurato correttamente (no redirect loop)
Backup regolari con offsite storage (es. S3 o FTP criptato)

Un caso reale: un server client aveva il rinnovo dei certificati SSL scaduto. Intervenendo manualmente e automatizzando con certbot renew e cron, abbiamo risolto senza downtime. Cosa fare adesso: esegui un audit di sicurezza sul tuo WordPress. Se non l'hai fatto, inizia con la guida ufficiale all'hardening.

WordPress headless: conviene per il tuo progetto?

Headless WordPress significa usare WordPress solo come CMS per il backend e un frontend moderno (React, Vue, Next.js) per l'interfaccia pubblica. Noi abbiamo costruito piattaforme headless per clienti che volevano una SPA veloce e un editing comodo per i content manager.

Vantaggi: performance migliori (frontend statico, serverless), flessibilità di design, esperienza utente reattiva. Svantaggi: maggiore complessità di sviluppo (devi gestire routing, SEO, reidratazione dello stato), costi di hosting doppi e manutenzione più alta.

Quando sceglierlo? Se hai esigenze di esperienza utente molto avanzate (app mobile ibrida, siti con animazioni pesanti, multi-fonte dati). Per un sito business standard, un WordPress tradizionale con un buon tema custom e caching è spesso più veloce da realizzare e gestire. Cosa fare adesso: valuta il tuo progetto: se il frontend è semplice, resta su WordPress classico. Se hai bisogno di una web app, allora headless è la strada. In ogni caso, noi di Meteora Web consigliamo di partire con un proof-of-concept prima di investire risorse.

Cosa fare adesso: i prossimi passi pratici

Abbiamo visto che lo sviluppo WordPress avanzato non è solo codice: è scelta architetturale, conoscenza degli strumenti e attenzione ai dettagli. Ecco le azioni concrete che puoi eseguire subito:

Crea un child theme per ogni tema personalizzato: protegge gli aggiornamenti.
Registra CPT e tassonomie senza plugin: più controllo e performance.
Sperimenta con WP-CLI: esegui un comando ogni giorno per prenderci confidenza.
Esegui un audit di sicurezza seguendo la checklist sopra.
Misura le performance del tuo sito e applica almeno una ottimizzazione (immagini, caching).

Se questi concetti ti sembrano complessi, non preoccuparti. Noi di Meteora Web accompagniamo aziende dal 2017 dalla consulenza alla realizzazione: un unico interlocutore per dominio, hosting, sviluppo e manutenzione. Partiamo sempre dal problema concreto e dai numeri del cliente, perché un sito si misura in fatturato, non in complimenti.