Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come visualizzare i link di navigazione Breadcrumb in WordPress

Se state cercando un modo per rendere il vostro sito WordPress più facile da navigare, vi consigliamo di aggiungere i link breadcrumb.

La navigazione a briciole indica agli utenti dove si trovano in un sito web rispetto alla homepage. Questo percorso a briciole di pane viene visualizzato anche nei risultati di ricerca, facendo risaltare il vostro sito web.

Utilizziamo le briciole di pane sui nostri siti web e abbiamo scoperto che questa funzione rende più facile per i lettori spostarsi all’interno delle diverse pagine. In questo articolo vi mostreremo come visualizzare i link di navigazione breadcrumb in WordPress.

How to display breadcrumbs navigation in WordPress

Cos’è la navigazione Breadcrumb e perché ne avete bisogno?

La navigazione a briciole è un termine usato per descrivere un menu di navigazione gerarchico presentato come una scia di link. È spesso utilizzata come navigazione secondaria che consente agli utenti di salire nella gerarchia delle pagine del sito web.

Navigational links preview in WPBeginner

I link di navigazione breadcrumb sono diversi dal sistema di menu di navigazione predefinito di WordPress.

La navigazione a briciole aiuta gli utenti a navigare all’interno del vostro sito web e aiuta i motori di ricerca a comprendere la struttura e la gerarchia dei link di una pagina web.

Se le briciole di pane sono impostate nel modo giusto, i motori di ricerca come Google le visualizzeranno insieme al titolo della pagina nei risultati di ricerca. In questo modo il vostro sito web acquista maggiore visibilità nei risultati di ricerca e aumenta la percentuale di clic.

Breadcrumb navigation links in search results

I metodi di questa guida vi aiuteranno a impostare correttamente le briciole di pane utilizzando il markup Schema. Schema è un codice di markup intelligente che aiuta Google a identificare le briciole di pane in modo che vengano visualizzate nei risultati di ricerca.

Detto questo, vediamo come aggiungere i link di navigazione breadcrumb in WordPress. Vi mostreremo due metodi e potrete scegliere quello che funziona meglio per voi:

Questo metodo è più semplice e consigliato a tutti gli utenti di WordPress.

Per questo metodo, utilizzeremo All in One SEO for WordPress, che è il miglior plugin SEO per WordPress sul mercato. Vi aiuta a migliorare facilmente la SEO di WordPress senza alcuna competenza tecnica. Inoltre, è dotato di una funzione di briciole di pane facile da usare.

Nota: è disponibile anche una versione gratuita di All in One SEO con funzioni limitate, tra cui le briciole di pane. Tuttavia, si consiglia di passare al plugin a pagamento per avere accesso a funzioni premium come l’assistente ai link, le sitemap avanzate e altro ancora.

Dopo l’attivazione, si accede alla procedura guidata di configurazione del plugin. È possibile seguire le istruzioni sullo schermo per configurare il plugin.

All in One SEO setup

Avete bisogno di aiuto per la configurazione? Consultate il nostro tutorial passo-passo su come installare e configurare All in One SEO.

Successivamente, è necessario visitare la pagina All in One SEO ” Impostazioni generali e passare alla scheda ‘Briciole di pane’.

Enable breadcrumbs in AIOSEO

Il markup dello schema breadcrumbs viene aggiunto automaticamente da All in One SEO al codice del vostro sito web in modo che i motori di ricerca possano trovarlo.

Tuttavia, se si desidera visualizzare i link di navigazione breadcrumb anche sul proprio sito web, è necessario attivare l’opzione “Abilita briciole di pane”.

L’attivazione della levetta consente di visualizzare le diverse impostazioni di visualizzazione delle briciole di pane che è possibile utilizzare sul proprio sito web WordPress.

Show breadcrumbs on website options

Esistono quattro modi per visualizzare il percorso di navigazione breadcrumb sul vostro sito web WordPress.

1. Aggiunta di una navigazione Breadcrumb con lo Shortcode

