Hur man lägger till en inloggningssida och widgets på frontend i WordPress

Standardsidan för WordPress-inloggning ger inte den bästa upplevelsen och kan till och med förvirra dina användare. Därför rekommenderar vi att du lägger till en inloggningssida på framsidan för att låta användare logga in direkt från huvuddelen av din webbplats.

Detta förbättrar tillgängligheten och den övergripande användarnöjdheten. Dessutom är det bekvämt, vilket gör att användare kan komma åt inloggningsformulär från olika delar av din webbplats, som sidofält eller sidfötter.

Vi har skapat flera onlinebutiker och webbplatser där vi erbjuder denna funktionalitet för bättre användbarhet. Detta har lärt oss vad som fungerar och vad som inte fungerar för inloggningssidor på front-end.

I den här artikeln visar vi hur du enkelt lägger till en inloggningssida och widgets på front-end i WordPress.

Varför och när behöver du inloggning på frontend i WordPress?

Som standard visar WordPress-inloggningssidan WordPress-varumärket och matchar vanligtvis inte designen på din nuvarande WordPress-webbplats.

Detta fungerar för mindre WordPress-bloggar och webbplatser.

Men om du har en medlemskapswebbplats, nätbutik eller en annan webbplats där användare kan registrera sig och logga in, så ger en inloggningssida och widget på förstasidan en bättre upplevelse för dina användare.

Du kan till och med anpassa den här sidan med ditt varumärke eller lägga till ett enkelt inloggningsformulär i din WordPress-sidofält.

Med det sagt, låt oss se hur man enkelt lägger till en front-end inloggningssida och inloggningswidget i WordPress. För den här handledningen visar vi de 3 enklaste sätten att göra detta, och du kan använda länkarna nedan för att hoppa till den metod du väljer:

• Metod 1: Lägg till en inloggningssida och widgets på framsidan i WordPress med WPForms
• Metod 2: Lägg till en inloggningssida på förstasidan i WordPress med SeedProd
• Metod 3: Lägg till en front-end inloggningssida och widgets i WordPress med Theme My Login
• Experttips: Lägg till en inloggningsknapp i din WordPress-webbplats meny
• Bonus: Lägg till CAPTCHA i WordPress inloggningsformulär
• Videohandledning
• Vanliga frågor (FAQ)

Metod 1: Lägg till en inloggningssida och widgets på framsidan i WordPress med WPForms

WPForms är det bästa WordPress-pluginet för kontaktformulär på marknaden, som används av över 6 miljoner webbplatser. Det låter dig enkelt skapa en anpassad frontend-inloggningssida och en inloggningswidget på din webbplats.

På WPBeginner har vi använt det för att skapa kontaktformulär och årliga undersökningar och har haft en utmärkt erfarenhet. För att lära dig mer, se vår detaljerade WPForms-recension.

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

Vid aktivering, besök sidan WPForms » Inställningar från WordPress admin-sidofältet för att ange din licensnyckel.

Du kan hämta denna nyckel från ditt konto på WPForms webbplats.

När du har gjort det, gå till sidan WPForms » Tillägg från WordPress-instrumentpanelen för att hitta tillägget User Registration Addon.

Klicka sedan på knappen 'Installera tillägg' för att ladda ner och aktivera det på din webbplats.

När tillägget User Registration har aktiverats, gå till skärmen WPForms » Lägg till ny från adminmenyn för att starta formulärbyggaren.

Härifrån börjar du med att skriva ett namn för formuläret som du håller på att skapa. Välj därefter helt enkelt mallen 'User Login Form' för att börja skapa ditt användarinloggningsformulär.

Detta startar mallen i formulärbyggaren, där du kommer att märka en förhandsgranskning av formuläret till höger och en kolumn med tillgängliga fält till vänster.

Mallen inkluderar redan de nödvändiga fälten för användarnamn och lösenord. Men om du vill anpassa formuläret kan du dra och släppa ytterligare fält från sidofältet.

För mer information, se vår guide om hur man skapar en anpassad inloggningssida för WordPress.

När du är nöjd med dina inställningar klickar du bara på knappen 'Spara' för att lagra dina ändringar.

Lägg till inloggningsformulär på en sida/inlägg

