Hur man lägger till en knapp "Hoppa till recept" i WordPress (2 enkla sätt)

Matbloggare frågar oss ofta om funktioner som gör störst skillnad för deras läsare.

Efter att ha observerat många matbloggar genom åren har vi funnit att en knapp för att hoppa till receptet är en av de mest effektiva förbättringar du kan göra.

Det är en liten förändring som gör stor skillnad för att hjälpa besökare att snabbt hitta det de letar efter. Dessutom är den enkel att installera på vilken WordPress-webbplats som helst.

Vi testade olika lösningar och hittade två pålitliga metoder som fungerar konsekvent bra. Båda metoderna är nybörjarvänliga och kommer att ha din Hoppa till recept-knapp fungerande på bara några minuter.

Varför lägga till en knapp för Hoppa till recept i matblogginlägg?

En knapp för "Hoppa till recept" är en navigeringslänk som placeras högst upp i ett blogginlägg. Tekniskt sett fungerar den som en HTML-ankare som omedelbart scrollar webbläsaren ner till recept-kortet och hoppar över introduktionsinnehållet.

Läsare klagar ofta på att behöva scrolla igenom långa berättelser och annonser för att hitta ingredienser. Även om långformat innehåll hjälper till med monetarisering, behöver många besökare omedelbar tillgång till instruktioner när de lagar mat eller handlar.

Att lägga till denna knapp gör att du kan tillgodose båda typerna av läsare. Du kan behålla ditt personliga berättande för lojala fans samtidigt som du erbjuder en snabb genväg för användare som behöver svar snabbt.

Detta förbättrar den övergripande användarupplevelsen (UX) på din webbplats. När användare enkelt kan hitta det de behöver, är de mindre benägna att hoppa tillbaka till sökresultaten.

Med det i åtanke kommer vi att visa dig 2 enkla sätt att lägga till en Hoppa till recept-knapp på din matblogg: genom att använda ett WordPress-plugin för receptmakare och anpassad kod. Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

Metod 1: Använd WP Tasty Recipes för att lägga till en hopp till recept-knapp (Rekommenderas)

Det enklaste sättet att lägga till en hopp till recept-knapp i WordPress är att använda WP Tasty Recipes.

Detta receptkort- och skaparplugin har testats grundligt av oss, och vi har upptäckt många funktioner som gör det till en favorit bland matbloggare.

Utöver hopp till recept-knappen, låter Tasty Recipes dig göra dina recept utskrivbara och konvertera dem till läsarens föredragna måttenheter utan ansträngning.

Dessutom kan du tydligt visa näringsinformation, tillagningstid, portionsstorlek och användarbetyg, allt på ett snyggt och organiserat sätt.

Om du är intresserad av att lära dig mer om pluginets funktioner och hur det kan gynna din blogg, se till att kolla in vår omfattande recension av WP Tasty.

En nackdel med detta receptplugin är att det inte kommer med en gratisversion, men det är en bra investering för seriösa matbloggare som vill tjäna pengar online.

För att använda pluginet måste du först köpa en betald plan. Du kan antingen välja WP Tasty All Access Bundle eller det fristående Tasty Recipes-pluginet.

När du har gjort ett köp kan du ladda ner pluginet och installera det på din WordPress-webbplats. Du kan läsa vår guide om hur man installerar ett WordPress-plugin för mer information.

Gå sedan till WP Tasty » Dashboard från din WordPress-admin och klicka på 'Enter License'.

Infoga sedan din plugins licensnyckel, som WP Tasty borde ha skickat till din e-post efter att du gjort ett köp.

Välj sedan antingen 'Alla plugins' eller 'Tasty Recipes' i rullgardinsmenyn Plugin(s) för att aktivera. Klicka på 'Spara licens'.

När det är gjort, gå till sidan WP Tasty » Tasty Recipes från din WordPress-instrumentpanel och växla till fliken 'Inställningar'.

Som standard är alternativen för knapparna Hoppa till recept och Skriv ut recept markerade, så du kan lämna dem som de är.

En sak du kan ändra med knapparna är Quick Links Style.

WP Tasty kan också visa alternativet Hoppa till recept som en vanlig textlänk istället för knappar. Om du föredrar det kan du välja ‘Länkar’.

