Hur man skapar en customize login page för WordPress (Ultimate Guide) 2024

WordPress standardinloggningssida fungerar bra, men den representerar inte ditt varumärke fullt ut. För att skapa en mer engagerande upplevelse är det viktigt att visa upp ditt varumärke och ditt företag på den här sidan.

En anpassad design av inloggningssidan är särskilt effektiv för medlemssajter eller onlinebutiker, där användarna ofta interagerar med inloggningssidan.

På WPBeginner har vi implementerat en anpassad inloggningssida för vår kostnadsfria webbplats för videoutbildning i WordPress. Det hjälpte oss att visa upp vårt varumärke på ett mer framträdande sätt samtidigt som användarupplevelsen förbättrades.

I den här guiden visar vi dig hur du skapar en anpassad inloggningssida för WordPress. Vi kommer att utforska flera metoder så att du kan välja den som bäst passar dina affärsbehov.

Här är vad du kommer att lära dig av den här guiden:

Varför skapa en Custom WordPress Login Page?

Din website i WordPress har ett kraftfullt system för hantering av användare. It allows users to create accounts in eCommerce stores, membership websites, and blogs.

Som standard visar login page varumärket och logotypen för WordPress. Detta är bra om du är den enda personen med administratörsbehörighet eller har mycket få användare.

Men om din website allow users to register and log in, then a custom login page offers a better user experience.

Vissa användare kan bli misstänksamma om din WordPress vy för login inte alls gillar din website. De gillar nog att du använder din logga och design för att känna sig mer hemma.

Slutligen innehåller standard inloggningsvyn inget annat än inloggningsformuläret. Genom att skapa en customize login page kan du använda utrymmet för att främja andra pages eller specialerbjudanden.

Det är därför vi använder en anpassad inloggningssida för alla våra webbplatser där användarna behöver interagera med ett inloggningsformulär.

Här är till exempel den anpassade inloggningssidan som vi använder för webbplatsen WPBeginner Videos för utbildning.

Med detta sagt, låt oss titta på några fler exempel på anpassade WordPress-inloggningssidor.

Exempel på design av login page i WordPress

Website-ägare kan customize WordPress login page med hjälp av olika stilar och tekniker.

Vissa skapar en custom login page som använder sin websites theme och färger. Andra ändrar standard login page genom att lägga till en custom bakgrund, färger och logga.

Här är några exempel på vad som är möjligt.

WPForms

WPForms är det bästa pluginet för kontaktformulär för WordPress på marknaden. Deras plugin innehåller också en utökning för att skapa beautiful WordPress login och registreringsformulär, som vi kommer att visa dig senare i den här artikeln.

Deras custom login page använder en layout med två Column. Den vänstra Column innehåller formuläret för login och den högra Column används för att lyfta fram kampanjer och andra call-to-action.

Deras login page som visas ovan låter sina användare veta om nya funktioner. Den använder customize branding, bakgrundsillustration och varumärkesfärger för att skapa en unik upplevelse av login.

Jacquelynne Steves

Jacquelynne Steeves är en webbplats för konst och hantverk där författaren publicerar innehåll om att dekorera hem, göra täcken, mönster, broderier och mer.

Deras inloggningssida använder en anpassad bakgrundsbild som matchar temat på deras webbplats, och inloggningsformuläret finns till höger.

Rörlig grafik för kyrkan

Inloggningssidan för detta företag inom rörlig grafik har en färgglad bakgrund som återspeglar företagets verksamhet.

Den använder samma sidhuvud, sidfot och navigeringsmenyer på inloggningsskärmen. Själva inloggningsformuläret är ganska enkelt, med en ljus bakgrund.

MITSloan Management Review

MITSloan Management Review använder en popup modal för att visa ett inloggnings- och registreringsformulär.

Fördelen med en popup är att användarna kan logga in utan att lämna sidan. Det sparar dem från en ny sidladdning och ger en snabbare användarupplevelse.

Är du nu redo att lära dig hur du skapar en customize login page i WordPress?

Skapa en login page i WordPress med hjälp av Theme My Login (gratis)

Theme My Login är ett kostnadsfritt plugin som ändrar din inloggningssida så att den matchar ditt WordPress-tema. Det är inte särskilt anpassningsbart, men det kommer att ersätta standardinloggningssidan med WordPress-varumärke och få den att se mer professionell ut.

Det första du behöver göra är att installera och aktivera Theme My Login plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Vid aktivering skapar Theme My Login automatiskt URL:er för dina customizer-åtgärder för login, logga ut, registrering, glömt lösenord och återställ password.

