Come aggiungere breadcrumb al tuo sito Web WordPress

Il termine “breadcrumb” si riferisce a un efficiente strumento di navigazione del sito web che (come ci hanno insegnato Hansel e Gretel) ha lo scopo di aiutare a risalire alla “casa” (o homepage) di un sito web. Consentono agli utenti di vedere come la pagina corrente si inserisce nell'intera struttura del sito fornendo una traccia in linea di collegamenti (o etichette) che conducono fino alla home page.

Pagina del prodotto Home Depot con pangrattato

I breadcrumb sono in realtà più importanti per il tuo sito Web WordPress di quanto tu possa pensare. Non solo migliorano l'esperienza dell'utente, ma possono anche dare al tuo sito un salto nelle classifiche di ricerca. A Google piace questo elemento strutturale in un sito Web e i visitatori avranno un aiuto di navigazione cruciale quando si imbattono in una delle tue pagine in modo organico (riducendo la frequenza di rimbalzo).

Penseresti che aggiungere un sistema di nativazione così integrato al tuo sito web sarebbe difficile, ma in realtà è abbastanza semplice con l'uso di un plugin. In effetti, se stai utilizzando il plug-in Yoast SEO, hai un vantaggio perché la funzionalità breadcrumb è già integrata in Yoast! E l'aggiunta di breadcrumb tramite Yoast è sicuramente uno dei metodi preferiti. Oltre a Yoast SEO, il plugin Breadcrumb NavXT è un'altra grande opzione altamente personalizzabile e funziona bene anche con il nostro tema Divi.

Iscriviti al nostro canale Youtube

Come aggiungere breadcrumb al tuo sito Web WordPress utilizzando Yoast

Per aggiungere breadcrumb al tuo sito Web WordPress utilizzando Yoast SEO, dovrai affrontare tre semplici passaggi:

• Installa e attiva Yoast SEO Plugin
• Aggiungere lo snippet di codice Breadcrumbs al tuo tema WordPress
• Abilita/configura Breadcrumbs il pangrattato Yoast nelle impostazioni del plugin

Installa e attiva il plugin Yoast SEO

Per installare il plugin Yoast SEO, vai alla dashboard di WordPress e vai su Plugin > Aggiungi nuovo. Quindi cerca il repository di WordPress per "yoast". Quando vedi il plug-in Yoast SEO, fai clic per installare e attivare il plug-in.

Aggiungi lo snippet di codice Breadcrumbs al tuo tema WordPress Child

Successivamente, dobbiamo aggiungere un breve frammento di codice ai file del tema di WordPress. Quindi, se non l'hai già fatto, è una buona idea creare un tema figlio. Per questo esempio, ti mostrerò come aggiungere lo snippet di codice breadcrumb a un tema WordPress predefinito di TwentyNineteen. Puoi aggiungere il codice a qualsiasi file/modello del tema, ma per la maggior parte, vorrai aggiungerlo al tuo file single.php (per apparire su tutti i post), file page.php (per apparire su tutte le pagine ), o nel tuo file header.php (per essere visualizzato in tutto il sito).

Per questo esempio, aggiungerò il codice breadcrumb al file header.php del mio tema figlio. Dopo aver copiato il file header.php dal tema principale, apri per modificare il file in un editor di codice a tua scelta.

Quindi, in fondo al file header.php, aggiungi il seguente frammento php fornito da Yoast per attivare la funzionalità Breadcrumbs:

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

Questo mostrerà i breadcrumb direttamente sotto l'intestazione di tutte le pagine, un posizionamento comune per i breadcrumb.

Abilita e configura Yoast Breadcrumb nelle impostazioni del plugin

Una volta che lo snippet di codice è stato aggiunto al tuo tema WordPress Child, tutto ciò che devi fare è attivare i Breadcrumbs nelle impostazioni del plugin Yoast SEO. Per fare ciò, vai alla dashboard di WordPress e vai su SEO > Aspetto di ricerca, quindi fai clic sulla scheda Breadcrumbs. Nelle impostazioni Breadcrumb, assicurati di abilitare i breadcrumb impostando l'opzione su "abilitato". Quindi puoi configurare le impostazioni breadcrumb in base alle tue esigenze. Potresti anche voler scegliere una tassonomia da mostrare nei breadcrumb per il tuo post. Per questo esempio, imposterò i miei post per mostrare le categorie nei breadcrumb.

Ora andiamo avanti e controlliamo come appaiono i breadcrumb su uno dei post che ho creato nel tema TwentyNineteen.

