Come aggiungere breadcrumb a WordPress per aiutare gli utenti a navigare meglio nel tuo sito web

Se gestisci un sito Web ricco di contenuti o se ti stai chiedendo come, questo articolo ti aiuterà a imparare come aggiungere breadcrumb a WordPress.

Nella fiaba tedesca, " Hansel e Gretel " il fratellino e la sorellina - sentendo per caso il piano della loro malvagia matrigna di scaricarli nel bosco per cavarsela da soli - presero una fetta di pane e lasciò una scia di briciole di pane che avrebbero tornare a casa una volta che i loro genitori li hanno abbandonati.

Nell'editoria moderna; sul Web o su software o documenti, i breadcrumb vengono utilizzati in modo simile per aiutare un lettore a ritrovare la strada di casa. O almeno essere in grado di tornare sui propri passi in base a dove si trovano.

I breadcrumb sono elementi di navigazione secondari su un sito Web che mostrano la posizione di un visitatore.

Stai leggendo questo articolo, perché sai di cosa si tratta, ma nel caso ti stia chiedendo che aspetto abbia, puoi andare su eBay e vedere il loro.

Un acquirente che visualizza un supporto per pad di ricarica per caricabatterie rapido wireless Qi per Galaxy S9+ iPhone X XS Max, sa facilmente dove si trova e come ottenere le diverse categorie in cui è elencato il suo prodotto.

In questo caso, c'è un collegamento alla home page, quindi un collegamento alla categoria principale di un prodotto è elencato – Cellulari e accessori, seguito da una sottocategoria – Accessori per cellulari e un'altra sottocategoria – Caricabatterie e basi .

Perché aggiungere breadcrumb a un sito Web WordPress?

Osservando la struttura di eBay sopra, puoi vedere come i breadcrumb sono eccellenti per l'esperienza dell'utente su un sito Web a più livelli o gerarchico. Un visitatore sa dove si trova in un dato momento mentre naviga in un sito. Se devono andare alla categoria principale in cui è elencato il prodotto o l'articolo che stanno visualizzando, devono solo fare clic sul collegamento nel breadcrumb.

Il che ci porta a un altro vantaggio dell'aggiunta di breadcrumb a un sito Web WordPress, un utente non ha bisogno di fare clic sul pulsante Indietro di un browser per, solo il breadcrumb.

I breadcrumb consentono la scoperta di contenuti su un sito Web. Si consideri un visitatore inviato a un articolo da un motore di ricerca o un collegamento su un altro sito web. Quando un utente ha letto l'articolo, il breadcrumb offre all'utente più opzioni per passare a una categoria superiore per visualizzare contenuti simili. Questo, come puoi immaginare, porta un utente a trascorrere più tempo su un sito Web, il che porta a frequenze di rimbalzo ridotte.

I breadcrumb non solo aiutano gli utenti a navigare in un sito Web, ma aiutano anche i motori di ricerca a navigare in un sito.

Tutto ciò che migliora l'esperienza dell'utente, tutto ciò che riduce la frequenza di rimbalzo, tutto ciò che consente ai bot dei motori di ricerca di eseguire facilmente la scansione e l'indicizzazione di un sito, aiuta un sito a ottenere il plauso dei motori di ricerca.

Così com'è, l'aggiunta di breadcrumb aiuta un sito Web con i suoi sforzi di ottimizzazione dei motori di ricerca.

Come aggiungere breadcrumb a un sito Web WordPress?

La maggior parte dei temi WordPress moderni e quasi tutti i temi di eCommerce hanno funzionalità breadcrumb in base alla progettazione.

Per aggiungere breadcrumb al tuo sito Web con un tema del genere, abilita semplicemente l'opzione, che si trova spesso nelle opzioni del tema. Consulta la documentazione del tuo tema o gli sviluppatori di temi in caso di dubbio.

Se il tuo tema non supporta nativamente i breadcrumb, puoi aggiungerli facilmente usando i plugin breadcrumbs. Puoi anche utilizzare la maggior parte dei plugin SEO di WordPress come Yoast per aggiungere breadcrumb al tuo sito.