Nu, för att lägga till ditt inloggningsformulär på en sida eller ett inlägg, öppna sidan/inlägget du väljer i WordPress blockredigerare från adminområdet.

När du är där, klicka på knappen '+' för att öppna blockmenyn och lägg till WPForms-blocket.

Därefter väljer du inloggningsformuläret som du skapade från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen 'Publicera' eller 'Uppdatera' för att spara dina inställningar.

Lägg till inloggningsformulär i webbplatsens sidofält

Om du vill lägga till inloggningsformuläret i din webbplats sidofält, besök sidan Utseende » Widgets från WordPress-instrumentpanelen.

Klicka här på '+' -knappen i det övre vänstra hörnet av skärmen för att öppna blockmenyn.

Härifrån behöver du hitta och lägga till WPForms-blocket i sidofältet.

När du har gjort det, välj inloggningsformuläret från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen 'Uppdatera' för att spara dina inställningar. För mer information, se vår guide om hur man lägger till ett inloggningsformulär i ditt WordPress-sidofält.

Nu kan du besöka din WordPress-webbplats för att se inloggningsformuläret i sidofältet.

Lägg till inloggningsformulär i Full Site Editor

Om du använder ett blockbaserat tema, kommer du inte att kunna lägga till din inloggning i webbplatsens sidofält med metoden ovan.

För att lägga till ett inloggningsformulär i FSE, besök sidan Utseende » Redigerare från WordPress-instrumentpanelen.

Detta startar FSE, där du måste klicka på '+' -knappen för att öppna blockmenyn.

Härifrån, leta upp och lägg till WPForms-blocket var du vill på din webbplats.

Därefter väljer du inloggningsformuläret som du skapade från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen 'Spara' för att spara dina inställningar.

Bonustips: För att ytterligare anpassa ditt inloggningsformulär kan du se vår handledning om hur du stylar dina WordPress-formulär.

Metod 2: Lägg till en inloggningssida på förstasidan i WordPress med SeedProd

SeedProd är den bästa dra-och-släpp sidbyggaren för WordPress på marknaden, som används av över 1 miljon webbplatser.

Det låter dig skapa en helt anpassad inloggningssida som kan matcha designen på din nuvarande webbplats eller vara något unikt.

Det är mycket nybörjarvänligt och kommer med en mängd professionellt designade mallar för inloggningssidor som du kan använda för att bygga din inloggningssida.

Flera av våra partner varumärken har designat hela sina webbplatser, inklusive inloggningssidor, med detta verktyg. För mer information, se vår fullständiga SeedProd-recension.

Först måste du installera och aktivera pluginet SeedProd. För detaljer, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök skärmen SeedProd » Landningssidor från WordPress admin-sidofältet och välj alternativet 'Inloggningssida' genom att klicka på knappen 'Konfigurera en inloggningssida'.

Detta leder dig till skärmen 'Mallar', där du kan välja en mall och använda dra-och-släpp-byggaren för att anpassa sidan.

Med en tom mall kan du till och med designa en anpassad inloggningssida på front-end från grunden.

När du har valt en mall som du vill ha, kommer du att bli ombedd att ange ett sidnamn. SeedProd kommer sedan att använda sidnamnet som URL för din inloggningsformulärslandningssida.

När du har gjort det, klicka på knappen 'Spara och börja redigera sidan' för att fortsätta.

Detta startar SeedProds dra-och-släpp-byggare, där du ser en förhandsgranskning av inloggningssidan till höger med tillgängliga fält till vänster.

Här kan du lägga till vilket block som helst på sidan genom att helt enkelt dra det från menyn till vänster och placera det var du vill.

För mer information, se vår guide om hur man skapar en anpassad WordPress-inloggningssida.

När du är klar med att designa din sida, glöm inte att klicka på knappen 'Publicera' i rullgardinsmenyn högst upp för att spara dina inställningar.

Efter det, gå tillbaka till din WordPress-instrumentpanel och navigera till SeedProd » Landningssidor.

Härifrån, hitta sektionen ‘Login Page’ och klicka på omkopplaren för att växla den från ‘Inactive’ till ‘Active’. Din inloggningssida kommer nu att vara live på din webbplats.

Metod 3: Lägg till en front-end inloggningssida och widgets i WordPress med Theme My Login