Men naturligtvis kan du också bara välja alternativet Knappar om det är din preferens.

Knappar-alternativet ser också mer iögonfallande ut, vilket gör det enkelt för läsarna att upptäcka det.

Det finns faktiskt många fler inställningar att experimentera med här, som att aktivera kryssrutor för ingredienslistan och receptskalning. Se till att kryssa i de alternativ som bäst passar din blogg.

När du är klar, scrolla bara ner på sidan och klicka på 'Spara ändringar'.

Nu, när du använder WP Tastys receptkort, kommer knapparna Hoppa till recept och Skriv ut recept högst upp att visas.

För att använda receptkortet kan du skapa ett nytt receptinlägg eller redigera ett befintligt med Gutenberg-blockredigeraren. Sedan kan du följa den här steg-för-steg-guiden om hur du lägger till ett receptkortblock i WordPress för mer information.

En fördel med att använda Tasty Recipes för att lägga till hopplänken är den smidiga scrollningseffekten. På så sätt kan läsare navigera direkt till receptinstruktionerna utan några ryckiga hopp på sidan.

Att använda anpassad kod för att uppnå denna effekt är komplicerat eftersom det vanligtvis kräver JavaScript eller redigering av temafiler. Det är därför vi rekommenderar plugin-metoden för de flesta användare.

Med det sagt, om du vill lägga till en Hoppa till recept-knapp gratis, kan du prova denna nästa metod.

Metod 2: Använd anpassad kod för att lägga till en Hoppa till recept-knapp (gratis)

Att lägga till en knapp för Hoppa till recept manuellt kan verka skrämmande för helt nybörjare, men oroa dig inte, vi guidar dig noggrant genom varje steg.

Om det här är första gången du lägger till anpassad kod i WordPress, föreslår vi att du använder ett kodavsnittsprogram som WPCode.

Vi har testat pluginet ingående, och det erbjuder ett säkert och enkelt sätt att infoga kodavsnitt utan att redigera temafiler. Detta minimerar risken för att oavsiktligt bryta din webbplats layout eller funktionalitet.

Nyfiken på vad mer WPCode kan göra? Kolla in vår lättförståeliga recension där vi går igenom dess funktioner och förklarar varför det är ett utmärkt verktyg för WordPress-användare.

För att använda WPCode, fortsätt och installera pluginet i din WordPress-adminpanel. Du kan läsa vår steg-för-steg-guide om hur man installerar ett WordPress-plugin för mer information.

Gå sedan till Kodavsnitt » + Lägg till avsnitt. Välj här ‘Lägg till din anpassade kod (nytt avsnitt)’ och klicka på ‘Använd avsnitt’.

Det finns två kodavsnitt du behöver lägga till separat i WPCode. Låt oss gå igenom dem en efter en:

Lägg till kod för att automatiskt infoga hopp till recept-knappen

Det första kodavsnittet lägger automatiskt till knappen Hoppa till recept i alla blogginlägg som innehåller en receptsektion. För detta kan du namnge ditt avsnitt 'Lägg till Hoppa till Recept-knapp automatiskt'.

Välj sedan ‘PHP Snippet’ i rullgardinsmenyn Kodtyp.

I rutan Kodförhandsgranskning, infoga följande kodrader:

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

Låt oss gå igenom hur den här koden fungerar.

Den första delen av koden kontrollerar ditt blogginläggs innehåll. Den letar specifikt efter en rubrik (H1 till H6) som har ett ankare-ID inställt på 'recept'.

Den andra delen, funktionen med namnet add_jump_to_recipe_button, ansvarar för att lägga till den faktiska knappen i ditt inlägg.

Om koden hittar ankare-ID:t 'recept', skapar den HTML-koden för hoppknappen. Sedan infogar den denna kod precis före innehållet i ditt blogginlägg.

På så sätt kan koden automatiskt kontrollera om receptrubriken finns och lägga till knappen vid behov.

Med det sagt måste du lägga till ett #recept-ankare till receptdelen av ditt blogginlägg. Oroa dig inte, vi visar dig hur du gör det senare.

Skrolla nu ner till avsnittet 'Insertion' och se till att metoden 'Auto Insert' är vald. När det gäller platsen kan du välja 'Frontend Only' så att koden bara körs på den framåtriktade delen av din WordPress-webbplats.