Ecco come appare il post prima di abilitare i breadcrumb.

Ecco come appare il post dopo aver abilitato i breadcrumb. Questo particolare esempio di post ha una categoria ("WordPress") e una categoria padre ("Web Design") per mostrarti la tassonomia di categoria dei breadcrumb che ho scelto nelle impostazioni dei breadcrumb.

Potrebbe essere necessario modificare lo stile dei breadcrumb utilizzando alcuni CSS esterni. Per fare ciò, puoi utilizzare l'ID CSS "breadcrumbs" che è stato incluso nel codice php. Apri il file style.css del tuo tema figlio (oppure puoi aggiungerlo nella personalizzazione del tema in CSS aggiuntivo) e aggiungi quanto segue:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

Per il tema TwentyNineteen, potrei voler abbinare il margine del mio testo di intestazione aggiungendo il seguente CSS personalizzato:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Se desideri un maggiore controllo sulla posizione specifica dei tuoi breadcrumb, puoi utilizzare il seguente shortcode anche per singoli post o pagine.

[wpseo_breadcrumb]

Aggiunta di breadcrumb al tuo sito Web WordPress utilizzando Breadcrumb NavXT

Se non vuoi installare Yoast SEO per qualche motivo o se stai cercando un'altra semplice opzione, il plugin Breadcrumb NavXT è una scelta eccellente.

Per installare il plugin, vai alla dashboard di WordPress e vai su Plugin > Aggiungi nuovo. Quindi cerca nel repository di WordPress "breadcrumb navxt". Una volta visualizzato il plug-in, fai clic per installarlo e attivarlo.

Per richiamare i breadcrumb in modo che vengano visualizzati sul tuo sito web, puoi utilizzare il widget Breadcrumb NavXT integrato fornito nella pagina dei widget. Ciò ti consentirà di trascinare il widget nelle varie aree del widget fornite dal tuo tema. Per fare ciò, vai alla dashboard di WordPress e vai su Aspetto> Widget. Quindi trascina il widget nell'area del widget o nella tua scelta e aggiorna le impostazioni del widget.

Per questo esempio, sto usando il tema Divi per visualizzare i breadcrumb nella parte superiore della mia barra laterale. Ecco come appare su un post.

Simile all'esempio Yoast Breadcrumb, puoi anche chiamare il percorso breadcrumb al tuo sito aggiungendo il codice necessario al tuo tema figlio. Ecco il codice che forniscono che è conforme alla breadcrumblist schema.org:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Dato che sto usando il tema Divi per questo esempio, aggiungerò il codice al file Single.php del mio tema Divi Child proprio sopra il tag dell'articolo. Questo mostrerà i breadcrumb nella parte superiore di tutti i miei post.

Ecco come appare un post dopo aver aggiunto il codice.

Configurazione dei breadcrumb utilizzando le impostazioni del plugin

Il plugin Breadcrumb NavXT ha alcune potenti opzioni per configurare i tuoi breadcrumb. Puoi personalizzare l'intero modello dei tuoi breadcrumb per diverse tassonomie e molto altro. Puoi accedere a queste impostazioni dalla dashboard di WordPress accedendo a Impostazioni > Breadcrumb NavXT.

Modellare il pangrattato

Se vuoi dare uno stile ai breadcrumb, puoi scegliere come target la classe chiamata "breadcrumb" inclusa nel codice.

Aggiungi semplicemente il seguente CSS al file style.css del tuo tema figlio o al CSS aggiuntivo per la personalizzazione del tema:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Se desideri utilizzare il widget breadcrumb con il tema Divi, puoi anche utilizzare il modulo della barra laterale di Divi per aggiungere uno stile al breadcrumb all'interno di Divi Builder.

Pensieri finali

I breadcrumb sono una parte importante di un sito web sia per l'usabilità che per la SEO. Quindi, se stai pensando di aggiungere breadcrumb al tuo sito WordPress, ti suggerirei di iniziare con i metodi forniti dai plugin menzionati in questo articolo (Yoast SEO e Breadcrumb NavXT). Ha più senso utilizzare i breadcrumb di Yoast se stai già sfruttando il loro plugin SEO poiché è già a tua disposizione. Tuttavia, anche Breadcrumb NavXT è un'opzione altamente personalizzabile. Certo, potresti dover accedere ai tuoi file del tema, ma tutto sommato, il processo è semplice. Se non altro, spero che questo aiuti ad alleviare il dolore di ottenere breadcrumb sul tuo sito WordPress.

Non vedo l'ora di sentirti nei commenti.

Saluti!