Come aggiungere i breadcrumb al tuo sito WordPress

La navigazione è una parte vitale di qualsiasi sito web e c'è più di un modo per fornirla. Il menu principale del tuo sito Web è lo strumento di navigazione principale che porta gli utenti al contenuto desiderato. 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 rispetto 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 breadcrumb e in che modo avvantaggiano il tuo sito web. Ti mostreremo quindi come aggiungere breadcrumb al tuo sito Web WordPress. Iniziamo!

Cosa sono i breadcrumb in WordPress?

Breadcrumb è il termine utilizzato per descrivere un menu di navigazione gerarchico. Questo tipo di menu prevede una scia di link, non dissimile dalla scia di briciole di pane lasciata da Hansel e Gretel:

Poiché molti utenti non accedono al tuo sito WordPress attraverso la home page, la navigazione breadcrumb li aiuta a capire dove sono atterrati. I motori di ricerca utilizzano anche i breadcrumb per comprendere meglio la gerarchia delle tue pagine web.

Vantaggi dell'aggiunta di pangrattato

L'aggiunta di menu breadcrumb di WordPress al tuo sito Web offre diversi vantaggi. Google adora i breadcrumb, ad esempio, quindi questa funzione può migliorare l'ottimizzazione per i motori di ricerca (SEO) e portare più visitatori al tuo sito.

I menu breadcrumb possono anche ridurre le frequenze di rimbalzo, perché migliorano l'esperienza utente (UX) del tuo sito. Quando gli utenti possono navigare facilmente nel tuo sito web, è più probabile che vi trascorrano del tempo.

Come aggiungere i breadcrumb su WordPress

Puoi aggiungere breadcrumb al tuo sito Web WordPress in due modi. Il metodo più semplice è utilizzare un plug-in di WordPress, ma puoi anche codificare i breadcrumb nel file header.php del tuo sito. Prima di utilizzare entrambi i metodi, dovresti creare un backup del tuo sito Web nel caso in cui qualcosa vada storto.

Metodo 1: utilizzo di un plug-in

Il modo più semplice per aggiungere breadcrumb a WordPress è con un plug-in breadcrumb. Ci sono molti plugin che puoi usare, inclusi Breadcrumb NavXT e Yoast SEO:

Yoast SEO è spesso l'opzione migliore, perché è probabilmente un plug-in che il tuo sito Web utilizza già.

Passaggio 1: scarica il plug-in Yoast SEO

Poiché Yoast è un plug-in SEO, offre una vasta gamma di funzionalità. Ciò include 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 dei plug-in del tuo sito, cercare "Yoast SEO" e installare e attivare il plug-in come qualsiasi altro.

Passaggio 2: aggiungi una funzione al tuo file header.php

Dopo che il plugin è stato attivato, devi aggiungere una funzione al file header.php del tuo sito. Per accedere a questo file, vai su Aspetto > Editor del tema e seleziona il file per aprirlo.

Quindi, aggiungi il seguente codice ovunque desideri che appaia il menu delle impostazioni breadcrumb:

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

In generale, vorrai 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 di cui sopra al file single.php o page.php del tuo tema, se desideri abilitare la funzione breadcrumb in modo che appaia altrove nella pagina. Assicurati solo di aggiungerlo solo in un posto.

Passaggio 3: attiva il supporto breadcrumb

Infine, dovrai attivare il supporto breadcrumb. In Yoast SEO, questo significa navigare su SEO > Aspetto nella ricerca > Breadcrumb :

Basta spostare l'interruttore su "Abilitato" e sei a posto! Il tuo menu breadcrumb di WordPress sarà configurato e pronto per l'uso.

Metodo 2: codificare le proprie briciole di pane

L'aggiunta di breadcrumb al sito Web può anche essere eseguita manualmente tramite la codifica. Se non si desidera utilizzare un plug-in breadcrumb, è possibile aggiungere breadcrumb senza. Prima di tentare questo, potresti voler leggere i microdati, al fine di sfruttare appieno il potenziale SEO dei breadcrumb di WordPress.

Passaggio 1: creare una funzione scheletro

Per aggiungere manualmente i breadcrumb a WordPress, dovrai creare una funzione PHP. Il primo passo nella creazione di questa funzione è costruire lo scheletro. La tua funzione scheletro avrà bisogno di un nome univoco, per evitare conflitti con altre funzioni.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

La funzione precedente è lo scheletro e il resto del codice breadcrumb verrà inserito tra parentesi graffe.

Passaggio 2: aggiungi regole di base

Dopo aver creato lo scheletro, dovrai aggiungere regole alla funzione. Le regole dovrebbero essere inserite nella sezione breadcrumb:

/* Change according to your needs */
$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 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 o meno sulla home page del tuo sito web. Sulla base di queste informazioni, la dichiarazione determinerà se i breadcrumb vengono visualizzati o meno:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol 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>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Se questa istruzione non viene aggiunta alla funzione, le impostazioni dei breadcrumb potrebbero apparire o meno quando lo desideri.

Passaggio 4: aggiungi la funzione all'intestazione del tema

Una volta completata la funzione breadcrumb, puoi aggiungerla al file header.php del tuo sito web. Passare a Aspetto > Editor del tema per aprire il file e aggiungere la funzione fino alla fine.

Quindi salva le modifiche e controlla il menu breadcrumb del tuo nuovo sito Web sul front-end. Puoi continuare a modificare la funzione e il suo posizionamento finché il menu non appare corretto (o disabilitare il breadcrumb quando necessario).

Personalizza il tuo sito con WP Engine

I menu di navigazione breadcrumb aiutano i visitatori del tuo sito a orientarsi. Inoltre, rendono più facile per i motori di ricerca comprendere la gerarchia del tuo sito web. Un plugin come Yoast SEO è il modo più semplice per aggiungere breadcrumb al tuo sito web, ma puoi anche codificarli manualmente.

L'utilizzo dell'host web giusto può aiutarti a garantire le prestazioni del tuo sito web, lasciandoti il ​​tempo di concentrarti sullo sviluppo e sull'esperienza utente. WP Engine può offrirti i migliori piani di hosting WordPress gestiti e le migliori risorse per creare un'incredibile esperienza sul sito web!