La navigazione è una parte vitale di qualsiasi sito web e esiste più di un modo per fornirla. Il menu principale sul tuo sito web è lo strumento di navigazione principale che porta gli utenti al contenuto che desiderano. Tuttavia, non dice ai tuoi clienti dove si trovano attualmente sul tuo sito web.
Un menu breadcrumb è un sistema di navigazione secondario che indica ai tuoi clienti dove si trovano in relazione alla tua home page. Questo li aiuta a navigare facilmente tra le pagine del tuo sito web ed evitare di perdersi.
In questo articolo, esamineremo cosa sono i web breadcrumbs WordPress ( briciole di pane ) e in che modo avvantaggiano il tuo sito. Ti mostreremo quindi come aggiungere un menu breadcrumb al tuo sito WordPress.
Iniziamo!
Il breadcrumb è una navigazione che rende il tuo sito web più accessibile. Le barre di navigazione che la maggior parte degli utenti incontra nel web si basano sul loro utilizzo.
La navigazione a breadcrumbs di WordPress segna la progressione della pagina attraverso la quale gli utenti arrivano alla pagina corrente.
Poiché molti utenti non accedono al tuo sito web attraverso la home page, la navigazione breadcrumb li aiuta a capire dove sono arrivati. Anche I motori di ricerca usano i breadcrumbs per comprendere meglio la gerarchia delle tue pagine web.
Google mostra i web breadcrumbs sotto il meta title nei risultati di ricerca. Naturalmente, sia la SEO che l’esperienza utente beneficiano di un sito web con la navigazione breadcrumb abilitata.
Google ama il breadcrumbs, quindi questa funzione può migliorare l’ottimizzazione dei motori di ricerca (SEO) e attirare più visitatori sul tuo sito.
I menu breadcrumb possono anche ridurre la frequenza di rimbalzo , poiché migliorano l’esperienza utente del tuo sito (UX). Quando gli utenti possono navigare facilmente nel tuo sito web, è più probabile che trascorrano del tempo su di esso.
Diamo un’occhiata a come è possibile aggiungerli a WordPress.
In questo tutorial verranno illustrati tre metodi che è possibile utilizzare per includere la navigazione breadcrumb in un sito WordPress.
Il metodo più semplice è usare un plugin, ma puoi anche inserire tramite codice i breadcrumbs nel file header.php del tuo sito. Prima di utilizzare uno dei due metodi, ti consigliamo di creare un backup del sito web nel caso in cui qualcosa vada storto.
Il modo più semplice per aggiungere breadcrumbs a WordPress è con un plugin. Esistono molti plugin che puoi utilizzare, tra cui Breadcrumb NavXT e Yoast SEO Breadcrumbs.
Il plugin Breadcrumb NavXT può essere installato facilmente accedendo tramite il repository WordPress.
Cerca Breadcrumb NavXT e troverai il plugin, scaricalo, installalo e attivalo. Attiva le funzionalità del plugin tramite un widget. Per fare ciò, vai alla scheda Aspetto e Widget .
Trascina semplicemente il widget Breadcrumb NavXT nell’area della pagina web dove vuoi che venga visualizzato.
Se vuoi una soluzione più tecnica o vuoi aggiungere la navigazione breadcrumb di WordPress direttamente al tuo tema, dovrai aggiungere il seguente snippet di codice al file header.php :
***** Importante: consigliamo vivamente di effettuare un backup del tuo sito WordPress e di creare un tema child prima di modificare qualsiasi file dei temi *****
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}?>
Una volta inserito il codice, i breadcrumbs verranno visualizzati nel punto desiderato. Per ulteriori configurazioni, accedi alla pagina delle impostazioni del plugin.
Da qui, sarai in grado di cambiare gli elementi dellla navigazione breadcrumb come le tassonomie per rendere unici i breadcrumbs del tuo sito WordPress.
Puoi anche stilizzare i breadcrumbs indirizzandoli in una classe speciale nel tuo foglio di stile.
Yoast è un plugin SEO, offre una vasta gamma di funzionalità compreso la creazione e lo stile della navigazione breadcrumb.
Per utilizzare questo plugin, dovrai scaricarlo dalla directory dei plugin di WordPress. Puoi semplicemente andare alla pagina Plugin del tuo sito , cercare “Yoast SEO” e installare e attivare il plugin come qualsiasi altro.
Dopo l’installazione, dovrai aggiungere uno snippet di codice al tuo tema child WordPress.
In generale, ti consigliamo di inserire questo codice alla fine del tuo file header.php . Tuttavia, puoi sperimentare il posizionamento del menu, controllando il front-end del tuo sito per vedere come appare il risultato.
Puoi anche aggiungere la funzione sopra al file single.php o page.php del tuo tema, se vuoi che il menu breadcrumb appaia nei singoli post, pagine e in tutto il sito web.. Assicurati solo di aggiungerlo in un solo posto.
Ecco lo snippet di codice:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
Dopo aver aggiunto il codice, attiva le impostazioni dei breadcrumbs in Yoast SEO -> Aspetto della ricerca -> Breadcrumbs
Basta impostare l’interruttore su “Abilitato” e sei a posto! Il menu breadcrumb sarà impostato e pronto per l’uso.
Se non vuoi utilizzare un plugin, è possibile aggiungere il menu breadcrumb tramite codice. Prima di fare questo tentativo, consigliamo di leggevi i microdati, al fine di sfruttare appieno il potenziale SEO Breadcrumbs.
Passaggio 1: creare una funzione scheletro
Per aggiungere manualmente il menu breadcrumb a WordPress, dovrai creare una funzione PHP. Il primo passo per creare questa funzione è costruire lo scheletro. La tua funzione scheletro avrà bisogno di un nome univoco, per evitare conflitti con altre funzioni.
function my_breadcrumbs() {
/* Il codice Breadcrumbs andrà qui*/
}
La funzione sopra è lo scheletro e il resto del codice verrà inserito tra parentesi graffe.
Passaggio 2: aggiungere le regole di base
Dopo aver creato lo scheletro, dovrai aggiungere le regole alla funzione. Le regole dovrebbero essere inserite nella sezione breadcrumb:
/* Cambia in base alle tue esigenze */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';
/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );
Le regole di cui sopra generalmente utilizzano variabili, quindi possono essere modificate in seguito. Le prime due variabili usano i valori booleani, dove “0” è falso e “1” è vero.
Passaggio 3: aggiungere l’ istruzione ” if else “
Sotto le variabili, devi aggiungere un’istruzione ‘if else’. Questa dichiarazione verificherà se un utente si trova nella home page del tuo sito web o meno. Sulla base di queste informazioni, la dichiarazione determinerà se un breadcrumb viene visualizzato o meno:
/* Controllla prima se è la Homepage! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;
/* Procedere con la presentazione del breadcrumb */
$breadcrumbs = '<ol id="crumbs" itemscope itemtype="http://schema.org/BreadcrumbList">';
$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';
/* Crea qui il breadcrumb */
$breadcrumbs .= '</ol>';
echo $breadcrumbs;
Passaggio 4: Aggiungi funzione all’intestazione del tema
Una volta completata la funzione breadcrumb, puoi aggiungerla al file header.php del tuo sito web . Passa a Aspetto > Editor temi per aprire il file e aggiungere la funzione fino alla fine.
Quindi salva le modifiche e controlla il nuovo menu breadcrumb sul front-end. Puoi continuare a modificare la funzione e il suo posizionamento fino a quando il menu non è come lo desideri.
Conclusione
La navigazione beadcrumb può essere un’utile aggiunta al tuo sito web sia per il miglioramento della SEO che per l’esperienza dell’utente. Inoltre semplifica ai motori di ricerca la comprensione della gerarchia del tuo sito web.
Breadcrumb NavXT e Yoast SEO sono le migliori opzioni per aggiungere la navigazione breadcrumb a WordPress ma puoi aggiungerla anche tramite codice.
Sebbene l’aggiunta diretta di un widget sia più semplice, potrebbe non fornire accesso a tutte le opzioni di personalizzazione disponibili. Utilizzare il codice ti consentirà di ottenere il meglio dai breadcrumbs e il tuo sito web si distinguerà dalla concorrenza.
Buon lavoro!
