Nonostante il nome banale, i bredcrumb sono uno strumento molto utile per migliorare l’esperienza utente del vostro sito (UX) e l’ottimizzazione per i motori di ricerca (SEO). Attivarli è semplice con l’aiuto di un plugin o con del codice personalizzato.

In questo articolo vi presentiamo i breadcrumb di WordPress e vi spiegheremo come funzionano. Vi mostreremo come aggiungerli al vostro sito, come dargli uno stile e come rimuoverli. C’è molto da dire, quindi cominciamo subito!

Cosa Sono i Breadcrumb di WordPress

I breadcrumb, per quanto riguarda WordPress (o qualsiasi sito web), sono link di navigazione che compaiono nella parte superiore di un post o di una pagina. Mostrano agli utenti le categorie di livello superiore che li hanno condotti al contenuto che stanno visualizzando in quel momento e consentono anche di tornare facilmente alle pagine visualizzate in precedenza.

Considerate il seguente esempio:

I Breadcrumb sul blog di Kinsta

I Breadcrumb sul blog di Kinsta

Sul lato sinistro, proprio sotto l’intestazione, potete vedere le parole Home > Resource Center > Kinsta Blog. Ognuna di queste è un link alla pagina corrispondente. Ciò consente ai lettori del nostro blog di accedere a una di queste aree chiave di contenuto con un solo clic, invece di utilizzare il pulsante Indietro, il menu o la funzione di ricerca.

È così che i breadcrumb hanno preso il loro nome: creano una traccia che riporta gli utenti a ‘casa’. Sono particolarmente utili per siti come blog e negozi online, in cui i visitatori potrebbero volersi spostare tra singoli post, pagine di prodotti e archivi di categorie in cui possono trovare contenuti simili.

Come Funzionano i Breadcrumb in WordPress?

Ci sono tre diversi tipi di breadcrumb in WordPress. Tutti incorporano collegamenti di navigazione come descritto sopra, ma in modi leggermente diversi:

Ogni tipo di breadcrumb è utile per scopi diversi. Tuttavia, tutti possono migliorare la navigazione e di conseguenza la UX.

Sono anche utili ai fini della SEO. I breadcrumb mostrano chiaramente le relazioni tra i diversi contenuti del vostro sito. In questo modo, rendono più facile per i crawler o i “robot” dei motori di ricerca capire come è strutturato il sito.

Ciò consente a questi bot di indicizzare le pagine del sito in modo più accurato. I motori di ricerca possono anche mostrare i vostri breadcrumb negli elenchi dei risultati, così che gli utenti possano vedere contenuti aggiuntivi sul vostro sito relativi alle informazioni che stanno cercando.

Come Aggiungere i Breadcrumb al Vostro Sito WordPress (4 Metodi)

Che siate maghi della programmazione o principianti di WordPress, potete aggiungere rapidamente e facilmente i breadcrumb al vostro sito in pochi passaggi. Ecco quattro diversi modi in cui potreste raggiungere il vostro obiettivo.

1. Abilitare i Breadcrumb in Yoast SEO

Yoast SEO è un popolare plugin che aiuta gli utenti di WordPress a migliorare la propria posizione nelle classifiche dei motori di ricerca e ottimizzare i contenuti di conseguenza. Include anche alcune altre funzionalità per migliorare la visibilità del vostro sito, tra cui i breadcrumb.

Se non lo avete già fatto, installate e attivate il plugin nella dashboard di WordPress:

Installazione del plugin Yoast SEO

Installazione del plugin Yoast SEO

Di seguito, dovrete aggiungere questo snippet di codice al vostro tema:


<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Il posto in cui lo aggiungete dipende grosso modo da voi. Se volete utilizzare i breadcrumb nei post del vostro blog, potete aggiungerlo al template file single.php.

In alternativa, incollandolo alla fine del file header.php, aggiungerete i breadcrumb all’intero sito:

modifica header php

Aggiungere il codice di attivazione dei breadcrumb di Yoast