Du kan customize dessa WordPress login URL:er genom att besöka Theme My Login ” General page. Rulla ner till ”Slugs” section för att ändra de URL:er som används av pluginet för login actions.

Theme My Login tillåter dig också att använda shortcodes för att skapa custom login och registreringssidor. Du kan helt enkelt skapa en page för varje action och sedan add to page slug här så att pluginet kan hitta och redirecta användare på rätt sätt.

Låt oss börja med login page.

Head to Page ” Add New för att skapa en ny WordPress-sida. Därefter måste du ge din sida en rubrik och sedan enter följande shortcode [theme-my-login] till sidan.

Du kan nu publicera din page och previewa den för att se din custom login page i action.

Så här ser det ut på vår testwebbplats i WordPress.

Upprepa processen för att skapa andra sidor genom att använda följande kortkod:

[theme-my-login action="register"] För registreringsformuläret

[theme-my-login action="lostpassword"]För sidan med förlorat lösenord

[theme-my-login action="resetpass"] För reset password page

Skapa en Customize Login Page för WordPress med WPForms

WPForms är den bästa WordPress form builder plugin på marknaden. Det allow you att enkelt skapa customize login och registreringsformulär för your website.

WPForms är ett premium WordPress plugin, och du behöver minst deras pro plan för att få tillgång till användarregistrerings tillägget. WPBeginners användare kan få 50% rabatt genom att använda vår WPForms coupon code: SAVE50

Det första du behöver göra är att installera och aktivera WPForms plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du besöka WPForms ” Settings page för att enter din license key. Du hittar den här informationen i ditt account på WPForms website.

När du har enter license key kommer du att kunna installera utökning.

Gå vidare och besök WPForms ” Addons page och leta reda på User Registration Addon.

Klicka sedan på knappen ”Install Addon” för att ladda ner och aktivera tillägget. Du är nu redo att skapa dina egna inloggningsformulär.

Gå över till WPForms ” Lägg till ny sida. Du kommer att bli ombedd att ”välja en mall” för ditt formulär. Sök efter mallen ”User Login Form” och klicka på knappen ”Use Template” för att fortsätta.

WPForms kommer att hämta formuläret för inloggning av användare med de obligatoriska fälten.

You can click on the fields to add to your own description or text around them.

You can change other settings as well.

Till exempel är standardrubriken för knappen ”Submit”. Du kan klicka på knappen och ändra texten till ”Login” i stället.

Du kan också bestämma vad som ska hända när en användare har blivit inloggad utan problem.

Du måste heada över till Settings ” Confirmation tabs och välja en action. Du kan omdirigera användaren till någon annan URL, omdirigera dem till homepage eller helt enkelt visa dem ett message om att de nu är inloggade.

När du är nöjd med formulärinställningarna klickar du bara på knappen ”Save” högst upp till höger på vyn och close form builder.

Lägga till ditt Custom Login Formulär till en WordPress Page

WPForms gör det superenkelt att lägga till ditt customiserade inloggningsformulär på valfri WordPress post eller page.

Bara edit sidan där du vill lägga till formuläret för login eller skapa en new. Sedan, på sidan edit vy, add WPForms block till din content area.

Därefter väljer du login-formuläret som du skapade tidigare, och WPForms-blocket laddar det automatiskt inuti innehållsområdet.

Du kan nu fortsätta att editera login page. Känn dig gratis om du vill add to mer text eller främjande block. När du är slutförd, glöm inte att save och publicera dina ändringar.

You can now visit your website to see your login page in action.

Skapa en Customize Login Page för WordPress med SeedProd (rekommenderas)

Som standard kommer din custom WordPress login page att använda ditt temas sidmall och templates. Den kommer att ha ditt temas navigationsmenyer, header, footer och sidebar widgetar.

Om du vill ta över hela sidan helt och designa något från scratch, kan du använda en WordPress page builder plugin.

SeedProd är den bästa landing page buildern för WordPress. Den är nybörjarvänlig och erbjuder en drag and drop-byggare som hjälper dig att skapa alla typer av landing pages, inklusive en login page, coming soon page, maintenance mode page, och mer.

För den här artikeln kommer vi att använda SeedProd Pro-versionen eftersom den innehåller en login page template och avancerade page blocks för customize.

Det finns också en gratis version av SeedProd, men den innehåller inte alternativet att skapa en login page för din WordPress website.

