Hur du skapar en anpassad inloggningssida på rätt sätt i WordPress (steg för steg)

hur man skapar en anpassad inloggningssida i wordpress


Någonsin undrat om du kunde skapa en anpassad inloggningssida i WordPress?

Att skapa en anpassad inloggningssida hjälper dig att visa ett konsekvent varumärke för dina användare, vilket ger din webbplats ett mer professionellt utseende.

I den här artikeln visar vi dig hur du skapar en anpassad inloggningssida i WordPress.

Skapa en anpassad WordPress-inloggningssida – Innehållsförteckning

Varför skapa en anpassad inloggningssida?

Om du driver en gemenskapsdriven webbplats som ett forum, medlemskapssida, nisch socialt nätverk eller någon annan webbplats som kräver att användare registrerar ett konto och loggar in, måste du skapa en anpassad inloggningssida.

WordPress-inloggningssidan är generisk och tråkig. Med en anpassad inloggningssida kan du anpassa alla element på sidan runt formuläret.

Om du har en anpassad inloggningssida kan du dölja standardinloggningssidan om du vill. Det kan minska inloggningsskräppost och hålla din WordPress-webbplats säker.

Välja rätt plugin för att skapa en anpassad inloggningssida

I det officiella WordPress-pluginlagret kan du hitta dussintals olika plugins som hjälper dig att enkelt bygga en anpassad inloggningssida. I den här artikeln tittar vi på två olika insticksprogram: WPForms och Tema Min inloggning.

Välj WPForms om du behöver ett fullständigt WordPress-formulär-plugin som hjälper dig att bygga alla typer av onlineformulär med lätthet, inklusive registreringsformulär, betalningsformulär, kontaktformulär, etc..

Några fördelar med WPForms är:

  • Anpassa din inloggningsformulär som du vill utan några begränsningar.
  • Publicera ditt inloggningsformulär på alla inlägg eller sidor.
  • Bädda in ditt inloggningsformulär i sidofältet eller till och med i widgeterad sidfot.

Välj Tema Min inloggning om du enkelt vill skapa en enkel inloggningssida.

Nedan finns några funktioner i Theme My Login:

  • Ingen konfiguration krävs för att skapa en anpassad inloggningssida.
  • Döljer automatiskt standardinloggningssidan och omdirigerar till den nyskapade inloggningssidan.
  • Lägg till en länk till inloggningssidan i sidfältet med en anpassad inloggningswidget.

Nackdelen är att, till skillnad från WPForms, tillåter Tema Min inloggning inte dig att bädda in ditt inloggningsformulär någonstans på din webbplats och kommer exklusivt att dyka upp på din inloggningssida. Eftersom det inte är ett fullständigt formulär-plugin som WPForms är möjligheten att anpassa ditt inloggningsformulär begränsad.

Metod 1: Använda WPForms för att skapa en inloggningssida

WPForms

Låt oss titta på hur du skapar en inloggningssida med WPForms.

Steg 1: Installera WPForms på din webbplats

Det första du behöver göra är att installera och aktivera WPForms-plugin. Se till att verifiera din licensnyckel genom att navigera till WPForms »Inställningar. Du kan få licensnyckeln från ditt konto på WPForms webbplats.

För att kunna skapa en anpassad inloggningssida med WPForms måste du installera Användarregistrering tillägg genom att gå till WPForms »Addons. Klick Installera Addon bredvid användarregistrering Addon och klicka sedan på Aktivera.

När tillägget är aktiverat kan du gå vidare och skapa ett användarinloggningsformulär med WPForms.

Steg 2: Skapa ett anpassat inloggningsformulär

Med WPForms kraftfulla drag-and-drop-byggare kan du bygga ett inloggningsformulär på bara några minuter, inte timmar, utan att skriva en enda kodrad.

För att skapa ett inloggningsformulär, besök WPForms »Lägg till nytt. På sidan med formulärinställningar måste du välja Användarinloggningsformulär mall för att skapa ett inloggningsformulär.

mall för användarinloggningsformulär

Nu ser du formulärbyggaren där du kan lägga till, anpassa och ta bort inloggningsformulärfält. Som standard lägger in inloggningsformulärmallen följande formfält: Användarnamn och Lösenord.

användarinloggningsformulär i wordpress

Du kan anpassa valfritt fält genom att klicka på det i sidbyggaren. Sedan kan du göra önskade anpassningar i den vänstra panelen.

Steg 3: Formkonfiguration

För att konfigurera allmänna inställningar kan du gå till Inställningar »Allmänt. På den här sidan kan du anpassa formulärets namn, beskrivning, skicka knapptext osv.

allmänna inställningar inloggningsformulär

Du behöver inte göra något i anmälningar för din anpassade inloggningsformulär. Som standard stängs aviseringar så att du inte får ett e-postmeddelande när någon loggar in på din webbplats.

När en användare loggar in via ditt anpassade inloggningsformulär kommer de att landa på din webbplats hemsida. Du kan ändra omdirigeringsadressen, om du vill, i Bekräftelse omdirigera URL fält.