Il metodo shortcode è semplice e consente di visualizzare i link di navigazione breadcrumb nei post e nelle pagine di WordPress o nelle pagine dei prodotti del vostro negozio online.

È sufficiente modificare il post, la pagina o il prodotto e aggiungere il seguente shortcode nel punto in cui si desidera visualizzare il percorso di navigazione breadcrumb:

[aioseo_breadcrumbs]

Se si utilizza l’editor di blocchi predefinito, lo shortcode verrà convertito automaticamente nel blocco Shortcode.

Add shortcode for breadcrumbs

Ora è possibile salvare il post o la pagina e visualizzarne l’anteprima per vedere il menu di navigazione breadcrumb in azione.

Ecco come appariva sul nostro sito di prova.

Preview of shortcode breadcrumbs navigational links

2. Aggiunta di una navigazione Breadcrumb con il blocco Gutenberg

Se non si vuole utilizzare l’opzione shortcode o non si ricorda lo shortcode, è possibile visualizzare la navigazione a briciole di pane utilizzando il blocco AIOSEO – Breadcrumbs.

È sufficiente modificare il post o la pagina in cui si desidera visualizzare la navigazione a briciole di pane e aggiungere il blocco AIOSEO – Briciole di pane.

AIOSEO breadcrumbs block

Il plugin caricherà quindi un’anteprima live dei link di navigazione breadcrumb e la visualizzerà nell’area dei contenuti.

Non dimenticate di aggiornare o pubblicare le modifiche.

AIOSEO breadcrumbs block preview

3. Aggiunta di una navigazione Breadcrumb tramite un widget

I due metodi precedenti richiedono l’aggiunta di uno shortcode o di un blocco in ogni post o pagina in cui si desidera visualizzare i link di navigazione breadcrumb.

E se si volesse visualizzare automaticamente le briciole di pane per ogni post o pagina?

Il widget Breadcrumbs di AIOSEO vi permette di farlo facilmente.

Basta andare alla pagina Aspetto ” Widget e aggiungere il blocco widget AIOSEO – Breadcrumbs. È possibile aggiungerlo alla barra laterale del sito, al piè di pagina o a qualsiasi area widget.

Add AIOSEO breadcrumbs to widget

È possibile fornire un titolo per il widget o lasciarlo vuoto, se si preferisce.

Non dimenticate di fare clic sul pulsante “Aggiorna” per memorizzare le impostazioni.

Enter breadcrumbs widget title

Ora è possibile visitare il sito web e vedere il menu di navigazione breadcrumb su tutti i post e le pagine.

4. Aggiunta di una navigazione Breadcrumb con il codice

Questo metodo consente di visualizzare i link di navigazione delle briciole di pane esattamente dove si desidera. Tuttavia, richiede l’aggiunta di codice ai file del tema di WordPress.

Se non l’avete mai fatto prima, non dimenticate di consultare il nostro articolo su come aggiungere snippet di codice in WordPress.

Innanzitutto, è necessario decidere dove visualizzare i link breadcrumb. Il posto più comune è sotto il titolo del singolo post, della pagina o del prodotto.

I temi di WordPress utilizzano file modello per visualizzare le diverse sezioni del sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php che si trova all’interno della cartella template-parts del tema.

Consultate la nostra scheda informativa per scoprire quali file modificare in un tema WordPress.

Successivamente, è necessario modificare il file del tema utilizzando un client FTP. Per le istruzioni, consultate la nostra guida su come usare FTP per caricare i file su WordPress.

Quindi, inserire il seguente codice nel punto in cui si desidera visualizzare i link di navigazione breadcrumb:

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Non dimenticate di salvare le modifiche e di caricare il file sul vostro sito web.

Ora potete visitare il vostro sito web per vedere i link breadcrumb in azione.

Preview of  breadcrumbs navigational links

Per impostazione predefinita, All in One SEO utilizza un modello per visualizzare i link di navigazione. Esso contiene un link alla home, alla categoria, alla pagina madre e al titolo del post o della pagina, separati dal simbolo “”.