Om du vill lägga till en mycket enkel inloggningssida för front-end på din webbplats kan du använda det kostnadsfria pluginet Theme My Login.

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

Vid aktivering kommer pluginet automatiskt att skapa sidor för inloggning, utloggning, glömt lösenord och registrering.

Du kan navigera till sidan Theme My Login » Allmänt från adminmenyn och se pluginets inställningar.

Först kan du ställa in inloggningstypen. Inställningen 'Standard' är den säkraste eftersom den kräver e-post och lösenord för att logga in.

Därefter kan du välja dina registreringsinställningar. Vi behöll standardinställningarna här eftersom de kräver både e-post och lösenord för att logga in.

Du kan också markera rutan 'Lösenord' för att låta användare skapa sina egna lösenord och rutan 'Autologin', som automatiskt loggar in användare efter att de har registrerat sig.

Därefter kan du ändra dina inloggnings- och registrerings-URL:er i inställningarna 'Slugs'.

Dessa skapar automatiskt omdirigeringar. Så, den vanliga inloggnings-URL:en "dinsida.com/wp-admin" kommer att omdirigera till "dinsida.com/login".

Du kan behålla dessa URL:er desamma eller ändra dem.

När du är klar med ändringarna, se till att klicka på knappen ‘Spara ändringar’.

Du kan inte lägga till mycket mer avancerad funktionalitet om du inte uppgraderar till att använda deras premiumtillägg.

Ändå är det en bra lösning för användare med begränsad budget som vill skapa en enkel inloggningssida på front-end.

Lägg till inloggningsformuläret på en sida/inlägg

Nu, för att lägga till inloggningsformuläret skapat av Theme My Login, öppna en sida/ett inlägg i WordPress blockredigerare.

Härifrån klickar du på ‘+’-knappen för att öppna blockmenyn och lägga till Shortcode-blocket på sidan.

Lägg därefter till följande kortkod i blocket:

[theme-my-login]

Klicka slutligen på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Besök nu din webbplats för att se inloggningsformuläret.

Lägg till inloggningsformulär i ett widgetområde

Du kan också lägga till ett inloggningsformulär i dina WordPress-widgetområden med hjälp av Theme My Login-blocket.

Navigera helt enkelt till sidan Utseende » Widgets och öppna blockmenyn genom att klicka på '+' -knappen.

Härifrån måste du hitta och lägga till Theme My Login-blocket i det widget-område du väljer.

Därefter väljer du formuläret du vill lägga till från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen 'Uppdatera' för att spara dina inställningar. Besök nu din WordPress-webbplats för att se inloggningsformuläret i widgetområdet.

Experttips: Lägg till en inloggningsknapp i din WordPress-webbplats meny

Nu när du har skapat en inloggningssida på front-end, rekommenderar vi att du gör den lättillgänglig genom att lägga till en inloggningsknapp i din navigeringsmeny.

Detta säkerställer att användare kan hitta och komma åt sina konton utan att behöva söka efter inloggningssidan.

För att lägga till en inloggningsknapp i din webbplatsmeny, besök helt enkelt sidan Utseende » Menyer från WordPress-instrumentpanelen.

Här, expandera fliken 'Anpassade länkar' från den vänstra kolumnen och lägg till URL:en till din inloggningssida på front-end. Du kan också lägga till länktexten för inloggningsknappen.

Klicka bara på knappen 'Lägg till i meny'.

Klicka sedan på knappen 'Spara meny'.

Besök nu din WordPress-webbplats för att se inloggningsknappen i aktion. När användare klickar på den kommer de automatiskt att tas till din inloggningsformulärsida på framsidan.

Metoden ovan fungerar dock inte om du använder ett blocktema.

I så fall, gå till sidan Utseende » Redigerare från WordPress admin-sidofältet.

Detta startar Full Site Editor. I huvuddesignpanelen till vänster väljer du 'Navigation' för att börja redigera din webbplats huvudmeny.

Att göra detta öppnar din navigeringsmeny i redigeraren för hela webbplatsen. Klicka här på '+' -knappen bredvid den. Detta öppnar en ruta där du måste skriva namnet på din frontend-inloggningssida.

När den visas i resultaten, klicka på den för att lägga till länken i navigeringsmenyn.

Byt sedan till fliken 'Block' i panelen till vänster.

Du kan nu ändra ankarlänken för inloggningsknappen enligt dina önskemål.