bekräftelsesinställningar anpassad inloggningssida

Steg 4: Publicera ditt WordPress-formulär

En av de viktigaste fördelarna med att använda WPForms för att skapa ett inloggningsformulär är att det låter dig bädda in ditt formulär var som helst på din webbplats, inklusive inlägg, sidor, sidfältwidgets eller widgetade sidfotområden.

Låt oss titta på hur du publicerar ditt formulär i inlägg eller sidor.

Skapa ett nytt inlägg eller en sida i WordPress och klicka sedan på + ikonen i Gutenberg-blockredigeraren. Du kan söka efter WPForms-blocket och klicka på det.

Lägg till formulär

Välj sedan ditt inloggningsformulär i WPForms-blocket och det kommer att laddas automatiskt i ditt inlägg / sida.

Välj inloggningsformulär

När du har lagt till formuläret kan du publicera ditt inlägg / sida.

Du kan också lägga till inloggningsformuläret till din sidofältwidget på följande sätt. Gå över till Utseende »Widgets och lägg till WPForms-widgeten i din sidofält.

Inloggningsformuleringswidget

Välj ditt anpassade inloggningsformulär i widgetens inställningar och klicka på Spara för att spara ändringar.

Metod 2: Använd tema Min inloggning för att skapa en inloggningssida

teman min inloggning plugin

De Tema Min inloggning plugin gör det superlätt att publicera ett anpassat inloggningsformulär på din WordPress-webbplats. För att skapa en enkel inloggningssida behöver du bara installera och aktivera plugin Theme My Login.

Plugin fungerar utanför rutan utan ytterligare konfiguration.

Men om du behöver anpassa inställningarna för plugin kan du klicka på menyn Theme My Login i din WordPress-instrumentpanel.

tema mina inloggningsinställningar

Du kan sedan ändra inloggnings- och registreringstyper. Du kan också justera URL-snickorna för inloggning, utloggning, registrering, förlorat lösenord och återställning av lösenordssidor.

Metod 3: Anpassa befintlig WordPress-inloggningssida utan ett plugin

Om du hellre vill göra ändringar eller lägga till anpassad styling på din befintliga inloggningssida än att skapa en helt ny, så gör du det.

Lägg bara till den här koden i ditt temas funktioner.php-fil eller i ett webbplatsspecifikt plugin:

Om det här är första gången du lägger till kodavsnitt i WordPress, vänligen hänvisa till vår guide om hur du lägger till kodavsnitt i WordPress så att du av misstag bryter din webbplats.

// Anpassad inloggningssida
funktion clp_login_head () {

eko ”; // Börja anpassade stilar
echo ‘.login #nav a, .login #backtoblog a {color: #! viktigt; } ‘; // Länkfärg för inloggningssida
echo ‘.login h1 a {bakgrund: url ("’. get_bloginfo (‘stylesheet_directory’). ‘/ bilder / BILD GÅR HÄR"); bredd: px; höjd: px; } ‘; // Logga in logotyp
echo ‘.login .button-primär {bakgrund: #; gräns färg:#; } ‘; // Knappfärg för inloggningssida
eko ”; // Avsluta anpassade stilar

}
add_action (‘login_head’, ‘clp_login_head’);

Du kan ändra CSS och bild-URL i ovanstående kod för att lägga till din anpassade styling för inloggningssidan för WordPress.

Metod 4: Visa inloggningsformulär för WordPress var som helst utan plugin

Om du vill visa WordPress-inloggningsformuläret på någon sida, sidofält eller sidfotområde kan du lägga till den här koden i tematets mallfil:

Precis som ovanstående metod, om du lägger till kodavsnitt till WordPress för första gången, vänligen hänvisa till vår guide om hur du lägger till kodavsnitt i WordPress så att du inte av misstag bryter din webbplats.

<?php
wp_login_form ();
?>

Ovanstående kod visar bara den allmänna inloggningssidan för WordPress på den plats där du lägger till koden. Om du kan lägga till en anpassad WordPress-formsida med ytterligare fält och alternativ kan du använda den här koden:

<?php $ args = array (
‘echo’ => Sann,
‘omdirigering’ => ‘Http://wpsnipp.com’,
‘form_id’ => ‘Inloggningsformulär’,
‘label_username’ => __( ‘Användarnamn’ ),
‘label_password’ => __( ‘Lösenord’ ),
‘label_remember’ => __( ‘Kom ihåg mig’ ),
‘label_log_in’ => __( ‘Logga in’ ),
‘id_username’ => ‘användarnamn’,
‘id_password’ => ‘User_pass’,
‘id_remember’ => ‘kom ihåg mig’,
‘id_submit’ => ‘Wp-submit’,
“kom ihåg” => Sann,
‘value_username’ => NULL,
‘value_remember’ => falsk);
wp_login_form ($ args);
?>

Det är allt!

Vi hoppas att den här guiden hjälpte dig att skapa en anpassad inloggningssida i WordPress. Om du gillade den här artikeln kanske du också vill läsa vår artikel om de bästa kontaktformulär-plugins 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