Hur man skapar en anpassad WordPress-inloggningssida (Ultimate Guide)

Vill du skapa en anpassad WordPress-inloggningssida för din webbplats?


Om du driver en WordPress-medlemssida eller en onlinebutik ser ofta många av dina användare inloggningssidan. Genom att anpassa standardinloggningssidan för WordPress kan du erbjuda en bättre användarupplevelse.

I den här ultimata guiden visar vi dig olika sätt att skapa en anpassad WordPress-inloggningssida. Du kan också använda den här självstudien för att skapa en anpassad WooCommerce-inloggningssida också.

Hur du enkelt skapar en anpassad WordPress-inloggningssida för din webbplats

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

    Varför skapa en anpassad WordPress-inloggningssida?

    WordPress levereras med ett kraftfullt användarhanteringssystem. Detta gör det möjligt för användare att skapa konton i e-handelsbutiker, medlemswebbplatser eller på en blogg.

    Som standard visar inloggningssidan WordPress-varumärket och logotypen. Det går bra om du driver en liten blogg, eller om du är den enda personen med administratörstillträde.

    Standard inloggningsskärm för WordPress

    Men om din webbplats tillåter användare att registrera sig och logga in, ger en anpassad inloggningssida en bättre användarupplevelse.

    Att använda din egen logotyp och design får dina användare att känna sig som hemma. Medan du omdirigerar dem till WordPress-inloggningsskärmen som inte ser ut som din webbplats kan se dina misstänkta misstänkta ut.

    Slutligen innehåller standardinloggningsskärmen inte annat än inloggningsformuläret. Genom att skapa en anpassad inloggningssida kan du använda den för att marknadsföra andra sidor eller specialerbjudanden.

    Som sagt, låt oss ta en titt på några exempel på anpassade WordPress-inloggningssidesdesign.

    Exempel på design av WordPress-inloggningssidor

    Webbplatsägare kan anpassa inloggningssidan för WordPress med olika stilar och tekniker.

    Vissa skapar en anpassad inloggningssida som använder webbplatsens tema och färger. Andra ändrar standardinloggningssidan genom att lägga till en anpassad bakgrund, färger och sin egen logotyp till den.

    1. WPForms

    WPForms

    WPForms är det bästa WordPress-kontaktformuläret på marknaden. Tillfället innehåller deras plugin också ett tillägg för att skapa vackra WordPress-inloggnings- och registreringsformulär, som vi kommer att visa dig senare i den här artikeln.

    Deras anpassade inloggningssida använder en två-kolumnlayout. Den vänstra kolumnen innehåller inloggningsformuläret och den högra kolumnen används för att markera kampanjer och andra uppmaningar. I exemplet ovan använder de inloggningssidan för att dela sin årsrapport. Den använder anpassade varumärken, bakgrundsillustrationer och märkesfärger för att skapa en unik inloggningsupplevelse.

    2. Rock My Wedding

    Rock My Wedding

    Rock My Wedding webbplats använder en popup-modal för att visa inloggnings- och registreringsformulär. Fördelen med att använda en popup är att användare kan logga in utan att lämna sidan. Det sparar dem från en ny sidbelastning och erbjuder en snabbare användarupplevelse.

    3. Jacquelynne Steves

    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 deras webbplats tema med inloggningsformuläret till höger.

    4. Kyrkans rörelsegrafik

    Church Motion Graphics

    Inloggningssidan för detta rörelsegrafikdesignföretag använder en färgstark bakgrund som speglar vad deras verksamhet handlar om. Den använder samma sidhuvud, sidfot och navigationsmenyer på inloggningsskärmen. Själva inloggningsformuläret är ganska enkelt med en mörk bakgrund.

    5. MITSLoan Management Review

    MITSLoan Management Review

    MITSLoan Management Review-webbplatsen använder WordPress-standardskärmen för inloggning. Den använder anpassade CSS med sin egen logotyp för att dölja WordPress-varumärket.

    Skapa en anpassad inloggningssida i WordPress

    Det finns flera WordPress-plugins som du kan använda för att skapa en anpassad inloggningssida i WordPress. Vi visar dig två olika plugins, och du kan välja den som bäst passar dig.

    Skapa en WordPress-inloggningssida med Theme My Login

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

    Efter aktivering skapar Theme My Login automatiskt webbadresser för din anpassade inloggning, utloggning, registrering, glömt lösenord och återställning av lösenordsåtgärder.

    Du kan anpassa dessa inloggningsadresser för WordPress genom att besöka Tema Min inloggning »Allmänt sida. Rulla ner till avsnittet “Slugs” för att ändra dessa webbadresser som används av plugin-programmet för inloggningsåtgärder.

    Tema mina inloggningssidor

    Tema Min inloggning låter dig också använda kortkoder för att skapa anpassade inloggnings- och registreringssidor. Du kan helt enkelt skapa en sida för varje åtgärd och sedan lägga till sidans snigel här, så att plugin kan hitta och omdirigera användare korrekt.

    Låt oss börja med inloggningssidan.

    Gå över till Sida »Lägg till nytt för att skapa en ny WordPress-sida. Du måste ge din sida en titel och sedan ange följande kortkod “[tema-min-inloggning]” i innehållsområdet.

    Lägger till kortkod

    Du kan nu publicera din sida och förhandsgranska den för att se din anpassade inloggningssida i aktion.

    Anpassad WordPress-inloggningssida

    Upprepa processen för att skapa andra sidor med följande kortkoder.

    [theme-my-login action = ”register”] för registreringsformulär.

    [theme-my-login action = ”lostpassword”] ​​för sidan med lösenord.

    [theme-my-login action = ”resetpass”] använd den på sidan om återställning av lösenord.

    Skapa en anpassad WordPress-inloggningssida med WPForms

    WPForms är det bästa WordPress-formuläret plugin plugin på marknaden. Det låter dig enkelt skapa anpassade inloggnings- och registreringsformulär för din webbplats.

    WPForms är ett premium WordPress-plugin, och du behöver åtminstone deras pro-plan för att få åtkomst till användarregistrering. WPBeginner-användare kan få 50% rabatt genom att använda vår WPForms-kupongkod: SAVE50

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

    Vid aktivering måste du besöka WPForms »Inställningar för att ange din licensnyckel. Du kan hitta den här informationen under ditt konto på WPForms webbplats.

    WPForms-licens

    När du har angett licensnyckeln skulle du kunna installera tillägg. Gå vidare och besök WPForms »Addons och leta efter användarregistrerings Addon.

    Installera tillägg för användarregistrering

    Klicka sedan på Installera Addon-knappen för att ladda ner och aktivera addon. Du är nu redo att skapa dina egna anpassade inloggningsformulär.

    Gå över till WPForms »Lägg till nytt och bläddra ner till mall för “Användarinloggningsformulär”. Du måste klicka på knappen “Skapa ett användarinloggningsformulär” för att fortsätta.

    Skapa inloggningsformulär

    WPForms laddar användarinloggningsformuläret med obligatoriska fält. Du kan klicka på fälten för att lägga till din egen beskrivning eller text runt dem.

    WPForms bildar builder

    Du kan också ändra andra inställningar. Till exempel lägger den automatiskt till “Skicka” som knapptitel. Du kan klicka på den och sedan ändra den till inloggning istället.

    Forminställningar

    Du kan också bestämma vad som händer när en användare har loggat in. Gå till Inställningar »Bekräftelse och välj en åtgärd.

    Omdirigera inloggade användare

    Du kan omdirigera användaren till någon annan URL, omdirigera dem till hemsidan eller helt enkelt visa dem ett meddelande om att de nu är inloggade.

    När du är nöjd med forminställningarna klickar du på Spara-knappen längst upp till höger på skärmen och stänger formulärbyggaren.

    Lägga till ditt anpassade inloggningsformulär till en WordPress-sida

    WPForms gör det superlätt att lägga till ditt anpassade inloggningsformulär på alla WordPress-inlägg eller -sidor.

    Redigera bara sidan där du vill lägga till inloggningsformuläret eller skapa en ny. Lägg till WPForms-blocket på ditt innehållsområde på sidredigeringsskärmen.

    Lägga till WPForms-block i ett inlägg

    Välj sedan inloggningsformuläret du skapade tidigare och WPForms-blocket laddas automatiskt in i innehållsområdet.

    Förhandsvisning av inloggningsformulär

    Du kan nu fortsätta redigera inloggningsformulärssidan eller spara och publicera dina ändringar.

    Anpassa din WordPress inloggningsformulärsdesign

    Som standard kommer din anpassade WordPress-inloggningsformularsida att använda ditt temas sidmall och stilar. Det kommer att ha ditt temas navigationsmenyer, sidhuvud, sidfot och sidofältwidgets.

    Om du helt vill ta över hela sidan och designa något från grunden kan du använda ett WordPress-sidbyggare-plugin.

    Med en sidbyggare-plugin kan du skapa en anpassad sidlayout och sedan lägga till inloggningsformuleringswidget som tillhandahålls av Theme My Login eller WPForms.

    I skärmdumpen nedan har vi använt det populära pluginprogrammet Beaver Builder. Vi använde en bakgrundsbild på en fullskärmslayout och lade sedan till två kolumner. I en kolumn har vi lagt till lite text och en knapp. I den andra kolumnen har vi lagt till WPForms-widgeten.

    Skapa en anpassad inloggningssida med hjälp av plugin för sidbyggare

    Fördelen med Beaver Builder är att det är 100% drag & drop-lösning.

    Notera: Eftersom du redan är inloggad kan både Theme My Login och WPForms plugins inte visa en direkt förhandsvisning av inloggningsformuläret. WPForms-plugin har ett alternativ där du kan stänga av detta i forminställningarna.

    Om WordPress-sidbuilder-plugins inte är din grej, kan du använda anpassade CSS för att utforma formuläret och själva inloggningssidan. Alternativt kan du också använda CSS Hero-plugin för att enkelt lägga till anpassade CSS-stilar.

    Ändra logotypen och URL-adressen för WordPress

    Du behöver inte alltid skapa en helt anpassad WordPress-inloggningssida för din webbplats. Faktum är att många webbplatser bara ersätter WordPress-logotypen och logotypens url medan du fortfarande använder standardinloggningssidan.

    Om du vill ersätta WordPress-logotypen på inloggningsskärmen mot din egen logotyp, kan du enkelt göra det med ett WordPress-plugin eller genom att lägga till anpassad kod. Vi visar båda metoderna du kan använda en som bäst passar dig.

    Ändra inloggningslogotyp och URL för WordPress med ett plugin

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

    Efter aktivering lägger plugin till ett nytt menyalternativ märkt ‘Login Customizer’ till WordPress admin sidfält. Om du klickar på den startar inloggningsanpassaren.

    Logga in anpassare

    Inloggningspersonalen laddar din standard inloggningsskärm för WordPress med anpassningsalternativ till vänster och liveförhandsvisning till höger.

    För att ersätta WordPress-logotypen mot din egen, klicka på fliken “Logoalternativ” till höger. Härifrån kan du dölja WordPress-logotypen, ladda upp din egen anpassade logotyp, ändra logotypens URL och text.

    Ladda upp anpassad logotyp till inloggningssidan

    Plugin tillåter dig också att helt anpassa WordPress-inloggningssidan. Du kan lägga till kolumner, bakgrundsbild, ändra inloggningsformulärfärger och mer.

    I grund och botten kan du skapa en anpassad WordPress-inloggningssida utan att ändra standard-inloggningsadressen för WordPress.

    När du är klar klickar du bara på knappen Publicera för att spara dina ändringar. Du kan nu besöka WordPress-inloggningssidan för att se din anpassade inloggningsformulär i aktion.

    Anpassad WordPress-inloggningssida med anpassad logotyp

    Ändra WordPress-logotyp och URL utan plugin (kod)

    Med denna metod kan du manuellt ersätta WordPress-logotypen på inloggningsskärmen med din egen anpassade logotyp.

    Först måste du ladda upp din anpassade logotyp till mediebiblioteket. Gå till Media »Lägg till nytt sida och ladda upp din anpassade logotyp.

    När du har laddat upp bilden klickar du på länken Redigera bredvid den. Detta öppnar sidan med redigeringsmedia där du behöver kopiera filens URL och klistra in den i en tom textfil på din dator.

    Därefter måste du lägga till följande kod i ditt temas features.php-fil eller ett webbplatsspecifikt plugin.

    funktion wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    bakgrund-bild: url (http: //path/to/your/custom-logo.png);
    höjd: 100px;
    bredd: 300px;
    bakgrundsstorlek: 300px 100px;
    bakgrund-upprepa: ingen upprepa;
    polstring-botten: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Glöm inte att byta ut bakgrundsbild-webbadressen med fil-URL: en du kopierade tidigare. Du kan också justera andra CSS-egenskaper så att de matchar din anpassade logobild.

    Du kan nu besöka WordPress-inloggningssidan för att se din anpassade logotyp i aktion.

    WordPress inloggningssida med anpassad logotyp

    Den här koden ersätter bara WordPress-logotypen. Det ändrar inte logolänken som pekar på WordPress.org-webbplatsen.

    Låt oss ändra detta.

    Lägg bara till följande kod i ditt temas funktioner.php-fil eller ett webbplatsspecifikt plugin. Du kan lägga till den här koden direkt under den kod du lagt till tidigare.

    funktion wpb_login_logo_url () {
    återvända hem_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    funktion wpb_login_logo_url_title () {
    returnera “Your Site Name and Info”;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Glöm inte att ersätta “Ditt webbplatsnamn och information” med webbplatsens faktiska namn. Den anpassade logotypen på din inloggningsskärm pekar nu på webbplatsens hemsida.

    Det är 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 ultimata WordPress-säkerhetsguide för tips om hur du förbättrar din inloggningssäkerhet för WordPress.

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