Come aggiungere un pulsante 'Salta alla ricetta' in WordPress (2 modi semplici)

I food blogger ci chiedono spesso quali funzionalità fanno la differenza maggiore per i loro lettori.

Dopo aver osservato molti blog di cucina nel corso degli anni, abbiamo scoperto che aggiungere un pulsante 'salta alla ricetta' è uno dei miglioramenti più efficaci che puoi apportare.

È un piccolo cambiamento che fa molta strada nell'aiutare i visitatori a trovare rapidamente ciò che cercano. Inoltre, è semplice da configurare su qualsiasi sito WordPress.

Abbiamo testato diverse soluzioni e trovato due metodi affidabili che funzionano costantemente bene. Entrambi i metodi sono adatti ai principianti e avranno il tuo pulsante 'salta alla ricetta' funzionante in pochi minuti.

Perché aggiungere un pulsante 'Salta alla ricetta' nei post dei blog di cucina?

Uno dei reclami più comuni che abbiamo visto nel food blogging è che i lettori devono scorrere lunghe storie e pubblicità prima di raggiungere la ricetta vera e propria.

Sebbene queste storie aiutino con la SEO e la monetizzazione, e molti lettori fedeli apprezzino il tocco personale, non tutti hanno il tempo di leggere tutto.

Pensaci: qualcuno potrebbe essere al supermercato a controllare gli ingredienti, o in cucina pronto per iniziare a cucinare. Vogliono solo un accesso rapido alle istruzioni della ricetta.

È qui che un pulsante 'Salta alla ricetta' torna utile. Offre ai visitatori frettolosi un modo rapido per saltare alla ricetta, consentendoti comunque di mantenere lo stile narrativo e la strategia di monetizzazione del tuo blog.

In questo modo, soddisfi entrambi i tipi di lettori: quelli che apprezzano i tuoi contenuti e quelli che hanno solo bisogno della ricetta velocemente.

L'aggiunta di questo pulsante può migliorare l'esperienza utente sul tuo sito e potenzialmente mantenere i visitatori impegnati più a lungo, aumentando le tue visualizzazioni di pagina e riducendo i tassi di rimbalzo.

Tenendo presente questo, ti mostreremo 2 modi semplici per aggiungere un pulsante Salta alla ricetta al tuo blog di cucina: utilizzando un plugin per la creazione di ricette WordPress e codice personalizzato. Puoi utilizzare i collegamenti rapidi qui sotto per passare al tuo metodo preferito:

Metodo 1: Usa WP Tasty per aggiungere un pulsante Salta alla ricetta (Consigliato)

Il modo più semplice per aggiungere un pulsante Salta alla ricetta in WordPress è utilizzare WP Tasty.

Questo plugin per schede e creazione di ricette è stato ampiamente testato da noi e abbiamo scoperto molte funzionalità che lo rendono uno dei preferiti tra i food blogger.

Oltre al pulsante Salta alla ricetta, WP Tasty ti consente di rendere le tue ricette stampabili e di convertirle senza sforzo nell'unità di misura preferita dal lettore.

Inoltre, puoi visualizzare chiaramente dati nutrizionali, tempo di cottura, porzioni e valutazioni degli utenti, tutto in modo ordinato e organizzato.

Se sei interessato a saperne di più sulle capacità di WP Tasty e su come può avvantaggiare il tuo blog, assicurati di consultare la nostra recensione completa del plugin.

Un aspetto negativo di questo plugin per ricette è che non è disponibile una versione gratuita, ma è un ottimo investimento per i food blogger seri che vogliono guadagnare online.

Ora, per utilizzare WP Tasty, devi prima acquistare un piano a pagamento. Puoi optare per il WP Tasty All Access Bundle o per il plugin autonomo WP Tasty Tasty Recipes.

Una volta effettuato l'acquisto, puoi scaricare il plugin e installarlo sul tuo sito WordPress. Puoi leggere la nostra guida su come installare un plugin WordPress per maggiori informazioni.

Dopodiché, vai su WP Tasty » Dashboard dal tuo pannello di amministrazione di WordPress e fai clic su 'Inserisci licenza'.

Successivamente, inserisci la chiave di licenza del tuo plugin, che WP Tasty dovrebbe averti inviato via email dopo l'acquisto.

Quindi, seleziona 'Tutti i plugin' o 'Tasty Recipes' nel menu a discesa Plugin da attivare. Fai clic su 'Salva licenza'.

Fatto ciò, vai alla pagina WP Tasty » Tasty Recipes dal tuo pannello di controllo di WordPress e passa alla scheda 'Impostazioni'.

Per impostazione predefinita, le opzioni per i pulsanti Salta alla ricetta e Stampa ricetta saranno selezionate, quindi puoi lasciarle così come sono.