È possibile modificarlo visitando la pagina All in One SEO ” Impostazioni generali e dirigendosi verso la scheda “Briciole di pane”. Quindi, è sufficiente scorrere verso il basso fino alla sezione Impostazioni delle briciole di pane.

AIOSEO breadcrumbs settings

Da qui è possibile modificare il separatore, mostrare o nascondere il link alla home, aggiungere un prefisso e altro ancora.

Una volta terminato, non dimenticate di memorizzare le impostazioni.

Metodo 2: Aggiungere la navigazione a briciole di pane con Breadcrumb NavXT

Questo metodo può essere utilizzato con qualsiasi altro plugin SEO per WordPress. È facile da usare se si dispone di un tema compatibile, ma in caso contrario è necessario modificare i file del tema per visualizzare i link di navigazione breadcrumb.

La prima cosa da fare è installare e attivare il plugin Breadcrumb NavXT. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Breadcrumb NavXT per configurare le impostazioni del plugin.

Breadcrumbs NavXT settings

Le impostazioni predefinite dovrebbero funzionare per la maggior parte dei siti web. Tuttavia, è possibile personalizzare le impostazioni in base alle esigenze.

La pagina delle impostazioni è suddivisa in diverse sezioni. Nella scheda Impostazioni generali è possibile modificare lo stile e le impostazioni delle briciole di pane.

Si noterà anche che questi modelli di link utilizzano il markup Schema.org nel tag del link.

La scheda Tipi di post nelle impostazioni del plugin consente di impostare i link breadcrumb per i post, le pagine e qualsiasi tipo di post personalizzato.

Post types breadcrumbs settings

È possibile scegliere come visualizzare la gerarchia dei post. Per impostazione predefinita, il plugin utilizza la gerarchia “Titolo del sito > Categoria > Titolo del post”.

È possibile sostituire le categorie con tag, date o genitori dei post e modificare il separatore.

Choose post hierarchy

Le schede Tassonomie e Varie presentano modelli simili per i link di navigazione breadcrumb.

Non dimenticate di salvare le modifiche una volta terminate.

Breadcrumb NavXT offre diversi modi per visualizzare i link di navigazione breadcrumb sul vostro sito web.

1. Visualizzazione della navigazione Breadcrumb con il supporto del tema

Alcuni dei temi WordPress più diffusi sono dotati di un’opzione integrata per visualizzare la navigazione a briciole di pane, scegliendo come fonte Breadcrumb NavXT o il plugin SEO di WordPress.

Ad esempio, se si utilizza Astra, si può andare alla pagina Aspetto ” Personalizzazione e fare clic sul menu ‘Briciole di pane’.

Da qui, si sceglierà dove visualizzare le briciole di pane nel menu a tendina “Posizione dell’intestazione”.

In ‘Breadcrumb Source’, si dovrà scegliere ‘Breadcrumb NavXT’.

Adding breadcrumbs with theme customizer

Se state visualizzando un singolo post o una pagina, vedrete un’anteprima in tempo reale dei vostri link di navigazione breadcrumb.

Non dimenticate di fare clic sul pulsante “Pubblica” per salvare le modifiche.

2. Visualizzazione dei link di navigazione con il blocco Breadcrumb Trail

È inoltre possibile visualizzare i link di navigazione delle briciole di pane utilizzando il blocco Breadcrumb Trail.

È sufficiente andare nell’editor dei contenuti di WordPress e aggiungere il blocco Breadcrumb Trail nel punto in cui si desidera mostrare i link di navigazione.

Add breadcrumb trail block

Successivamente, è possibile aggiornare o pubblicare i contenuti.

Poi, visitate il vostro sito web per vedere i link di navigazione in azione.

Breadcrumb trail preview

3. Aggiunta della navigazione a briciole di pane tramite un widget

Il plugin fornisce anche un widget che può essere utilizzato per visualizzare la navigazione a briciole di pane nella barra laterale o in qualsiasi area predisposta per i widget.

