Cum să adăugați un buton „Sări la rețetă” în WordPress (2 moduri ușoare)

Bloggerii culinari ne întreabă adesea despre funcționalitățile care fac cea mai mare diferență pentru cititorii lor.

După ce am observat multe bloguri culinare de-a lungul anilor, am constatat că adăugarea unui buton „sari la rețetă” este una dintre cele mai eficiente îmbunătățiri pe care le puteți face.

Este o mică schimbare care contribuie mult la a ajuta vizitatorii să găsească rapid ceea ce caută. În plus, este simplu de configurat pe orice site WordPress.

Am testat diferite soluții și am găsit două metode fiabile care funcționează constant bine. Ambele metode sunt prietenoase cu începătorii și vor face ca butonul dvs. „Salt la rețetă” să funcționeze în doar câteva minute.

De ce să adăugați un buton "Salt la rețetă" în postările de blog culinar?

Una dintre cele mai frecvente plângeri pe care le-am văzut în bloggingul culinar este că cititorii trebuie să deruleze prin povești lungi și reclame înainte de a ajunge la rețeta propriu-zisă.

Deși aceste povești ajută la SEO și monetizare, și mulți cititori fideli se bucură de nota personală, nu toată lumea are timp să citească totul.

Gândiți-vă: cineva ar putea fi la magazinul alimentar verificând ingredientele sau în bucătăria sa gata să înceapă gătitul. Ei doresc doar acces rapid la instrucțiunile rețetei.

Aici este util un buton "Salt la rețetă". Oferă vizitatorilor grăbiți o modalitate rapidă de a sări la rețetă, permițându-vă în același timp să mențineți stilul de povestire al blogului dvs. și strategia de monetizare.

Astfel, îi mulțumiți ambelor tipuri de cititori – celor care se bucură de conținutul dvs. și celor care au nevoie doar rapid de rețetă.

Adăugarea acestui buton poate îmbunătăți experiența utilizatorului pe site-ul dvs. și poate menține vizitatorii angajați pentru mai mult timp, crescând numărul de vizualizări ale paginilor și reducând ratele de respingere.

Având în vedere acest lucru, vă vom arăta 2 moduri simple de a adăuga un buton "Salt la rețetă" pe blogul dvs. culinar: utilizând un plugin pentru rețete WordPress și cod personalizat. Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Utilizați WP Tasty pentru a adăuga un buton "Sari la rețetă" (Recomandat)
• Metoda 2: Utilizați cod personalizat pentru a adăuga un buton Salt la rețetă (Gratuit)
• Sfaturi bonus pentru a îmbunătăți experiența utilizatorului pe blogul tău culinar

Metoda 1: Utilizați WP Tasty pentru a adăuga un buton "Sari la rețetă" (Recomandat)

Cel mai simplu mod de a adăuga un buton "Salt la rețetă" în WordPress este prin utilizarea WP Tasty.

Acest plugin pentru carduri și crearea de rețete a fost testat extensiv de noi și am descoperit multe funcții care îl fac un favorit printre bloggerii culinari.

Dincolo de butonul "Salt la rețetă", WP Tasty vă permite să faceți rețetele dvs. printabile și le convertește fără efort în unitatea de măsură preferată a cititorului.

În plus, puteți afișa clar date nutriționale, timpul de gătire, dimensiunea porției și ratingurile utilizatorilor, totul într-un mod ordonat și organizat.

Dacă sunteți interesat să aflați mai multe despre capabilitățile WP Tasty și cum poate beneficia blogul dvs., asigurați-vă că consultați recenzia noastră completă a pluginului.

Un dezavantaj al acestui plugin pentru rețete este că nu vine cu o versiune gratuită, dar este o investiție excelentă pentru bloggerii culinari serioși care doresc să câștige bani online.

Acum, pentru a utiliza WP Tasty, trebuie mai întâi să achiziționați un plan plătit. Puteți opta fie pentru WP Tasty All Access Bundle, fie pentru pluginul independent WP Tasty Tasty Recipes.

Odată ce ați efectuat o achiziție, puteți descărca pluginul și îl puteți instala pe site-ul dvs. WordPress. Puteți citi ghidul nostru despre cum să instalați un plugin WordPress pentru mai multe informații.

După aceea, accesați WP Tasty » Dashboard din administratorul WordPress și faceți clic pe „Enter License”.

În continuare, introduceți cheia de licență a pluginului dvs., pe care WP Tasty ar trebui să v-o fi trimis prin e-mail după ce ați efectuat o achiziție.

Apoi, selectați fie „Toate pluginurile”, fie „Tasty Recipes” în meniul derulant Plugin(uri) de activat. Faceți clic pe „Salvează licența”.

Cu asta făcut, accesați pagina WP Tasty » Tasty Recipes din tabloul de bord WordPress și comutați la fila „Setări”.