Una cosa che puoi cambiare riguardo ai pulsanti è lo Stile dei collegamenti rapidi.

WP Tasty può anche visualizzare l'opzione Salta alla ricetta come un normale collegamento di testo invece che come pulsanti. Se preferisci, puoi selezionare 'Link'.

Ma naturalmente, puoi anche scegliere l'opzione Pulsanti se questa è la tua preferenza.

L'opzione Pulsanti è anche più accattivante, rendendola facile da individuare per i lettori.

Ci sono in realtà molte altre impostazioni con cui giocare qui, come l'abilitazione delle caselle di controllo per l'elenco degli ingredienti e la scalabilità delle ricette. Assicurati di selezionare le opzioni che meglio si adattano al tuo blog.

Una volta terminato, scorri semplicemente la pagina verso il basso e fai clic su 'Salva modifiche'.

Ora, ogni volta che utilizzi la card ricetta di WP Tasty, i pulsanti Salta alla ricetta e Stampa ricetta in alto verranno visualizzati.

Per utilizzare la card ricetta, puoi creare un nuovo post ricetta o modificarne uno esistente utilizzando l'editor a blocchi di Gutenberg. Quindi, puoi seguire questa guida passo passo su come aggiungere un blocco card ricetta in WordPress per maggiori informazioni.

Un vantaggio dell'utilizzo di WP Tasty per aggiungere il link di salto è l'effetto di scorrimento fluido. In questo modo, i lettori possono navigare direttamente alle istruzioni della ricetta senza salti bruschi sulla pagina. L'utilizzo di codice personalizzato per ottenere questo effetto è leggermente più complicato, soprattutto per i principianti.

Detto questo, se vuoi aggiungere un pulsante Salta alla ricetta gratuitamente, puoi provare questo metodo successivo.

Metodo 2: Usa codice personalizzato per aggiungere un pulsante Salta alla ricetta (Gratuito)

Aggiungere un pulsante Salta alla ricetta manualmente potrebbe sembrare scoraggiante per i principianti assoluti, ma non preoccuparti, ti guideremo attentamente attraverso ogni passaggio.

Se è la prima volta che aggiungi codice personalizzato a WordPress, ti suggeriamo di utilizzare un plugin per snippet di codice come WPCode.

Abbiamo testato ampiamente il plugin e offre un modo sicuro e semplice per inserire snippet di codice senza modificare i file del tema. Ciò riduce al minimo il rischio di danneggiare accidentalmente il layout o la funzionalità del tuo sito web.

Curioso di sapere cos'altro può fare WPCode? Dai un'occhiata alla nostra recensione facile da seguire in cui analizziamo le sue funzionalità e spieghiamo perché è un ottimo strumento per gli utenti di WordPress.

Per utilizzare WPCode, procedi con l'installazione del plugin nella tua bacheca di amministrazione di WordPress. Puoi leggere la nostra guida passo passo su come installare un plugin di WordPress per maggiori dettagli.

Successivamente, vai su Snippet di codice » + Aggiungi snippet. Qui, seleziona ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic su ‘Usa snippet’.

Ci sono due snippet di codice che devi aggiungere separatamente in WPCode. Vediamoli uno per uno:

Aggiungi un codice per inserire automaticamente il pulsante Salta alla ricetta in tutti i post delle ricette

Il primo snippet di codice aggiungerà automaticamente il pulsante Salta alla ricetta in tutti i post del blog contenenti una sezione ricetta. Per questo, puoi nominare il tuo snippet 'Aggiungi automaticamente il pulsante Salta alla ricetta'.

Quindi, seleziona 'Snippet PHP' nel menu a discesa Tipo di codice.

Nella casella Anteprima codice, inserisci le seguenti righe di codice:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Vediamo come funziona questo codice.

La prima parte del codice, la funzione chiamata has_recipe_anchor, verifica se nel tuo post del blog è presente un tag di intestazione (da H1 a H6) con un'ancora impostata su 'recipe'. La funzione preg_match cerca nel tuo testo questo specifico modello.

La seconda parte, la funzione chiamata add_jump_to_recipe_button, è responsabile dell'aggiunta del pulsante effettivo al tuo post.

Se la funzione has_recipe_anchor del passaggio precedente ha trovato un'intestazione con l'ancora della ricetta, crea il codice HTML per il pulsante di salto. Quindi, inserisce questo codice proprio prima del contenuto del tuo post del blog.

L'ultima riga di codice, add_filter('the_content', 'add_jump_to_recipe_button');, dice essenzialmente a WordPress di eseguire la funzione add_jump_to_recipe_button ogni volta che recupera il contenuto di un post del blog.

