Så här lägger du till navigation med piltangenten i WordPress

Vill du add to navigation med piltangenten i WordPress?

Keyboard navigation kan göra din website mer användarvänlig genom att allow visitors att flytta från post till post med hjälp av piltangenterna. WordPress erbjuder dock inte dessa funktioner för navigation som standard.

I den här artikeln visar vi dig hur du enkelt kan add to navigation med piltangenterna i WordPress.

Varför lägga till navigation med piltangentbord i WordPress?

Genom att lägga till navigation med tangentbord kan användare enkelt browsa blogginlägg på din WordPress website.

Användare kan viewa nästa och föregående inlägg på bloggen genom att clicka på höger och vänster piltangent på tangentbordet.

Den här funktionen är praktisk när du vill att användarna enkelt ska kunna browsa posterna i sekventiell order. For instance, if you are using blogginlägg to publish chapters of a book, portfölj items, historical events, or more.

Att lägga till navigation med piltangenterna kan också vara ett bra sätt att förbättra användarupplevelsen på din WordPress blogg genom att uppmuntra användare att utforska din site mer.

Med detta sagt, låt oss se hur du enkelt kan add to navigation med piltangenterna i WordPress, steg för steg:

Metod 1: Lägga till navigering med piltangenttangentbord med WPCode (rekommenderas)

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

När du gör detta kommer användarna att kunna växla mellan olika pages och posts på din site med hjälp av piltangenterna på tangentbordet.

Tänk dock på att det kan vara riskabelt att lägga till customizer-kod i WordPress core-filer, och ett litet misstag kan förstöra din site.

Det är därför vi alltid rekommenderar att du använder WPCode. Det är det bästa WordPress code snippets plugin på marknaden som gör det säkert och enkelt att lägga till kod på din website.

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

Efter aktivering, head över till Code Snippets ” + Add Snippet page från WordPress admin dashboard.

När du är där kan du klicka på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet” där du kan börja med att skriva ett namn för ditt code snippet.

Sedan väljer du helt enkelt ”Universal Snippet” som ”Code Type” från dropdown-menyn i det högra hörnet av vyn

Följare: copy and paste följande kod i boxen ”Code Preview”:

<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>

Därefter rullar du ner till ”Insertion” section för att välja en location för code snippet.

Här väljer du helt enkelt alternativet ”Site Wide Footer” från dropdown-menyn bredvid alternativet ”Location”.

Välj sedan ”Auto Insert” som metod för att infoga den customizade koden.

Koden kommer nu att aktiveras automatiskt på din website när den aktiveras.

Därefter rullar du tillbaka högst upp på sidan och togglar omkopplaren från ”Inaktiverad” till ”Aktiv”.

Sedan är allt du behöver göra att klicka på knappen ”Save Snippet”.

Nu är det klart! Du har utan problem lagt till navigation med vänster och höger piltangent på din website.

Metod 2: Lägga till navigering med piltangentbord med hjälp av tillägget för navigering med piltangenter

Om du ej vill add code till din website kan du använda pluginet Arrow Keys Navigation.

Detta plugin aktiverar dig att navigera genom föregående och nästa inlägg på din site med hjälp av höger och vänster piltangent på ditt tangentbord.

Först måste du installera och aktivera pluginet Arrow Keys Navigation. För mer detaljer, se vår Step-by-Step guide om hur du 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 till olika posts på din site med hjälp av piltangenterna.

Tänk på att detta plugin endast tillåter dig att växla mellan olika posts på din website, så du kommer inte att kunna använda piltangenterna för att flytta från en page till en annan.

Till exempel kan du inte växla från din ”Home page” till din ”Contact Us” page med hjälp av piltangenterna.

När du har aktiverat pluginet kan du lägga till ett alert-fält eller en popup på din website 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 mer detaljerade instruktioner, vänligen se vår tutorial om hur man skapar en alert bar i WordPress.

Navigation med piltangenter för slider och gallerier med images i WordPress

De två lösningarna ovan kommer att allow användare att navigera i dina blogginlägg med piltangenter. Men ibland kanske du vill add to andra funktioner som gillar att låta användare flytta images med piltangenter eller kanske flytta din slider med piltangenter.

I dessa fall måste du använda ett plugin för WordPress gallery och/eller ett plugin för WordPress slider. De mest utvalda tilläggen för sliders och gallerier har inbyggda funktioner för navigering med pilar.

Vi rekommenderar att du använder Envira Gallery eftersom det är det bästa galleri plugin som tillåter dig att customize dina images efter vad du gillar inklusive vattenstämplar, piltangenter och alt-text.

För detaljer, se vår tutorial om hur man skapar ett image gallery i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar navigation med piltangenten i WordPress. Du kanske också vill se vårt toppval av de bästa WordPress-tilläggen eller vår guide om hur du lägger till specialtecken i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.