Per questo articolo, aggiungeremo breadcrumb a WordPress con un plugin gratuito per WordPress: Breadcrumb NavXT

Passaggio 1: installa il plug-in Breadcrumb NavXT per WordPress.

Breadcrumb NavXT genera breadcrumb in base alla posizione di un utente. I percorsi possono quindi essere personalizzati a proprio piacimento.

Vai avanti e installa Breadcrumb NavXT.

Se non sai come installare i plugin in WordPress, è facile. Accedi alla dashboard, quindi scorri verso il basso nel menu a sinistra sotto Plugin, fai clic su Aggiungi nuovo.

Inserisci il plugin che desideri installare – Breadcrumb NavXT – nella casella di ricerca.

In un secondo o due, i risultati torneranno. Ora, fai clic su Installa ora , dopodiché attendi un altro o due secondi, quindi fai clic su Attiva .

Passaggio 2: visualizzazione di breadcrumb NavXT breadcrumb su un sito WordPress.

Puoi visualizzare i breadcrumb in due modi.

1. Utilizzando il widget fornito da Breadcrumb NavXT

Vai al menu principale; Aspetto > Widget.

Trova Breadcrumb NavXT quindi trascinalo sulla barra laterale in cui desideri i tuoi breadcrumb.

Ora vai su qualsiasi post o pagina in cui appare la barra laterale e dovresti vedere i tuoi breadcrumb.

Se vuoi che i tuoi breadcrumb siano ovunque tranne che nella barra laterale, come nell'esempio di eBay, dovrai sporcarti le mani e modificare il tuo tema.

2. Modifica il tuo tema

I file che potresti dover modificare sono; home.php, single.php, page.php. Puoi anche modificare le tassonomie e qualsiasi altro file, purché tu abbia bisogno di breadcrumb lì.

Ma, prima di fare qualsiasi cosa, esegui il backup del tuo sito web. Il nostro plug-in di backup WPVivid ti farà risparmiare tempo e mal di testa se le cose si ritorceranno contro.

Successivamente, ti consiglio di apportare modifiche a un tema figlio. Abbiamo un articolo che ti mostrerà esattamente come creare un tema figlio per il tuo sito Web WordPress.

Se hai fatto quanto sopra, vai avanti e aggiungi il seguente codice alle pagine che vuoi visualizzare nel tuo breadcrumb.

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

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

</div>

Se vuoi visualizzarlo in un articolo, il file single.php è ciò che modifichi. Incolla il codice nel tag dell'articolo.

Salva le modifiche e poi vai ai tuoi articoli.

I tuoi breadcrumb dovrebbero trovarsi nell'area in cui hai inserito il codice.

Puoi vedere nel mio caso che ho le briciole di pane in cima all'articolo.

Se i tuoi breadcrumb non vengono visualizzati correttamente, dovrai modellarlo con alcuni CSS.

Breadcrumb NavXT usa la classe css .breadcrumbs (questo può anche dipendere dal tuo tema). Puoi modificare il codice CSS del tuo sito o utilizzare il personalizzatore di WordPress per definire lo stile dei tuoi breadcrumb.

 .briciole di pane {

colore: #000;

margine inferiore: 20px;

}

Passaggio 3: personalizzazione dei breadcrumb NavXT di breadcrumb.

Se hai bisogno di apportare modifiche ai tuoi breadcrumb, puoi farlo nella dashboard di WordPress.

Vai alla pagina delle impostazioni di Breadcrumb NavXT. Puoi trovarlo nel menu generale di WordPress – Impostazioni > Breadcrumb NavXT – .

Ecco fatto, spero che tu abbia aggiunto con successo breadcrumb al tuo sito WordPress.

Non perdere i tuoi visitatori nella giungla del tuo sito web. Aggiungi breadcrumb al tuo sito web.

Per il prossimo, potresti anche voler imparare come aggiungere Google Custom Search a WordPress per migliorare la tua navigazione sul sito.