In questo modo, il codice può controllare automaticamente l'intestazione della ricetta e aggiungere il pulsante se necessario.

Detto questo, dovrai aggiungere un'ancora #recipe alla sezione ricetta del tuo post del blog. Non preoccuparti, ti mostreremo come farlo più avanti.

Ora, scorri verso il basso fino alla sezione 'Inserimento' e assicurati che sia selezionato il metodo 'Inserimento automatico'. Per quanto riguarda la Posizione, puoi scegliere 'Solo frontend' in modo che il codice venga eseguito solo nella parte visibile del tuo sito web WordPress.

Quindi, attiva l'interruttore nell'angolo in alto a destra per rendere il codice 'Attivo' e fai clic su 'Salva snippet'.

Aggiungi un codice per stilizzare il pulsante Salta alla ricetta

Aggiungeremo ora del codice CSS personalizzato per stilizzare il tuo pulsante call-to-action. Procedi e ripeti i passaggi per creare un nuovo snippet di codice personalizzato in WPCode e dagli un nome semplice, come 'Stile Pulsante Salta alla Ricetta'.

Per quanto riguarda il Tipo di codice, seleziona ‘Frammento CSS’.

Ora, abbiamo creato un codice CSS che renderà il nostro pulsante verde e il testo al suo interno bianco. Come questo:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

Se desideri utilizzare colori diversi, puoi semplicemente sostituire i codici esadecimali in background-color (per il colore del pulsante), color (per il testo) e background-color sotto .jump-to-recipe-button:hover (per il colore del pulsante quando il cursore passa sopra il pulsante).

Una volta inserito il codice, scorri verso il basso fino alla sezione Inserimento e seleziona 'Inserimento automatico' come Metodo di inserimento. Quindi, scegli 'Intero sito - piè di pagina' come Posizione.

Tutto ciò che devi fare ora è attivare lo snippet di codice e fare clic su 'Salva Snippet'.

Aggiungi l'ancora #recipe ai tuoi post del blog di ricette

Anche se hai attivato i due snippet di codice, il pulsante di salto non apparirà a meno che tu non aggiunga un'ancora #recipe alla sezione della ricetta dei tuoi post del blog di WordPress. Quindi è quello che faremo ora.

Innanzitutto, crea un nuovo post del blog di ricette o aprine uno esistente nell'editor a blocchi.

Ora, nel nostro esempio, stiamo utilizzando un tag di intestazione (H2) per segnalare la sezione ricetta del nostro post del blog. Ti suggeriamo di fare lo stesso in modo che sia più facile per gli utenti trovarla quando leggono il tuo post. Anche i motori di ricerca apprezzano quando il contenuto del tuo blog ha una struttura organizzata.

Fai clic sul blocco Intestazione della tua sezione ricetta. Quindi, nella barra laterale delle impostazioni del blocco, apri il menu 'Avanzate' e digita 'ricetta' nel campo Ancora HTML.

Questo servirà come collegamento di ancoraggio per il pulsante di salto.

Fatto ciò, fai clic su 'Pubblica' o 'Aggiorna'.

Se visualizzi in anteprima il tuo sito web su dispositivi mobili o desktop, dovresti ora vedere un pulsante Salta alla ricetta in cima al contenuto del tuo blog dopo il titolo del post.

Suggerimenti bonus per migliorare l'esperienza utente del tuo food blog

Oltre a un pulsante Salta alla ricetta, ci sono altri elementi di design di WordPress che puoi utilizzare per migliorare l'esperienza utente sul tuo blog di cucina.

Ad esempio, evidenziare il testo nei tuoi post può essere un ottimo modo per attirare l'attenzione su informazioni importanti o consigli di cucina. Questi potrebbero essere ingredienti specifici, tempi di cottura o sostituzioni alternative.

Le note a piè di pagina sono un altro strumento utile. Ti consentono di elaborare un particolare passaggio della ricetta o un ingrediente senza interrompere il flusso delle tue istruzioni principali.

Molti utenti sfoglieranno le tue ricette dai loro telefoni o tablet. Un design ottimizzato per dispositivi mobili garantisce che i tuoi contenuti siano formattati correttamente e facili da leggere su varie dimensioni dello schermo.

Infine, i link di navigazione breadcrumb possono migliorare la navigazione del sito web. Questi piccoli link nella parte superiore della pagina mostrano agli utenti la loro posizione attuale all'interno della gerarchia del tuo sito web. Ciò rende più facile per loro trovare la strada per tornare alle sezioni precedenti o sfogliare ricette correlate.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere un pulsante Salta alla ricetta in WordPress. Potresti anche voler consultare la nostra guida su elementi chiave di design per un sito web WordPress efficace e come impostare l'ordinazione di cibo online in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.