Först måste du installera SeedProd plugin på din website. För mer detaljer kan du följa vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktivt kommer du att redirectas till SeedProd i din WordPress admin area.

Här måste du enter din license key, som du enkelt kan få från SeedProd account. När du har enter nyckeln klickar du på knappen ”Verify key”.

Efter det är du redo att skapa din login page i SeedProd.

För att börja, gå över till SeedProd ” Landningssidor och välj alternativet ” Inloggningssida” genom att klicka på knappen ”Ställ in en inloggningssida”.

På nästa skärm kan du välja en mall för din inloggningssida. Du kan också skapa en sida från början med hjälp av Blank Template.

Vi föreslår dock att du använder en template eftersom det är enklare och snabbare att customize login page.

När du väljer en template kommer ett popup-fönster att visas för att enter ett Page Name för din login page. SeedProd kommer att använda sidnamnet som URL för din landing page.

När du har enter dessa details, fortsätt och click the ”Save and Start Editing the Page” button.

Nu kan du edit din login page med hjälp av SeedProds drag and drop builder i Design tabs. Med buildern kan du enkelt add to vilket block som helst på sidan genom att helt enkelt dra det från vänster menu och placera det var som helst på sidan.

Du kan till exempel add to text, ett videoklipp eller en ny knapp till din login page. Det finns fler alternativ för customize i Advanced Blocks section, där du kan add to en nedräkningstimer, ikoner för social delning med mera.

SeedProd låter dig även ta bort befintliga page block i templates. Allt du behöver göra är att click the trash can icon för att delete page blocket.

Om du sedan klickar på någon sektion på login page ser du fler alternativ för customize.

You can for example change the text and color of the fields, choose a different font, edit the button’s color, and more.

När du är nöjd med utformningen av inloggningssidan klickar du på fliken ”Connect” högst upp.

Du kan nu ansluta olika tjänster för e-postmarknadsföring, till exempel Constant Contact, Drip med flera.

Efter det måste du heada över till tabben Page Settings. Under de allmänna inställningarna låter SeedProd dig redigera sidans titel och ändra sidans status från draft till publicera.

Du kan också välja alternativet att använda en SeedProd Link och add to din SeedProd affiliate länk för att tjäna mer pengar online.

Om du vill optimera din login page för search engines, gå då till sökmotorsoptimeringens settings. Här hittar du en knapp som installerar All in One SEO plugin.

All in One SEO för WordPress (AIOSEO) är det bästa WordPress SEO plugin som gör att du kan optimera din WordPress webbplats för search engines och social media plattformar.

Du kan lära dig hur du använder den på bästa sätt i vår guide om hur du ställer in All in One SEO för WordPress korrekt.

Efter det kan du också add olika code snippets till din login page i Scripts settings tabs.

For instance, you may want to add Google Analytics code, Facebook pixel, or other tracking code here.

Nu när du har ändrat inställningarna för page går du vidare och klickar på knappen ”Save” högst upp.

Därefter måste du göra din login page aktiv. För att göra det kan du avsluta Landing Page Builder och sedan gå till SeedProd ” Landing Pages.

Väl där klickar du på knappen för att ändra sidans status från ”Inaktiverad” till ”Aktiv”.

You can now go to the URL of your login page and see it in action.

Detta är en screenshot av skärmen för login på vår demo site.

Alternativ: Du kan också använda Thrive Architect för att designa en attraktiv login page. Det är ett annat bra drag-and-drop page builder-plugin som vi rekommenderar för att skapa customze-sidor.

Den innehåller över 300+ professionellt utformade templates som allow you att skapa en login page som kan se ut som den under.

Om WordPress page builder plugins inte är din grej, kan du använda custom CSS för att utforma formuläret och själva login page.

Ändra logotypen och URL:en för login på WordPress

Du behöver inte alltid skapa en anpassad WordPress-inloggningssida för din webbplats. Många webbplatser ersätter WordPress-logotypen och logotypens URL medan de fortfarande använder standardinloggningssidan.

Om du vill ersätta WordPress-logotypen på login-skärmen med din egen logga, kan du enkelt använda ett WordPress-plugin eller lägga till custom code. Vi visar dig båda metoderna, och du kan välja den som passar dig bäst.

Metod 1: Ändra inloggningslogotyp och URL för WordPress med hjälp av ett plugin

Det första du behöver göra är att installera och aktivera pluginet Colorlib Login Customize. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering lägger pluginet till ett nytt menu item till WordPress tema cust omize. Navigera bara till Appearance ” Customize och klicka på det nya objektet ”Colorlib Login Customizer” för att starta login customizer.

