Hur man lägger till pilknapps-tangentbordsnavigering i WordPress

Att förbättra din webbplats navigering kan öka användarupplevelsen, vilket gör det lättare för besökare att bläddra igenom innehåll effektivt.

Att lägga till tangentbordsnavigering med piltangenter i WordPress gör det möjligt för användare att navigera genom din webbplats inlägg med bara sina piltangenter. WordPress erbjuder dock inte dessa navigeringsfunktioner som standard.

På WPBeginner fokuserar vi på att skapa en smidig och njutbar användarupplevelse. Med tiden har vi testat olika metoder för att förbättra vår webbplats användbarhet, inklusive navigering med piltangenter. Även om den här funktionen inte är viktig för vår blogg, förstår vi hur den kan vara fördelaktig för e-boksförfattare och mindre bloggar som vill förbättra läsarupplevelsen.

I den här artikeln visar vi hur du enkelt lägger till tangentbordsnavigering med piltangenter i WordPress. 

Varför lägga till pilknappsnagering i WordPress?

Att lägga till tangentbordsnavigering gör det enkelt för användare att bläddra bland blogginlägg på din WordPress-webbplats.

Användare kan se nästa och föregående blogginlägg genom att klicka på höger och vänster piltangenter på sina tangentbord.

Den här funktionen är praktisk när du vill att användare enkelt ska kunna bläddra igenom inlägg i sekventiell ordning. Till exempel, om du använder blogginlägg för att publicera kapitel i en bok, portföljobjekt, historiska händelser eller mer.

Att lägga till piltangentnavigering kan också vara ett utmärkt sätt att förbättra användarupplevelsen på din WordPress-blogg genom att uppmuntra användare att utforska din webbplats mer.

Med det sagt, låt oss se hur man enkelt lägger till tangentbordsnavigering med piltangenter i WordPress, steg för steg:

• Metod 1: Lägg till tangentbordsnavigering med piltangenter med WPCode (Rekommenderas)
• Metod 2: Lägga till pilknappsnagering med pluginet Arrow Keys Navigation
• Pilnavigering för WordPress-bildspel och bildgallerier

Metod 1: Lägg till tangentbordsnavigering med piltangenter med WPCode (Rekommenderas)

Du kan enkelt lägga till navigering med piltangenter på din WordPress-webbplats genom att lägga till kod i din WordPress-temas functions.php-fil.

Genom att göra detta kommer användarna att kunna växla mellan olika sidor och inlägg på din webbplats med hjälp av piltangenterna på sina tangentbord.

Tänk dock på att lägga till anpassad kod i WordPress kärnfiler kan vara riskabelt, och ett litet misstag kan förstöra din webbplats.

Det är därför vi alltid rekommenderar att använda WPCode. Det är det bästa tillägget för kodsnuttar för WordPress på marknaden som gör det säkert och enkelt att lägga till kod på din webbplats.

Först måste du installera och aktivera WPCode-pluginet. För detaljer, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Vid aktivering, gå till sidan Kodavsnitt » + Lägg till kodavsnitt från WordPress adminpanel.

Sedan kan du klicka på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.

Detta tar dig till sidan 'Skapa anpassad snutt', där du kan börja med att skriva ett namn för din kodsnutt.

Välj här helt enkelt ‘Universell kodsnutt’ som ‘Kodtyp’ från rullgardinsmenyn i det övre högra hörnet av skärmen.

Kopiera och klistra sedan helt enkelt in följande kod i rutan 'Kodförhandsgranskning':

<script type="text/javascript">
        document.onkeydown = function (e) {
            var e = e || event, 
            keycode = e.which || e.keyCode; 
            if (keycode == 37 || keycode == 33)
                location = "<?php echo get_permalink(get_previous_post()); ?>";
            if (keycode == 39 || keycode == 34)
                location = "<?php echo get_permalink(get_next_post()); ?>";
        }
    </script>

Skrolla sedan ner till avsnittet 'Infogning' för att välja en plats för kodavsnittet.

Välj här alternativet "Sidomfattande sidfot" från rullgardinsmenyn bredvid alternativet "Plats".

Välj därefter ‘Infoga automatiskt’ som infogningsmetod för anpassad kod.

Koden kommer nu att köras automatiskt på din webbplats vid aktivering.

Därefter, scrolla tillbaka till toppen av sidan och växla omkopplaren från 'Inaktiv' till 'Aktiv'.

Sedan behöver du bara klicka på knappen 'Spara utdrag'.

Det var allt! Du har framgångsrikt lagt till navigering med vänster och höger piltangent på din webbplats.

Metod 2: Lägga till pilknappsnagering med pluginet Arrow Keys Navigation

Om du inte vill lägga till kod på din webbplats kan du använda pluginet Arrow Keys Navigation.

Detta plugin gör det möjligt för dig att navigera genom webbplatsens tidigare och nästa inlägg med hjälp av höger- och vänsterpiltangenterna på ditt tangentbord.

Först måste du installera och aktivera pluginet Arrow Keys Navigation. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Eftersom det är ett mycket enkelt plugin kräver det ingen ytterligare konfiguration. När du har aktiverat pluginet kan du nu växla mellan olika inlägg på din webbplats med hjälp av piltangenterna.

Tänk på att det här pluginet bara låter dig växla mellan olika inlägg på din webbplats, så du kommer inte att kunna använda piltangenterna för att flytta från en sida till en annan.

Du kan till exempel inte växla från din "Hem"-sida till din "Kontakta oss"-sida med piltangenterna.

Efter att du har aktiverat pluginet kan du lägga till en alert-fält eller popup på din webbplats som talar om för användarna att de nu kan navigera genom olika blogginlägg genom att helt enkelt använda piltangenterna för att flytta från ett inlägg till nästa.

För detaljerade instruktioner, se vår handledning om hur man skapar en meddelandefält i WordPress.

Pilnavigering för WordPress-bildspel och bildgallerier

Ovanstående två lösningar gör det möjligt för användare att navigera dina blogginlägg med piltangenter. Ibland kanske du dock vill lägga till andra funktioner, som att låta användare flytta bilder med piltangenter eller kanske flytta din bildspel med piltangenter.

I dessa fall behöver du använda ett WordPress-gallerietillägg och/eller ett WordPress-bildspelsplugin. De flesta populära bildspels- och gallerietillägg har inbyggd navigering med piltangenter.

Vi rekommenderar att använda Envira Gallery eftersom det är det bästa gallerietillägget som låter dig anpassa dina bilder efter eget tycke, inklusive vattenstämplar, piltangenter och alt-text.

För detaljer, se vår handledning om hur man skapar ett bildgalleri i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till pilknappsnagering i WordPress. Du kanske också vill se våra toppval för de bästa WordPress-temabyggarna för att designa en vacker webbplats eller de mest användbara tangentbordsgenvägarna för 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.