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?

Un buton „Sari la rețetă” este un link de navigare plasat în partea de sus a unei postări de pe blog. Tehnic, funcționează ca un ancora HTML care derulează instantaneu browserul în jos la cardul cu rețeta, ocolind conținutul introductiv.

Cititorii se plâng adesea de derularea prin povești lungi și reclame pentru a găsi ingredientele. Deși conținutul de lungă durată ajută la monetizare, mulți vizitatori au nevoie de acces imediat la instrucțiuni în timp ce gătesc sau fac cumpărături.

Adăugarea acestui buton vă permite să serviți ambele tipuri de cititori. Puteți menține povestirea personală pentru fanii loiali, oferind în același timp o scurtătură rapidă pentru utilizatorii care au nevoie de răspunsuri rapide.

Acest lucru îmbunătățește experiența generală a utilizatorului (UX) pe site-ul dvs. Când utilizatorii pot găsi cu ușurință ceea ce au nevoie, este mai puțin probabil să se întoarcă la rezultatele căutării.

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 Recipes pentru a adăuga un buton „Sari la rețetă” (Recomandat)

Cea mai ușoară modalitate de a adăuga un buton „Sari la rețetă” în WordPress este prin utilizarea WP Tasty Recipes.

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 „Sari la rețetă”, Tasty Recipes vă permite să faceți rețetele imprimabile și să le convertiți 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 pluginului și cum poate beneficia blogul dvs., nu ezitați să consultați recenzia noastră completă despre WP Tasty.

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 pluginul, trebuie mai întâi să achiziționați un plan plătit. Puteți opta fie pentru pachetul WP Tasty All Access Bundle, fie pentru pluginul independent 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 Tasty Recipes pentru a adăuga linkul de salt este efectul de derulare 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 complicată, deoarece necesită de obicei JavaScript sau modificarea fișierelor temei. De aceea, recomandăm metoda pluginului pentru majoritatea utilizatorilor.

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 „Sari la rețetă”

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țetă. Pentru aceasta, puteți numi fragmentul dvs. de cod „Adaugă 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 verifică conținutul postării dvs. de blog. Caută în mod specific o etichetă de antet (H1 până la H6) care are un ID de ancoră setat la „recipe”.

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

Dacă codul găsește ID-ul de ancoră „recipe”, creează codul HTML pentru butonul de salt. Apoi, inserează acest cod chiar înainte de conținutul postării dvs. de 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 fragment de cod pentru a stiliza butonul „Sari 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 hex din codul de mai sus.

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 întregului site” 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 dvs. de rețetă. Apoi, în bara laterală a setărilor blocului, deschideți meniul „Avansat”. Apoi, introduceți „recipe” în câmpul Ancoră HTML. Asigurați-vă că utilizați doar litere mici.

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

Dincolo de butonul Salt la rețetă, există și alte elemente de design pe care le puteți folosi pentru a face blogul dvs. culinar mai ușor de utilizat. Iată câteva îmbunătățiri cu impact ridicat:

Întrebări frecvente despre butoanele WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent despre adăugarea de butoane în WordPress:

Cum adaug linkuri la butoane în WordPress?

Pentru a adăuga un link, selectați blocul Butoane din editorul WordPress. Faceți clic pe pictograma de link din bara de instrumente care apare deasupra butonului, apoi lipiți URL-ul destinație în câmp.

Cum adaug un buton „Mergi sus” în WordPress?

Cea mai ușoară metodă este instalarea unui plugin precum WPFront Scroll Top. Odată activat, acesta adaugă automat un buton care apare atunci când un utilizator derulează în jos, permițându-i să revină rapid în partea de sus a paginii.

Pentru a începe, consultați tutorialul nostru despre adăugarea unui efect de derulare lină în sus în WordPress.

Cum adaug un buton de urmărire pe un blog WordPress?

Puteți adăuga butoane de urmărire folosind blocul încorporat Pictograme sociale din editorul de blocuri. Pur și simplu căutați „Pictograme sociale”, adăugați blocul și faceți clic pe pictograma „plus” pentru a selecta platformele de socializare la care doriți să vă conectați.

Pentru mai multe informații, consultați ghidul nostru despre cum să adăugați un buton de urmărire Facebook pentru autori în WordPress.

Cum pun un popup pe WordPress?

Recomandăm utilizarea OptinMonster pentru a adăuga popups. Acesta vă permite să creați popups personalizate folosind un constructor drag-and-drop și să controlați exact când apar acestea, de exemplu, atunci când un utilizator este pe cale să părăsească site-ul dvs.

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.