Tenete presente che i futuri aggiornamenti del tema potrebbero sovrascrivere questo codice personale. Dovrete contattare lo sviluppatore del tema per chiedere informazioni su come evitare questo problema, o semplicemente utilizzare un child theme. Una volta che lo snippet è al suo posto, andate su SEO > Aspetto della ricerca > Breadcrumbs nella vostra dashboard:

impostazioni breadcrumb Yoast

Le impostazioni dei breadcrumb di Yoast SEO

Impostate l’opzione Impostazioni dei Breadcrumbs su Abilitato. Quindi visualizzate l’anteprima del vostro sito:

esempio breadcrumb

Breadcrumb aggiunti con Yoast SEO

Ora dovreste vedere i breadcrumb nel vostro sito, in corrispondenza dell’area in cui avete aggiunto lo snippet di codice.

2. Abilitare i Breadcrumbs con un Plugin per i Breadcrumb di WordPress

Aggiungere i breadcrumb con Yoast è particolarmente utile se state già utilizzando quel plugin per la SEO. Tuttavia, ma se preferisce un plugin diverso per ottimizzare i vostri contenuti, l’approccio descritto sopra non è molto utile. Per fortuna, ci sono molti altri plugin a disposizione che hanno la funzione specifica di aggiungere i breadcrumb a WordPress.

Breadcrumb NavXT

Oltre a Yoast, Il plugin più popolare per aggiungere breadcrumb a WordPress è Breadcrumb NavXT:

breadcrumb navxt

Il plugin Breadcrumb NavXT

Questo plugin dispone di un widget di breadcrumb che potete aggiungere a qualsiasi area widget fornita dal vostro tema, come una barra laterale o un footer. È altamente personalizzabile e vi permette di scegliere le pagine e le categorie da visualizzare nel percorso. Breadcrumbs NavXT include anche schema markup per migliorare la SEO.

Per aggiungere i breadcrumb utilizzando questo plugin, andate su Aspetto > Widget. Vedrete un nuovo widget Breadcrumb NavXT, che dovrete trascinare nell’area del widget in cui desiderate che appaia:

widget di Breadcrumb NavXT

Aggiungere il widget di Breadcrumb NavXT al footer

Fate clic sulla freccia del menu a discesa per aprire le impostazioni del widget e quindi compilare i campi necessari:

campi breadcrumb navxt

Le opzioni del widget Breadcrumb NavXT

Selezionate le caselle di controllo necessarie per aggiungere collegamenti ai vostri breadcrumb, determinarne l’ordine, nasconderli sulla pagina iniziale e ignorare la cache. Al termine, fate clic sul pulsante Salva, quindi controllate il front-end del vostro sito:

breadcrumb navxt

Breadcrumb creati con il widget di Breadcrumb NavXT

I vostri breadcrumb ora dovrebbero essere visibili in tutte le aree widget che avete scelto.

Flexy Breadcrumb

In alternativa, Flexy Breadcrumb è il plugin per l’aggiunta di breadcrumb a WordPress con la votazione più alta:

flexy breadcrumb

Il plugin Flexy Breadcrumb

Installato e attivato il plugin, potrete aggiungere breadcrumb al vostro sito utilizzando lo shortcode [flexy_breadcrumb]. Questo vi offre un po’ di flessibilità in più nella localizzazione dei vostri percorsi. Avrete anche un maggiore controllo sugli elementi dello stile come dimensione del carattere, colore e icone.

Dopo aver installato Flexy Breadcrumbs, vedrete un nuovo elemento nella barra laterale della dashboard:

flexy breadcrumb dashboard

Il link a Flexy Breadcrumb nella sidebar della dashboard di WordPress

Avrete, quindi, alcune impostazioni da configurare. Nella scheda Generale, potete modificare il testo e l’icona della home page, impostare il limite di caratteri e stabilire la gerarchia:

flexy breadcrumb general

Impostazioni generali di Flexy Breadcrumb

Nella scheda Tipografia, potete regolare il colore e la dimensione del carattere anche per il vostro breadcrumb:

flexy breadcrumb typography

Impostazioni Tipografia di Flexy Breadcrumb