Per prima cosa, andare alla pagina Aspetto ” Widget e aggiungere il blocco widget “Breadcrumb Trail” all’area widget del sito, come la barra laterale o il piè di pagina.

Add breadcrumb trail widget

Le impostazioni predefinite dei widget vanno bene per la maggior parte dei siti web, ma è possibile modificarle se necessario. Ad esempio, si potrebbe voler nascondere il percorso nella prima pagina.

Non dimenticate di fare clic sul pulsante “Aggiorna” per memorizzare le impostazioni del widget.

4. Aggiunta di una navigazione Breadcrumb con il codice

Il plugin offre anche un metodo di codice per visualizzare i link di navigazione breadcrumb per gli utenti avanzati.

Per prima cosa, dovete collegarvi al vostro sito WordPress utilizzando un client FTP. Dopodiché, navigare nella cartella del tema corrente di WordPress, situata all’interno della directory /wp-content/themes/.

I temi di WordPress utilizzano file modello per visualizzare le diverse sezioni del sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php che si trova all’interno della cartella template-parts del tema.

Consultate la nostra scheda informativa per scoprire quali file modificare in un tema WordPress.

Aprire il file del modello per modificarlo e inserire il seguente codice nel punto in cui si desidera visualizzare il percorso delle briciole di pane:

<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>

Non dimenticate di salvare le modifiche e di caricare il file sul vostro sito web.

Ora potete visitare il vostro sito web per vedere il percorso dei link breadcrumb in azione.

Breadcrumb trail preview

Video tutorial

Subscribe to WPBeginner

Speriamo che questo articolo vi abbia aiutato a capire come visualizzare i link di navigazione breadcrumb in WordPress. Potreste anche voler consultare la nostra guida su come mostrare diversi menu agli utenti loggati in WordPress o su come aggiungere un mega menu al vostro sito WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

35 commentiLascia una risposta

  1. Steven Jæger

    I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.

    My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.

    • WPBeginner Support

      You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.

      Admin

  2. Surjeet Kumar Verma

    Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.

    • WPBeginner Support

      Glad our guide was helpful :)

      Admin

  3. Rintesh Roy

    The plugin is not at all documented. At least, I could not find any.

    • WPBeginner Support

      The documentation for the plugin is linked on the plugin’s page :)

      Admin

  4. Elizabeth Morgan

    I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:

    “Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.

    syntax error, unexpected ‘<', expecting end of file"

    What do I do about this?

  5. Varun

    Thank you finally problem is solved

    • WPBeginner Support

      Glad our recommendations could help :)

      Admin

  6. Hammad Rashid

    The plugin is awesome…. Thank You!

    • WPBeginner Support

      Glad we could recommend it :)

      Admin

  7. Andres

    Hi WPBeginner,

    Amazing post.

    I wonder the following.

    How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.

    I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.

    Thanks a lot for your time.

    • Editorial Staff

      In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.

      Admin

  8. Manish Ransubhe

    Hello, I am not using any plugin and I have never enabled Breadcrumbs.

    Why my search Result showing breadcrumbs help me to disable this

    Thank you

    • Ravi Singh

      same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.

  9. Dua Centre

    I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?

  10. Walter

    Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.

  11. DUy

    Is it posible to change the font size and the font color of Breadcrumb?

    thanks

  12. Sameer

    Hello,

    I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.

    Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?

  13. Joshua

    Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.

    Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.

  14. juan luis

    Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?

    • WPBeginner Support

      Hi Juan,

      If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.

      Admin

  15. Nate Balcom

    By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.

  16. Nate Balcom

    Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.

  17. Anna

    My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.

    I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?

    • subhan

      Just copy the header.php to the the generate press child theme forlder.

  18. Sunil

    Thanks for great post. Cheers!

  19. Raymond Chukwuman

    Thank you so much. It is really working on my website God bless you

  20. Abiodun

    I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO

    • WPBeginner Support

      Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.

      Admin

      • Abiodun

        It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?

        • Michelle

          Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.

  21. JOY

    Great! This is really useful! Thanks a lot! :)

  22. malek

    thanks you , really usefull

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.