Observera att det här alternativet inte är tillgängligt om du använder ett blocktema, så vi rekommenderar att du använder kodmetoden i så fall.

Login customizer kommer att ladda din standard WordPress login skärm med anpassningsalternativ till vänster och en live preview till höger.

Om du vill ersätta WordPress-logotypen med din egen klickar du på tabben ”Logo options” till höger.

Härifrån kan du dölja WordPress-logotypen, uploada din egen customize-logotyp och ändra logotypens URL och text.

You can also customize the size of the size and color of the text and the width and height of the custom logo.

Pluginet tillåter dig också att customize standard WordPress login page helt och hållet. Du kan add to columns, bakgrundsbilder, ändra login-formulärets färger, och mycket mer.

I grund och botten kan du skapa en custom WordPress login page utan att ändra standard WordPress login URL.

När du är slutförd klickar du helt enkelt på knappen ”Publicera” för att save your changes. You can now visit the WordPress login page to see your custom login form in action.

Metod 2: Ändra inloggningslogotyp och URL för WordPress med kod

Denna metod allow you att manuellt ersätta WordPress-logotypen på login-vyn med your egen customize-logotyp utan att behöva ett plugin. Den är också lämplig för block themes.

Först måste du uploada din customze logga till mediabiblioteket. Gå bara till Media ” Add New page och upload your custom logo.

När du har uppladdat en image klickar du på länken ”Edit” bredvid den. Detta öppnar sidan edit media file, där du måste kopiera filens URL och klistra in den på ett lämpligt ställe, t.ex. en tom textfil på your dator.

Följaktligen måste du lägga till följande code snippet till ditt temas functions.php-fil eller använda WPCode plugin för att enkelt lägga till custom code utan att bryta din site (rekommenderas):

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Glöm inte att ersätta URL:en för bakgrundsbilden på rad 4 med URL:en för filen som du kopierade tidigare. Du kan också justera andra CSS-egenskaper för att matcha din customze logga image.

Du kan nu besöka WordPress inloggningssida för att se din anpassade logotyp.

Den här koden ersätter dock bara logotypen för WordPress. Den ändrar ej länken till logotypen, som pekar till WordPress.org website.

Låt oss ändra på det här.

Lägg bara till följande kod i ditt temas functions.php-fil eller WPCode. Du kan klistra in den precis under koden som du addade tidigare:

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
 
function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Glöm inte att ersätta ”Your Site Name and Info” med namnet på din webbplats. Den anpassade logotypen på din inloggningsskärm kommer nu att peka på din webbplats hemsida.

Inaktivera språkomkopplaren på login page i WordPress

WordPress 5.9 introducerade ett nytt dropdown-inloggningsalternativ som låter användare välja ett nytt språk när de loggar in på en website.

Om det finns mer än ett aktivt språk på webbplatsen visas det här alternativet.

Detta fungerar bra för flerspråkiga webbplatser och team med olika användare som kanske vill komma åt WordPress dashboard på ett annat språk.

Men om du vill hålla din inloggningssida enkel och dina användare inte behöver byta språk ofta kan du ta bort språkväxlaren för att göra den mer överskådlig. Du kan göra detta med hjälp av ett plugin eller en kod.

Metod 1: Inaktivera språkomkopplaren med ett tillägg

Allt du behöver göra är att installera och aktivera pluginet Disable Login Language Switcher. Vid aktivering kommer alternativet för språkväxlare automatiskt att tas bort. Det finns inga ytterligare Settings för you att konfigurera.

Nu, när du går till din inloggningsskärm, ser du standardinloggningsskärmen utan alternativet för språkväxlare.

Metod 2: Inaktivera språkomkopplaren med kod

Ett annat sätt att inaktivera språkomkopplaren är att lägga till kod i WordPress.

Lägg bara till följande code snippet till din functions.php-fil eller i WPCode snippets. För detaljer, se vår tutorial om hur man lägger till custom code snippets i WordPress:

add_filter( 'login_display_language_dropdown', '__return_false' );

För mer detaljer, se vår guide om hur du inaktiverar språkomkopplaren på WordPress login vy.

Det var allt. Vi hoppas att den här artikeln hjälpte dig att lära dig olika sätt att skapa en WordPress-inloggningssida för din webbplats. Du kanske också vill se vår handledning om hur du lägger till en Google-inloggning med ett klick i WordPress eller vår guide om hur du väljer det perfekta färgschemat för din webbplats.

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.