Dopo aver personalizzato il vostro percorso, dovrete aggiungere lo shortcode [flexy_breadcrumb] ovunque vogliate che appaiano i vostri breadcrumb. Anche se è possibile inserirlo in ogni singolo post che pubblicate sul vostro sito, è più efficiente aggiungere lo shortcode in un widget di WordPress:

flexy breadcrumb live

Un percorso di Flexy Breadcrumb sul frontend

Se controllate il frontend del vostro sito, dovreste vedere i vostri breadcrumb posizionati ovunque abbiate aggiunto lo shortcode.

WooCommerce Breadcrumb

Per i rivenditori online, WooCommerce Breadcrumbs è uno strumento semplice per aggiungere collegamenti di navigazione alle pagine dei prodotti:

woocommerce breadcrumbs

Il plugin WooCommerce Breadcrumbs

Se gestite il vostro negozio online con il popolare plugin WooCommerce, questa potrebbe essere l’opzione migliore. Vi consente di attivare i breadcrumb per le pagine dei vostri prodotti, così da migliorare la navigazione per i clienti del vostro sito.

Dopo l’installazione e l’attivazione, per personalizzare i percorsi dei breadcrumb si accederà a Impostazioni > WC Breadcrumbs:

impostazioni woocommerce breadcrumbs

La pagina delle impostazioni di WooCommerce Breadcrumbs

L’impostazione più importante da considerare è il checkbox Abilita breadcrumb. Per visualizzare il vostro breadcrumb, dovete assicurarvi che sia selezionato. Quindi, controllate una delle pagine dei vostri prodotti:

woocommerce breadcrumbs live

Pagina prodotti WooCommerce con i breadcrumb

Il percorso dei breadcrumb dovrebbe essere visibile nella parte superiore della pagina.

Breadcrumb

Infine, Breadcrumb è un plugin leggero che vi consente di aggiungere i breadcrumb in qualsiasi parte del vostro sito utilizzando gli shortcode:

breadcrumb

Il plugin Breadcrumb

Questo plugin ha le impostazioni più estensive di tutti quelli elencati in questo articolo. Potete accedervi facendo clic su Breadcrumb nella sidebar della dashboard di WordPress:

breadcrumb dashboard link

Il link di Breadcrumb nella sidebar della dashboard di WordPress

La prima scheda è etichettata Opzioni e contiene alcune impostazioni generali come testo personalizzato, separatori e limite di caratteri:

impostazioni generali breadcrumb

La pagina delle impostazioni del plugin Breadcrumb

C’è anche un’intera scheda dedicata alle opzioni di stile. Potete scegliere tra diversi pulsanti freccia, nonché dimensioni e colori dei caratteri:

impostazioni stile breadcrumb

Le impostazioni dello stile del plugin Breadcrumb

Se avete competenze nel codice e desideri un maggiore controllo sullo stile, potete anche utilizzare la scheda CSS personalizzato:

breadcrumb custom css

Il campo Custom CSS del plugin Breadcrumb

In ultimo, è importante visualizzare la scheda Shortcode per aggiungere i breadcrumb al vostro sito:

breadcrumb shortcode opzioni

Shortcode e opzioni dello snippet del plugin Breadcrumb

Potete utilizzare lo shortcode ovunque vogliate sul vostro sito, proprio come avviene con gli altri plugin che abbiamo trattato. Tuttavia, Breadcrumb fornisce anche uno snippet di codice che potete aggiungere a uno dei vostri template file per incorporare i vostri percorsi nell’header, nel footer o altrove.

3. Utilizzare un Tema che Include i Breadcrumb

Anche se di solito sono pensati per il controllo dell’aspetto del vostro sito, i temi di WordPress possono anche influenzarne le funzionalità. Un modo in cui possono farlo è aggiungendo i breadcrumb alle vostre pagine.

Lo svantaggio dell’utilizzo di un tema WordPress per aggiungere breadcrumb a un sito WordPress esistente è che comporta anche la modifica dell’aspetto del vostro sito. Se il brand e l’identità del vostro sito sono consolidati, questa non è una soluzione praticabile e probabilmente per voi sarà meglio utilizzare un plugin.