Implicit, opțiunile pentru butoanele „Salt la rețetă” și „Imprimă rețeta” vor fi bifate, deci le puteți lăsa așa cum sunt.

Un lucru pe care îl poți schimba la butoane este Stilul linkurilor rapide.

WP Tasty poate afișa, de asemenea, opțiunea Salt la rețetă ca un link text obișnuit în loc de butoane. Dacă preferați, puteți selecta „Linkuri”.

Dar, desigur, puteți alege și opțiunea Butoane dacă aceasta este preferința dvs.

Opțiunea Butoane arată, de asemenea, mai atrăgătoare, făcându-le ușor de reperat de către cititori.

Există de fapt mult mai multe setări de explorat aici, cum ar fi activarea casetelor de selectare pentru lista de ingrediente și scalarea rețetelor. Asigurați-vă că bifați opțiunile care se potrivesc cel mai bine blogului dvs.

Odată terminat, derulați pagina în jos și faceți clic pe „Salvare modificări”.

Acum, ori de câte ori utilizați cardul de rețete WP Tasty, butoanele "Salt la rețetă" și "Imprimă rețeta" din partea de sus vor apărea.

Pentru a utiliza cardul de rețetă, puteți crea o nouă postare de rețetă sau edita una existentă folosind editorul de blocuri Gutenberg. Apoi, puteți urma acest ghid pas cu pas despre cum să adăugați un bloc de card de rețetă în WordPress pentru mai multe informații.

Un beneficiu al utilizării WP Tasty pentru a adăuga linkul de salt este efectul de defilare lină. În acest fel, cititorii pot naviga direct la instrucțiunile rețetei, fără salturi bruște pe pagină. Utilizarea codului personalizat pentru a obține acest efect este puțin mai complicată, mai ales pentru începători.

Acestea fiind spuse, dacă doriți să adăugați un buton „Salt la rețetă” gratuit, atunci puteți încerca următoarea metodă.

Metoda 2: Utilizați cod personalizat pentru a adăuga un buton Salt la rețetă (Gratuit)

Adăugarea manuală a unui buton "Sări la rețetă" poate părea intimidantă pentru începătorii completi, dar nu vă faceți griji, deoarece vă vom ghida cu atenție prin fiecare pas.

Dacă este prima dată când aduci cod personalizat în WordPress, atunci îți sugerăm să folosești un plugin pentru fragmente de cod, cum ar fi WPCode.

Am testat extensiv pluginul și oferă o modalitate sigură și simplă de a insera fragmente de cod fără a edita fișierele temei. Acest lucru minimizează riscul de a strica accidental aspectul sau funcționalitatea site-ului dvs.

Curios ce altceva poate face WPCode? Consultați recenzia noastră ușor de urmărit, unde detaliem funcțiile sale și explicăm de ce este un instrument excelent pentru utilizatorii WordPress.

Pentru a utiliza WPCode, instalați pluginul în tabloul de bord de administrare WordPress. Puteți citi ghidul nostru pas cu pas despre cum să instalați un plugin WordPress pentru mai multe detalii.

Apoi, accesați Fragmente de cod » + Adăugați fragment. Aici, selectați „Adăugați propriul cod personalizat (Fragment nou)” și faceți clic pe „Utilizați fragmentul”.

Există două fragmente de cod pe care trebuie să le adăugați separat în WPCode. Să le parcurgem pe rând:

Adăugați un cod pentru a insera automat butonul Salt la Rețetă în toate postările cu rețete

Primul fragment de cod va adăuga automat butonul „Salt la rețetă” în toate postările de blog care conțin o secțiune de rețete. Pentru aceasta, puteți numi fragmentul dvs. „Adăugați automat butonul Salt la rețetă”.

Apoi, selectează „Fragment PHP” în meniul derulant Tip de cod.

În caseta de previzualizare a codului, inserați următoarele linii de cod:

/**
 * 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');

Să vedem cum funcționează acest cod.

Prima parte a codului, funcția numită has_recipe_anchor, verifică dacă există o etichetă de titlu (H1 până la H6) în postarea ta de blog care are o ancoră setată la „recipe”. Funcția preg_match caută în textul tău acest model specific.

A doua parte, funcția numită add_jump_to_recipe_button, este responsabilă pentru adăugarea butonului propriu-zis în postarea dvs.

Dacă funcția has_recipe_anchor din pasul anterior a găsit un titlu cu ancora rețetei, aceasta creează codul HTML pentru butonul de salt. Apoi, inserează acest cod chiar înainte de conținutul postării tale de blog.

Ultima linie de cod, add_filter('the_content', 'add_jump_to_recipe_button');, spune practic WordPress-ului să ruleze funcția add_jump_to_recipe_button ori de câte ori preia conținutul unei postări de pe blog.

În acest fel, codul poate verifica automat antetul rețetei și poate adăuga butonul dacă este necesar.

Acestea fiind spuse, va trebui să adăugați o ancoră #recipe la secțiunea rețetei din postarea dvs. de pe blog. Nu vă faceți griji, vă vom arăta cum să faceți acest lucru mai târziu.

Acum, derulează în jos la secțiunea „Inserare” și asigură-te că metoda „Inserare automată” este selectată. În ceea ce privește Locația, poți alege „Doar frontend” astfel încât codul să ruleze doar pe partea vizibilă a site-ului tău WordPress.

Apoi, comutați butonul din colțul din dreapta sus pentru a face codul „Activ” și faceți clic pe „Salvare fragment”.

Adăugați un cod pentru a stiliza butonul Salt la rețetă

Vom adăuga acum cod CSS personalizat pentru a stiliza butonul dvs. de apel la acțiune. Continuați și repetați pașii pentru a crea un nou fragment de cod personalizat în WPCode și dați-i un nume simplu, cum ar fi „Stilizați butonul Salt la rețetă”.

În ceea ce privește Tipul de cod, selectați „Fragment de cod CSS”.

Acum, am creat un cod CSS care va face butonul nostru verde și textul din el alb. Astfel:

.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;
}

Dacă doriți să utilizați culori diferite, atunci puteți înlocui pur și simplu codurile hexazecimale din background-color (pentru culoarea butonului), color (pentru text) și background-color sub .jump-to-recipe-button:hover (pentru culoarea butonului când cursorul trece peste buton).

După ce ați inserat codul, derulați în jos la secțiunea Inserare și selectați „Inserare automată” ca Metodă de inserare. Apoi, alegeți „Antetul site-ului” ca Locație.

Tot ce trebuie să faceți în continuare este să activați fragmentul de cod și să faceți clic pe „Salvează fragmentul”.

Adaugă ancora #recipe la postările tale de blog cu rețete

Chiar dacă ați activat cele două fragmente de cod, butonul de salt nu va apărea decât dacă adăugați o ancoră #recipe la secțiunea de rețete a postărilor de pe blogul dvs. WordPress. Deci, asta vom face acum.

Mai întâi, creați o nouă postare de blog cu rețete sau deschideți una existentă în editorul de blocuri.

Acum, în exemplul nostru, folosim o etichetă de antet (H2) pentru a semnala secțiunea de rețete a postării noastre de pe blog. Vă sugerăm să faceți același lucru, doar pentru a fi mai ușor pentru utilizatori să o găsească atunci când citesc postarea dvs. Motoarele de căutare apreciază, de asemenea, atunci când conținutul blogului dvs. are o structură organizată.

Continuați și faceți clic pe blocul Antet al secțiunii rețetei. Apoi, în bara laterală Setări bloc, deschideți meniul „Avansat” și introduceți „recipe” în câmpul Ancoră HTML.

Acesta va servi ca un link de ancoră pentru butonul de salt.

După ce ați terminat, faceți clic pe „Publicați” sau „Actualizați”.

Dacă previzualizați site-ul dvs. pe mobil sau pe desktop, ar trebui să vedeți acum un buton "Salt la rețetă" deasupra conținutului blogului dvs., după titlul postării.

Sfaturi bonus pentru a îmbunătăți experiența utilizatorului pe blogul tău culinar

Pe lângă un buton "Salt la rețetă", există și alte elemente de design WordPress pe care le puteți utiliza pentru a îmbunătăți experiența utilizatorului pe blogul dvs. culinar.

De exemplu, evidențierea textului în postările dvs. poate fi o modalitate excelentă de a atrage atenția asupra informațiilor importante sau a sfaturilor de gătit. Acestea ar putea fi ingrediente specifice, timpi de gătire sau substituții alternative.

Notele de subsol sunt un alt instrument util. Ele vă permit să elaborați un pas sau un ingredient specific al rețetei fără a întrerupe fluxul instrucțiunilor principale.

Mulți utilizatori vor naviga pe rețetele tale de pe telefoanele sau tabletele lor. Un design optimizat pentru mobil asigură că conținutul tău este formatat corect și ușor de citit pe diverse dimensiuni de ecran.

În cele din urmă, linkurile de navigare tip firimituri pot îmbunătăți navigarea pe site. Aceste mici linkuri din partea de sus a paginii arată utilizatorilor locația lor curentă în ierarhia site-ului dvs. Acest lucru le face mai ușor să găsească drumul înapoi către secțiuni anterioare sau să răsfoiască rețete similare.

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați un buton "Sări la rețetă" în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre elemente cheie de design pentru un site WordPress eficient și cum să configurați comanda online de mâncare în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.