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?

Un pulsante "Salta alla ricetta" è un link di navigazione posizionato in cima a un post del blog. Tecnicamente, funziona come un'ancora HTML che scorre istantaneamente il browser verso la scheda della ricetta, saltando il contenuto introduttivo.

I lettori si lamentano spesso di dover scorrere lunghe storie e pubblicità per trovare gli ingredienti. Sebbene i contenuti di lunga durata aiutino con la monetizzazione, molti visitatori necessitano di un accesso immediato alle istruzioni durante la cottura o lo shopping.

Aggiungere questo pulsante ti consente di servire entrambi i tipi di lettori. Puoi mantenere la tua narrazione personale per i fan fedeli, fornendo al contempo un collegamento rapido per gli utenti che necessitano di risposte veloci.

Questo migliora l'esperienza utente (UX) complessiva sul tuo sito. Quando gli utenti trovano facilmente ciò di cui hanno bisogno, è meno probabile che tornino indietro ai risultati di ricerca.

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 Recipes per aggiungere un pulsante Salta alla ricetta (Consigliato)

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

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, Tasty Recipes ti consente di rendere le tue ricette stampabili e di convertirle nell'unità di misura preferita dal lettore senza sforzo.

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à del plugin e su come può avvantaggiare il tuo blog, assicurati di consultare la nostra recensione completa di WP Tasty.

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 il plugin, devi prima acquistare un piano a pagamento. Puoi scegliere il pacchetto WP Tasty All Access Bundle o il plugin autonomo 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 Tasty Recipes 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 è complicato perché di solito richiede JavaScript o la modifica dei file del tema. Ecco perché raccomandiamo il metodo del plugin per la maggior parte degli utenti.

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

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 controlla il contenuto del tuo post del blog. Cerca specificamente un tag di intestazione (da H1 a H6) che abbia un ID di ancoraggio impostato su 'recipe'.

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

Se il codice trova l'ID di ancoraggio 'recipe', crea il codice HTML per il pulsante di salto. Quindi, inserisce questo codice proprio prima del contenuto del tuo 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 uno snippet di 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 nel codice sopra.

Una volta inserito il codice, scorri verso il basso fino alla sezione Inserimento e seleziona 'Inserimento automatico' come Metodo di inserimento. Quindi, scegli 'Intestazione sito' 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'. Successivamente, digita 'recipe' nel campo Ancoraggio HTML. Assicurati di utilizzare solo lettere minuscole.

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 al pulsante Salta alla ricetta, ci sono altri elementi di design che puoi utilizzare per rendere il tuo blog di cucina più facile da usare. Ecco alcuni miglioramenti ad alto impatto:

Domande frequenti sui pulsanti di WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente riguardo all'aggiunta di pulsanti in WordPress:

Come si aggiungono collegamenti ai pulsanti in WordPress?

Per aggiungere un collegamento, seleziona il blocco Pulsanti all'interno dell'editor di WordPress. Fai clic sull'icona del collegamento nella barra degli strumenti che appare sopra il pulsante, quindi incolla l'URL di destinazione nel campo.

Come si aggiunge un pulsante "Torna in alto" in WordPress?

Il metodo più semplice è installare un plugin come WPFront Scroll Top. Una volta attivato, aggiunge automaticamente un pulsante che appare quando un utente scorre verso il basso, consentendo loro di tornare rapidamente in cima alla pagina.

Per iniziare, consulta il nostro tutorial su come aggiungere un effetto di scorrimento verso l'alto in WordPress.

Come si aggiunge un pulsante di follow su un blog WordPress?

Puoi aggiungere pulsanti di follow utilizzando il blocco Icone Social integrate nell'editor a blocchi. Cerca semplicemente "Icone Social", aggiungi il blocco e fai clic sull'icona "più" per selezionare le piattaforme di social media a cui desideri collegarti.

Per maggiori informazioni, dai un'occhiata alla nostra guida su come aggiungere un pulsante di follow di Facebook per gli autori in WordPress.

Come si inserisce un popup su WordPress?

Ti consigliamo di utilizzare OptinMonster per aggiungere popup. Ti permette di progettare popup personalizzati utilizzando un editor drag-and-drop e di controllare esattamente quando appaiono, ad esempio quando un utente sta per abbandonare il tuo sito.

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.