Tuttavia, se state avviando un nuovo sito WordPress o avete programmato un redesign del sito, scegliere un tema che incorpora i breadcrumb è una soluzione semplice per aggiungerli al vostro sito. Inoltre, ci sono diverse opzioni disponibili gratuitamente nella directory dei temi di WordPress.

OceanWP

OceanWP è uno dei temi WordPress multiuso più popolari:

oceanwp

Il tema OceanWP

Include uno shortcode che potete utilizzare per applicare facilmente i breadcrumb alle vostre pagine. Ci sono anche diverse demo per OceanWP che incorporano i breadcrumb. Per utilizzare lo shortcode vi basta aggiungere [oceanwp_breadcrumb] a un post, una pagina o un widget di testo:

aggiungere shortcode oceanwp

Aggiungere lo shortcode dei breadcrumb di OceanWP ad un widget di testo

Potete personalizzare i vostri breadcrumb utilizzando i seguenti parametri:

Potete aggiungere uno o tutti questi parametri tra le parentesi dello shortcode:

Alle prese con tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per prestazioni e sicurezza! Dai un’occhiata ai nostri piani

oceanwp parametri breadcrumb

Personalizzare i breadcrumb di OceanWP con i parametri dello shortcode

Ora dovreste vedere il vostro breadcrumb nelle pagine scelte.

Astra

Allo stesso modo, anche Astra permette di aggiungere agevolmente i breadcrumb al vostro sito:

Il tema Astra

Il tema Astra

Il modo più semplice per abilitare i breadcrumb con Astra è tramite il Customizer. Con il tema installato e attivato, andate su Aspetto > Personalizza:

accedere al customizer in astra

Accedere al Customizer dalla dashboard di WordPress

Quindi, selezionate la scheda Breadcrumb:

astra customizer breadcrumb

La scheda dei breadcrumb di Astra nel Customizer

Qui vedrete un menu a discesa che vi consente di scegliere dove visualizzare i vostri breadcrumb sulla pagina:

astra posizione breadcrumb

Selezionare la posizione dei breadcrumb per il tema Astra

Una volta fatta la scelta, verranno visualizzate anche alcune opzioni di stile:

astra stile breadcrumb

Le opzioni di stile dei breadcrumb di Astra nel Customizer

Fare clic sul pulsante Pubblica del Customizer per salvare le modifiche.

4. Aggiungere i Breadcrumb Manualmente

Plugin e temi sono tra le cose che rendono WordPress una piattaforma così user-friendly e accessibile. Tuttavia, alcuni utenti e sviluppatori più avanzati potrebbero sentirsi un po’ limitati. Il codice può essere un mezzo molto creativo e potrebbe piacervi avere la capacità di scrivere liberamente i vostri breadcrumb.

Per visualizzare manualmente i breadcrumb, dovete fare due cose. Innanzitutto, dovete aggiungere una funzione al vostro file functions.php per abilitarli. Ecco un esempio del codice che potreste utilizzare:


function get_breadcrumb() {
	echo ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</a>’;
	if (is_category() || is_single()){
		echo “  »  ”;
		the_category (‘ • ‘);
			if (is_single()) {
				echo “  »  ”;
				the_title();
			}
} elseif (is_page()) {
		echo “  »  ”;
		echo the_title();
	} elseif (is_search()) {
		echo “  »  ”;Search Results for…
		echo ‘“<em>’;
		echo the_search_query();
		echo ‘</em>”’;
	}
}

Una volta aggiunta la funzione, dovrete invocarla nei template file in cui desiderate che appaiano i vostri breadcrumb. Invocando la funzione in single.php, i breadcrumb appariranno nei vostri post; invocandola in header.php, saranno visualizzati ovunque appaia il vostro header, e così via.

Il codice da utilizzare dovrebbe essere simile a questo:


<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Modificando questi file, i breadcrumb saranno visualizzati sul vostro sito, ma questo non vi consente di dargli uno stile che corrisponda al design. Per questo, dovrete sporcarvi le mani anche con alcuni CSS.

Come Date uno Stile ai Vostri Breadcrumb di WordPress