Växla sedan knappen i det övre högra hörnet för att göra koden 'Aktiv' och klicka på 'Spara utdrag'.

Lägg till en kodsnutt för att styla hopp till recept-knappen

Vi kommer nu att lägga till anpassad CSS-kod för att styla din call-to-action-knapp. Fortsätt och upprepa stegen för att skapa ett nytt anpassat kodavsnitt i WPCode och ge det ett enkelt namn, som 'Stil Hoppa till receptknapp'.

När det gäller kodtyp, välj 'CSS-utdrag'.

Nu har vi skapat en CSS-kod som gör vår knapp grön och texten i den vit. Som så här:

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

Om du vill använda olika färger kan du bara ersätta hexkoderna i koden ovan.

När du har infogat koden, scrolla ner till avsnittet Infogning och välj 'Automatisk infogning' som Infogningsmetod. Välj sedan 'Hela webbplatsens sidhuvud' som Plats.

Allt du behöver göra nu är att aktivera kodavsnittet och klicka på 'Spara avsnitt'.

Lägg till #recept-ankaret till dina receptblogginlägg

Även om du har aktiverat de två kodsnuttarna kommer hoppknappen inte att visas om du inte lägger till en #recipe-ankare till receptsektionen i dina WordPress-blogginlägg. Så det är vad vi ska göra nu.

Skapa först ett nytt receptblogginlägg eller öppna ett befintligt i blockredigeraren.

Nu, i vårt exempel, använder vi en rubrik (heading tag) (H2) för att signalera receptavsnittet i vårt blogginlägg. Vi föreslår att du gör detsamma bara för att det ska vara lättare för användare att hitta det när de läser ditt inlägg. Sökmotorer uppskattar också när ditt blogginnehåll har en organiserad struktur.

Klicka på rubrikblocket för din receptsektion. Öppna sedan menyn 'Avancerat' i sidofältet för blockinställningar. Skriv sedan in 'recept' i fältet HTML-ankare. Se till att använda enbart gemener.

Detta kommer att fungera som en ankarlänk för hoppknappen.

När det är gjort, klicka på 'Publicera' eller 'Uppdatera'.

Om du förhandsgranskar din webbplats på mobilen eller datorn, bör du nu se en knapp för Hoppa till recept högst upp på ditt blogginnehåll efter inläggstiteln.

Bonustips för att förbättra din matblogs användarupplevelse

Utöver knappen Hoppa till recept finns det andra designelement du kan använda för att göra din matblogg mer användarvänlig. Här är några förbättringar med stor effekt:

Vanliga frågor om WordPress-knappar

Här är några frågor som våra läsare ofta har ställt om att lägga till knappar i WordPress:

Hur lägger jag till länkar till knappar i WordPress?

För att lägga till en länk, välj blocket Knappar i WordPress-redigeraren. Klicka på länksymbolen i verktygsfältet som visas ovanför knappen och klistra sedan in din destinations-URL i fältet.

Hur lägger jag till en knapp för att gå till toppen i WordPress?

Den enklaste metoden är att installera ett plugin som WPFront Scroll Top. När det har aktiverats lägger det automatiskt till en knapp som visas när en användare scrollar ner, vilket gör att de snabbt kan återgå till toppen av sidan.

För att komma igång, se vår handledning om att lägga till en effekt för att scrolla till toppen i WordPress.

Hur lägger jag till en följ-knapp på en WordPress-blogg?

Du kan lägga till följ-knappar med det inbyggda blocket Sociala ikoner i blockredigeraren. Sök helt enkelt efter "Sociala ikoner", lägg till blocket och klicka på "plus"-ikonen för att välja vilka sociala medieplattformar du vill länka till.

För mer information, ta en titt på vår guide om hur man lägger till en Facebook-följknapp för författare i WordPress.

Hur sätter jag in en popup i WordPress?

Vi rekommenderar att använda OptinMonster för att lägga till popups. Det låter dig designa anpassade popups med en dra-och-släpp-byggare och styra exakt när de visas, till exempel när en användare är på väg att lämna din webbplats.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till en knapp för Hoppa till recept i WordPress. Du kanske också vill titta på vår guide om viktiga designelement för en effektiv WordPress-webbplats och hur du ställer in onlinebeställning av mat i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.