Link relativi nei menu WordPress: perché usarli e 4 modi sicuri per implementarli (classico & block theme)

Se gestisci ambienti di staging/produzione, domini multipli o un reverse proxy/CDN davanti al sito, ti sarà capitato di voler inserire link relativi nei menu WordPress (es. /contatti/) invece dei classici URL assoluti (es. https://tuodominio.it/contatti/). WordPress, di default, salva i Custom Link dei menu come assoluti. La buona notizia è che puoi rendere l’output relativo senza stravolgere il database e senza plugin pesanti: basta un piccolo filtro PHP.

In questo articolo vediamo perché potrebbe convenire, i pro/contro, e tre soluzioni pratiche:

1. applicare la conversione a tutti i link interni del menu (temi classici);

2. applicarla solo ad alcune voci contrassegnate (temi classici);

3. gestire la stessa logica anche con il Navigation Block dei block theme (FSE).

✅ Perché puntare ai link relativi

• Portabilità tra ambienti: spostare il dump del DB da staging.tuodominio.it a www.tuodominio.it senza dover fare search & replace sugli URL del menu.

• Domini per lingua (WPML/Polylang): se la stessa struttura vive su example.it e example.com, i relativi riducono il rischio di puntare al dominio sbagliato.

• Reverse proxy/CDN: dietro Cloudflare, Varnish o un proxy aziendale, i relativi evitano incongruenze tra schema/host.

• Headless/static: anche in pipeline di rendering statico (prerender) sono spesso preferibili.

Valida per i menu generati con wp_nav_menu() (Appearance → Menù). Inserisci questo snippet nel functions.php del tema child o in un mini-plugin “site-specific”:

Come funziona:

• Lascia intatti mailto:, tel:, #ancora, link esterni e tutto ciò che non è http/https.

• Converte solo i link che iniziano con home_url() nel relativo corrispondente (es. https://site.it/percorso/ → /percorso/).

• Funziona anche se WordPress è in sottocartella: wp_make_link_relative() rispetta il path di home_url().

Quando usarla: vuoi un comportamento coerente sul sito intero e tutti i link di menu interni devono diventare relativi.

Più flessibile: decidi tu, voce per voce.

1. Vai in Aspetto → Menu → Opzioni schermo (in alto a destra) e abilita Classi CSS.

2. Nella voce di menu che vuoi relativa, inserisci la classe: relative-link.

3. Aggiungi questo snippet al functions.php:

Vantaggi: controllo granulare, utile in siti multilingua con domini diversi, dove potresti voler lasciare alcune voci assolute (es. link alla lingua alternativa con altro dominio) e altre relative.

Se usi un block theme e il menu è costruito con il Navigation Block, il rendering passa dai blocchi core/navigation e core/navigation-link. Qui non interviene wp_nav_menu(), quindi useremo un filtro sui blocchi per intercettare gli URL prima del render.

Conversione globale sui link di navigazione

Solo su link marcati (consigliato)

Puoi usare l’attributo className del blocco Navigation Link per aggiungere relative-link, e convertire solo quelli:

👉 Nota: queste soluzioni agiscono solo in output. Nel database gli URL rimangono comodi e leggibili in forma assoluta.

• Ancora nella pagina (#sezione): già relativi, non vanno toccati.

• Query string e hash (/page/?ref=menu#cta): wp_make_link_relative() conserva query e frammento.

• Link esterni: restano assoluti; è voluto.

• Multilingua con domini distinti: la conversione avviene solo per il dominio corrente, così non “rompi” link verso le altre lingue. Con l’Opzione 2/3 puoi decidere voce per voce.

• Prestazioni: il costo del filtro è trascurabile; se vuoi essere ultra-paranoico, metti un semplice cache delle verifiche sul home_url().

• Sicurezza: non stai alterando destinazioni esterne, solo normalizzando gli interni.

• Compatibilità: funziona da anni perché usa API core (home_url, wp_make_link_relative, filtri standard).

Se non usi un tema child la soluzione migliore è non toccare il tema e creare un plugin leggerissimo:

1. Crea una cartella in wp-content/plugins/ dal nome Relative Menu Links

2. Crea un file relative-menu-links.php dentro questa cartella

3. Inserisci questo codice nel file:

4. Attivalo da Plugin → Attiva.

I link relativi nei menu non sono un vezzo: in molti flussi di lavoro moderni (ambienti multipli, proxy/CDN, domini per lingua, headless) sono una piccola ottimizzazione che ti evita grossi mal di testa. La strategia migliore dipende dal tuo setup:

• Sito “classico” su un solo dominio? Usa l’Opzione 1 e non ci pensi più.

• Multilingua o esigenze miste? Preferisci l’Opzione 2 con classe relative-link e decidi voce per voce.

• Block theme con Navigation Block? Applica l’Opzione 3: globale o selettiva via className.

• Non usi tema child? Applica l’Opzione 4.

Comunque tu scelga, ricorda: la conversione avviene in fase di render. Nel database i menu restano con URL assoluti, chiari e compatibili con gli strumenti di migrazione. E con due righe di codice, ti metti al riparo da problemi futuri.