När du är klar klickar du bara på knappen 'Spara' för att lagra dina inställningar.

Besök nu din webbplats för att se inloggningsknappen i aktion.

Bonus: Lägg till CAPTCHA i WordPress inloggningsformulär

När du har lagt till ett anpassat inloggningsformulär är det en bra idé att lägga till CAPTCHA till det eftersom den här sidan ofta är ett mål för hackare och spammare.

Att lägga till CAPTCHA kan blockera spambots och säkra din webbplats. Du kan enkelt göra detta med WPForms.

Efter aktivering av pluginet, besök helt enkelt sidan WPForms » Inställningar från WordPress-instrumentpanelen och byt till fliken 'CAPTCHA'.

Därefter väljer du alternativet 'reCAPTCHA' som din CAPTCHA-typ.

När du har gjort det måste du besöka Googles reCAPTCHA-webbplats för att skapa en webbplatsnyckel och en hemlig nyckel. Dessa nycklar hjälper till att integrera reCAPTCHA på din WordPress-webbplats.

Efter att ha lagt till dessa nycklar, redigera helt enkelt formuläret i WordPress som du skapade tidigare och byt till fliken 'Inställningar'.

Välj sedan alternativet 'Spamskydd och säkerhet' och aktivera reglaget 'Aktivera Google v3 reCAPTCHA'. Klicka sedan på knappen 'Spara' för att lagra dina inställningar.

Du har nu framgångsrikt lagt till CAPTCHA i ditt WordPress inloggningsformulär, vilket gör det mycket säkrare mot spamrobotar och automatiserade attacker.

För mer detaljerade instruktioner kan du se vår handledning om hur man lägger till CAPTCHA i WordPress inloggnings- och registreringsformulär.

Videohandledning

Om du inte föredrar skriftliga instruktioner, titta bara på vår videoguide:

Prenumerera på WPBeginner

Vanliga frågor (FAQ)

Här är några frågor som ofta ställs av våra läsare om att lägga till front-end inloggningssidor och widgets i WordPress:

Är en inloggningssida på framsidan nödvändig för varje WordPress-webbplats?

Nej, inte alls. En enkel blogg eller en företagswebbplats där endast administratören eller redaktörerna loggar in kan använda standardsidan för WordPress-inloggning alldeles utmärkt.

Inloggningssidor på front-end är mest värdefulla för webbplatser där användare regelbundet loggar in, som till exempel medlemskapswebbplatser, onlinebutiker eller forum.

Hur kan jag omdirigera användare till en specifik sida efter att de har loggat in?

De flesta inloggningssidplugins, inklusive WPForms och SeedProd, har inbyggda inställningar för att hantera omdirigeringar efter inloggning.

Du kan vanligtvis hitta ett alternativ i formulär- eller sidinställningarna för att ange den specifika URL du vill skicka användare till, till exempel deras kontopanel eller en sida endast för medlemmar.

För att komma igång kan du kolla in vår handledning om hur man omdirigerar användare efter lyckad inloggning i WordPress

Kan jag lägga till inloggningsknappar för sociala medier i mitt formulär på framsidan?

Ja, det kan du. Många plugins för användarregistrering och inloggning erbjuder tillägg eller integrationer för sociala inloggningar.

Till exempel integreras WPForms med tjänster som låter dig lägga till knappar som 'Logga in med Google' eller 'Logga in med Facebook', vilket gör processen ännu enklare för dina användare.

Om du är intresserad har vi en handledning om hur man lägger till social inloggning till WordPress som kan hjälpa dig.

Kommer en anpassad inloggningssida att påverka min webbplats hastighet?

När en anpassad inloggningssida byggs med en kvalitetsplugin som SeedProd eller WPForms, bör den ha minimal påverkan på webbplatsens hastighet.

Dessa verktyg är optimerade för prestanda. Nyckeln är att använda ett välkodat plugin och undvika att lägga till överdrivet stora bilder eller tunga skript i din inloggningssides design.

Vi hoppas att den här artikeln hjälpte dig att lägga till en inloggningssida och widgets på front-end i WordPress. Du kanske också vill se våra experttips om de bästa WordPress-plugins för inloggningssidor och vår guide om hur man lägger till en anpassad inloggnings-URL 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.