Hur man “enkelt” lägger till ankarlänkar i WordPress (steg för steg)

Vi använder ibland ankarlänkar i våra längre WordPress-inlägg för att hjälpa användare att snabbt hoppa till det avsnitt de vill läsa.


Ankarlänkar används ofta i tabellen över innehållssektioner eftersom de hjälper användare att flytta upp och ner en längre artikel utan att ladda om sidan. Det kan också hjälpa till med SEO eftersom Google kan visa dem under dina söklistor för enkel navigering (mer om detta senare).

I den här steg-för-steg-guiden förklarar vi vad som är ankarlänkar och visar hur du enkelt lägger till ankarlänkar i WordPress.

Lägga till ankarlänkar i WordPress

Redo? Låt oss börja med ett levande exempel på ankarlänkar.

Nedan finns en lista över alla ämnen vi kommer att täcka i den här guiden. Gå vidare och klicka på någon av dessa länkar så kommer du att gå till det specifika avsnittet.

    Vad är en ankarlänk?

    En ankarlänk är en typ av länk på sidan som tar dig till en specifik plats på samma sida. Det låter användare hoppa till det avsnitt de är mest intresserade av.

    Ta en titt på den animerade skärmdumpen nedan:

    Förhandsvisning av ankarlänk

    Som du ser, klickar du på ankarlänken till användaren till det specifika avsnittet på samma sida.

    Ankellänkar används vanligtvis i längre artiklar som innehållsförteckning som gör att användare snabbt kan hoppa till de avsnitt de vill läsa.

    Varför och när du ska använda ankarlänkar?

    En genomsnittlig användare tillbringar mindre än några sekunder innan han bestämmer sig för om de vill stanna eller lämna din webbplats. Du har bara några sekunder att övertyga användare att stanna.

    Det bästa sättet att göra det är att hjälpa dem att snabbt se den information de letar efter.

    Ankarlänkar gör det enklare genom att låta användare hoppa över resten av innehållet och hoppa direkt till den del som intresserar dem. Detta förbättrar användarupplevelsen och hjälper dig att vinna nya kunder / läsare.

    Ankarlänkar är också bra för WordPress SEO. Google kan visa en ankarlänk i sökresultaten som en “hoppa till länk”.

    Hoppa till länken i sökresultaten

    Ibland kan Google också visa flera länkar från den sidan som hoppa till länkar, och det har visat sig öka klickfrekvensen i sökresultaten. Med andra ord får du mer trafik till din webbplats.

    Flera hopp till länkar under ett sökresultat

    Med det sagt, låt oss ta en titt på hur du enkelt lägger till ankarlänkar i WordPress.

    Hur man manuellt lägger till ankarlänkar i WordPress

    Om du bara vill lägga till några ankarlänkar i din artikel kan du enkelt göra det manuellt.

    I grund och botten måste du lägga till två saker för att en ankartext ska fungera som avsett.

    1. Skapa en ankarlänk med ett #-tecken före ankartexten.
    2. Lägg till ID-attributet till texten där du vill att användaren ska tas.

    Låt oss börja med ankarlänkdelen.

    Steg 1. Skapa en ankarlänk

    Först måste du välja texten som du vill länka och klicka sedan på knappen Infoga länk i WordPress Gutenberg-redigeraren.

    Lägg till en länk i WordPress

    Detta kommer att skapa popup-länken popup där du vanligtvis lägger till URL: n eller letar efter ett inlägg eller en sida att länka.

    Men för en ankarlänk använder du helt enkelt # som prefix och anger nyckelorden för det avsnitt som du vill att användaren ska hoppa till.

    Skapa ankarlänk

    Klicka sedan på Enter-knappen för att skapa länken.

    Några användbara tips om hur du väljer vilken text du vill använda som ditt ankar #-länk:

    • Använd nyckelorden relaterade till det avsnitt du länkar till.
    • Gör inte din ankarlänk onödigt lång eller komplex.
    • Använd bindestreck för att skilja ord och göra dem mer läsbara.
    • Du kan använda stora bokstäver i ankartext för att göra det mer läsbart. Till exempel: # Best-Coffee-Shops-Manhattan.

    När du lägger till länken kan du se länken du har skapat i redigeraren. Att klicka på länken gör dock ingenting.

    Det beror på att webbläsarna inte kan hitta ankarlänken som ett ID.

    Låt oss fixa det genom att peka webbläsare till det område, avsnitt eller text som du vill visa när användare klickar på ankarlänken.

    Steg 2. Lägg till ID-attributet till det länkade avsnittet

    I innehållsredigeraren bläddrar du ner till det avsnitt som du vill att användaren ska navigera till när de klickar på ankarlänken. Vanligtvis är det en rubrik för ett nytt avsnitt.

    Klicka sedan för att välja blocket och klicka sedan på fliken Avancerat i blockinställningarna för att expandera det. Du kan helt enkelt klicka på fliken Avancerat under inställningarna för rubrikblock.

    HTML-ankare

    Efter det måste du lägga till samma text som du lagt till som ankarlänken under fältet ‘HTML-ankare’. Se till att du lägger till texten utan prefixet #.

    Du kan nu spara ditt inlägg och se din ankarlänk i handling genom att klicka på förhandsgranskningsfliken.

    Vad händer om avsnittet du vill visa inte är en rubrik utan bara ett vanligt stycke eller något annat block?

    I så fall måste du klicka på trepunktsmenyn i blockinställningarna och välja “Redigera som HTML”.

    Redigera som HTML

    Detta gör att du kan redigera HTML-koden för det specifika blocket. Du måste välja hitta HTML-taggen för det element du vill peka på. Till exempel,

    om det är ett stycke, eller

    om det är ett tabellblock, och så vidare.

    Nu måste du lägga till ditt ankare som ID-attribut till den taggen, som följande kod:

    Du kommer nu att se ett meddelande om att detta block innehåller oväntat eller ogiltigt innehåll. Du måste klicka på konvertera till HTML för att bevara de ändringar du gjort.

    Konvertera till HTML

    Hur man manuellt lägger till ankarlänk i Classic Editor

    Om du fortfarande använder den äldre klassiska redigeraren för WordPress, så här kan du lägga till ankarlänken.

    Steg 1. Skapa ankarlänken

    Välj först texten som du vill ändra till ankarlänken och klicka sedan på knappen “Infoga länk”.

    Lägga till en ankarlänk i Classic Editor

    Efter det måste du lägga till din ankarlänk med ett #-teckenprefix följt av snigeln du vill använda för länken.

    Steg 2. Lägg till ID-attributet till det länkade avsnittet

    Nästa steg är att peka webbläsarna till det avsnitt du vill visa när användare klickar på din ankarlänk.

    För det måste du byta till ‘Text’ -läget i den klassiska redigeraren. Efter det bläddrar du ner till det avsnitt som du vill visa.

    Lägga till ankar-ID i Classic Editor

    Hitta nu HTML-taggen du vill rikta in dig på. Till exempel,

    ,

    ,

    , och så vidare.

    Du måste lägga till ID-attributet till det med din ankarlänks snigel utan prefixet #, så här:

    Du kan nu spara dina ändringar och klicka på förhandsgranskningsknappen för att se din ankarlänk i aktion.

    Hur man manuellt lägger till ankarlänkar i HTML

    Om du är van vid att skriva i textläget för den gamla Classic Editor i WordPress, så är det här hur du manuellt skulle skapa en ankarlänk i HTML.

    Först måste du skapa ankarlänken med ett #-prefix med den vanliga taggen, så här:

    Bästa kaféer på Manhattan

    Därefter måste du bläddra ner till det avsnitt som du vill visa när användare klickar på länken.

    Vanligtvis är detta avsnitt en rubrik (h2, h3, h4, etc.), men det kan vara något annat HTML-element eller till och med ett enkelt stycke

    märka.

    Du måste lägga till ID-attributet till HTML-taggen och sedan lägga till ankarlänksluggen utan prefixet #.

    Bästa kaféer på Manhattan

    Du kan nu spara dina ändringar och förhandsgranska din webbplats för att testa ankarlänken.

    Hur man automatiskt lägger till rubriker som ankarlänkar i WordPress

    Den här metoden är lämplig för användare som regelbundet publicerar artiklar i lång form och behöver skapa med ankarlänkar.

    Det första du behöver göra är att installera och aktivera Easy-plugin. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

    Detta plugin gör att du automatiskt kan generera en med ankarlänkar. Den använder rubriker för att gissa innehållsavsnitten och du kan anpassa den helt för att tillgodose dina behov.

    Vid aktivering, gå till Inställningar ” sida för att konfigurera insticksinställningar.

    Enkla insticksinställningar

    Först måste du aktivera det för de inläggstyper där du vill lägga till. Som standard är plugin-programmet aktiverat för sidor, men du kan också aktivera det för dina inlägg.

    Du kan också aktivera alternativet för automatisk infoga. Detta gör att plugin automatiskt kan generera för alla artiklar, inklusive de äldre artiklarna som matchar kriterierna.

    Om du bara vill generera automatiskt för specifika artiklar kan du låta detta alternativ vara avmarkerat.

    Bläddra därefter lite nedåt för att välja var du vill visa och när du vill att den ska utlösas.

    Välj var och när du vill visa

    Du kan granska andra avancerade inställningar på sidan och ändra dem efter behov.

    Glöm inte att klicka på knappen “Spara ändringar” för att lagra dina inställningar.

    Om du aktiverade alternativet för automatisk infoga kan du nu se en befintlig artikel med det angivna antalet rubriker.

    Du kommer att märka att plugin-programmet automatiskt kommer att visas före den första rubriken i artikeln.

    Om du vill generera manuellt för specifika artiklar måste du redigera artikeln där du vill visa en med ankarlänkar.

    På skärmen för redigering av inlägg bläddrar du ner till fliken ” under redigeraren.

    Lägg till manuellt med ankarlänkar

    Härifrån kan du markera alternativet ‘Infoga’ och välja de rubriker du vill inkludera som ankarlänkar.

    Du kan nu spara dina ändringar och förhandsgranska artikeln. Plugin kommer automatiskt att visa en lista med ankarlänkar som din .

    förhandsvisning

    För mer detaljerade instruktioner, se vår artikel om hur du lägger till i WordPress.

    Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till ankarlänkar i WordPress. Du kanske också vill se våra tips om hur du optimerar dina blogginlägg för SEO och vårt val av de bästa pluginprogram för WordPress-sidbyggare.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map