I Breadcrumb di WordPress: Come Abilitarli sul Vostro Sito WordPress

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:

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:

• Basati sulla gerarchia: questi breadcrumb mostrano agli utenti dove si trovano nella struttura del vostro sito, come nell’esempio visto sopra.
• Basati su attributi: usati principalmente sui siti di ecommerce, questi breadcrumb mostrano gli attributi cercati dall’utente che lo hanno portato al prodotto che sta visualizzando.
• Basati sulla cronologia: man mano che gli utenti passano da una pagina all’altra del vostro sito, questi breadcrumb ricondurranno al loro percorso.

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:

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:

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:

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

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:

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:

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

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:

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:

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:

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:

Nella scheda Tipografia, potete regolare il colore e la dimensione del carattere anche per il vostro 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:

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:

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:

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:

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:

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:

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

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

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

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

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:

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:

Potete personalizzare i vostri breadcrumb utilizzando i seguenti parametri:

• Class: incorpora una classe CSS personalizzata.
• Color: cambia il colore del testo.
• Hover color: cambia il colore del testo quando gli utenti passano il mouse sopra i breadcrumb.

Potete aggiungere uno o tutti questi parametri tra le parentesi 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 modo più semplice per abilitare i breadcrumb con Astra è tramite il Customizer. Con il tema installato e attivato, andate su Aspetto > Personalizza:

Quindi, selezionate la scheda Breadcrumb:

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

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

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:

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):

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.

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:

• Attivando i breadcrumb in Yoast SEO.
• Installando e configurando un plugin per i breadcrumb di WordPress.
• Utilizzando un tema che includa i breadcrumb.
• Aggiungendo i vostri breadcrumb manualmente usando il codice.

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

Matteo Duò Kinsta

Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.

• Sito Web
• LinkedIn
• Twitter