Lo styling dei vostri breadcrumb è necessario se state scrivendo voi il codice. Tuttavia, può essere utile anche se li state aggiungendo con un tema o un plugin. Lo stile predefinito fornito da questi strumenti potrebbe non essere adatto al vostro sito, nel qual caso potreste modificarli per mantenere la coerenza visiva.

Potete aggiungere CSS personalizzati per modificare lo stile dei breadcrumb nel foglio di stile del vostro tema (style.css) o nell’area CSS Aggiuntivo del Customizer:

CSS aggiuntivo customizer

Incorporare il CSS aggiuntivo per lo stile dei breadcrumb dal Customizer

Esistono molti modi per adattare i breadcrumb al design del vostro sito, ad esempio modificando il carattere, le dimensioni e il colore. Potete anche prendere in considerazione elementi come margini, riempimento, bordo e icone.

Ecco un esempio di alcuni CSS che possono essere utilizzati per modificare lo stile dei vostri breadcrumb:


.breadcrumb {
	padding: 8px 15px;
	margin-bottom: 20px;
	list-style: none;
	background-color: #f5f5f5;
	border-radius: 4px;
}
.breadcrumb a {
	color: #428bca;
	text-decoration: none;
}

Con i CSS ci sono molte possibilità. Quindi potrebbero essere necessari alcuni esperimenti per far apparire il vostro breadcrumb esattamente come lo volete.

Come Rimuovere i Breadcrumbs dal Vostro Sito WordPress

Sebbene ci siano molti vantaggi nell’aggiungere i breadcrumb al proprio sito, ciò non significa che vadano bene per tutti. Per qualcuno potrebbero creare confusione, oppure dare l’impressione di avere un sito dalle pagine ingombre.

Se volete rimuovere i breadcrumb dal vostro sito WordPress, potete farlo a seconda del metodo che avete utilizzato per aggiungerli. Ad esempio, se avete creato il codice del vostro breadcrumb, potete semplicemente rimuovere il codice dai file del vostro tema.

Per disabilitare i breadcrumb aggiunti con un plugin basta disattivare il plugin. Nel caso di Yoast SEO, potete accedere alla scheda Breadcrumbs nelle impostazioni Aspetto della ricerca e impostare lo switcher su Disabilita.

Lo stesso si può dire per i temi che abilitano i breadcrumb tramite un’impostazione o degli WordPress shortcode. Tuttavia, ci sono alcuni temi che aggiungono i breadcrumb di default. Rimuovere questi breadcrumb può essere un po’ più complicato, specialmente se non avete molta esperienza con il codice.

Se siete in questa situazione, dovrete accedere al file header.php del vostro sito. Lì dovrete cercare “breadcrumb”. Questo dovrebbe evidenziare il codice che invoca la funzione che aggiunge i breadcrumb al vostro sito (se si trova qui):

cercare il codice dei breadcrumb

Cercare il codice dei breadcrumb nel template file dell’header del tema

Eliminate questa riga di codice per rimuovere i breadcrumb dal vostro sito. Se non avete trovato il codice giusto, potete seguire di nuovo questa procedura nei vostri file single.php e page.php, per vedere se la funzione è invocata in uno di quei template.

Se tutto fallisce, contattate lo sviluppatore del tema per chiedere supporto. Tenete presente che l’aggiornamento del tema di WordPress può sostituire qualsiasi modifica apportata ai suoi file. Ecco perché le best practice suggeriscono di utilizzare un child theme per questo, al fine di preservare le vostre personalizzazioni a tempo indeterminato.

I breadcrumb sono elementi piccolissimi con un impatto enorme su UX e SEO. Scopri come aggiungerli al tuo sito #WordPress in questa guida! 🍞👣Click to Tweet

Riepilogo

UX e SEO forti sono entrambi fondamentali per un sito web di successo. L’attivazione dei breadcrumb di WordPress può facilitare la navigazione dei visitatori all’interno del vostro sito, aiutando anche i motori di ricerca a comprenderne la struttura e a indicizzare le vostre pagine in modo accurato.

In questo post abbiamo analizzato quattro metodi per aggiungere breadcrumb al vostro sito WordPress:

Avete domande sui breadcrumb di WordPress o su come usarli? Fatecelo sapere nella sezione dei commenti qui sotto!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani