Föreställ dig att en användare försöker återställa sitt lösenord på din webbplats i WordPress och möts av ett generiskt formulär som inte alls gillar din vackert designade webbplats. Detta kan vara förvirrande för besökare, särskilt om du har en webbplats där människor blir medlemmar eller loggar in ofta.
Vi har arbetat med många webbplatser genom åren. Vi har sett hur det hjälper användare och får dem att känna sig mer bekväma när de behöver ändra sitt lösenord genom att få sidan för återställning av lösenord att gilla resten av webbplatsen.
I den här artikeln visar vi dig hur du ändrar utseendet på sidan för återställning av lösenord i WordPress och skapar en konsekvent, visuellt tilltalande upplevelse som lugnar användarna.
Varför Customize sidan Återställ lösenord i WordPress?
Din WordPress-webbplats levereras med ett kraftfullt användarhanteringssystem som gör det möjligt för människor att skapa ett användarkonto, logga in och återställa sitt lösenord.
Dessa sidor visar WordPress varumärke och logotyp som standard. Ibland är detta inte ett stort problem, särskilt om du eller ditt team är de enda som loggar in på obszar administracyjny.
Men om du driver en e-handel eller en medlemssajt kan dina klienter också behöva logga in.
Du kan ge användarna en mycket bättre upplevelse genom att customize dessa pages så att de matchar din websites design och varumärke. Om du vill kan du också add to extra content, t.ex. din logga eller en lista över senaste inlägg.
Du kanske redan har följt våra andra przewodniker om hur du lägger till ett anpassat användarregistreringsformulär och en inloggningssida.
Låt oss nu ta en titt på hur du anpassar sidan för återställning av lösenord. Använd bara snabblänkarna nedan för att hoppa direkt till den metod du vill använda:
Metod 1: Customize sidan Återställ lösenord med hjälp av Formidable Forms (Easy)
Det enklaste sättet att ersätta WordPress page för återställning av lösenord är genom att använda Formidable Forms. Detta plugin låter dig ersätta standard-sidan för återställning av lösenord med hjälp av en shortcode.
Denna metod tillåter dig inte att edit formuläret för återställning av password, men you can add your own content around it. Du kan till exempel add to text, images och annat content med hjälp av WordPress standard editor för post.
Först måste du installera Formidable Forms plugin. Mer information finns i vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Vid aktivering måste du också installera Formidable Forms Lite. Detta gratis plugin ger core-grunden för premium-pluginets mer avancerade funktioner.
När du har gjort det, gå till Formidable Forms ” Global Settings page i din dashpanel och välj ’Click to enter a license key manually’.
Du hittar license key i ditt account på Formidable Forms website. När du har enter denna information går du vidare och klickar på knappen ”Save License”.
Därefter måste du installera Addon för användarregistrering genom att gå till Formidable ” Add-Ons. På den här vyn hittar du addon för användarregistrering och klickar på knappen ”Install”.
Nu är du redo att skapa en customize-sida för återställning av lösenord genom att gå till Pages ” Add New.
Börja med att ge sidan en Rubrik och klicka sedan på + knappen. I popupen som dyker upp börjar du skriva ”Shortcode”.
Klicka bara på det högra blocket för att lägga till det på page.
Du kan nu add to följande shortcode: [frm-reset-password]
.
Klart är att du kan lägga till annat content som du vill visa på sidan för återställning av password.
När du är nöjd med sidans layout klickar du på knappen ”Publicera” för att göra den live.
Slutligen måste du tala om för WordPress att använda den här sidan i stället för standardsidan för återställning av lösenord. För att göra det, gå till Formidable ” Globala inställningar och klicka på kartan ”Registrering” i menyn.
Här öppnar du rullgardinsmenyn ”Reset Password Page” och väljer den sida du just skapade.
Glöm inte att klicka på knappen ”Update” högst upp på vyn för att store dina settings.
Du kan nu besöka din WordPress website för att se den customize reset password page i action.
Metod 2: Customize alla medlemssidor med hjälp av ”Theme My Login” (gratis)
För att ge en konsekvent användarupplevelse är det en bra idé att använda samma Styling på all your membership pages. Theme My Login är ett gratis plugin som allow you att ersätta de built-in WordPress dashboard, login, logga ut, registrering, glömt lösenord, och reset password pages.
Det är inte den mest anpassningsbara lösningen, men alla dess sidor kommer att använda ditt WordPress-tema.
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 customize-vyer för login, logga ut, registrering, borttappat lösenord och återställning av lösenord. Du kan se dessa URL:er genom att gå till Theme My Login ” General page.
För att ersätta någon av dessa pages behöver you helt enkelt skapa en new page med exakt denna URL.
För att skapa en WordPress customized sida för återställning av password, gå till Page ” Add New. Här klickar du på ikonen ”+” och börjar skriva ”Shortcode”.
När det rätta blocket visas, ge det ett click för att add to the page.
Inuti blocket, add to följande shortcode:
[theme-my-login action="lostpassword"]
Du kan nu lägga till extra content som du vill visa på sidan för återställning av password, till exempel din logga. När du är nöjd med hur sidan är uppbyggd klickar du på ”Save draft”.
Därefter går du till Pages ” All Pages och hittar sidan för återställning av password som du just skapade.
Håll bara musen över page och click på knappen ”Quick Edit” när den dyker upp.
I fältet ”Slug” skriver du in ”lostpassword”.
Därefter öppnar du dropdown-menyn ”Status” och väljer ”Publicerad”.
När du har gjort det, gå vidare och klicka på ”Uppdatera”. Om du nu besöker din WordPress-blogg kommer du att se sidan med det förlorade lösenordet live.
För att ersätta de andra built-in WordPress membership pages, följ bara stegen som beskrivs ovan, men se till att du använder rätt URL slug och shortcode.
Om du till exempel vill skapa en custom page för återställning av lösenord, måste du använda [theme-my-login action="resetpass"]
shortcode. Du måste också ändra ”URL slug” till resetpassword
.
Metod 3: Skapa en återställningssida för lösenord med WPForms (helt anpassningsbar)
Om du vill ersätta standard password reset page med ett helt customize formulär, rekommenderar vi att du använder WPForms.
Detta plugin har en ”User Password Reset Form” template som du kan customize med din egen text, images och branding. Du kan till och med add to och remove fält för att samla in exakt den information du vill ha från medlemmarna.
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, heada till WPForms ” Settings och enter din license key. Du hittar den här informationen i ditt account på WPForms website.
När du har enter license key måste du installera User Registration addon, som allowar dig att skapa custom user registration, password reset, and login forms för din site.
I adminpanelen går du till WPForms ” Addons och hittar Addon för registrering av användare.
Klicka bara på ”Install Addon” för att downloada det och klicka sedan på ”Activate” för att aktivera det.
Du är nu redo att skapa ditt eget customiserade formulär för återställning av lösenord genom att gå till WPForms ” Add New page. Här skriver du in en rubrik för det nya formuläret.
När det är gjort rullar du till mallen ”User Password Reset Form” och klickar på knappen ”Use Template”.
WPForms kommer nu att hämta formulärmallen för återställning av lösenord för användare.
Om du vill customize ett fält med din egen text, etikett eller description klickar du bara för att välja det och använder sedan inställningarna i menyn till vänster.
Templatet har till exempel en knapp för ”Submit”. Om du vill visa en annan etikett för knappen klickar du bara för att selecta fältet och skriver sedan ett new message i ”Submit Button Text”.
You can also change what happens when a user submits their password reset request by going to Settings ” Confirmations.
Här öppnar du dropdown ’Confirmation Type’ och väljer om du vill redirecta användaren till en annan page eller URL eller helt enkelt visa ett message som ber dem att kolla inboxen efter ett email med lösenordsåterställning.
Du kan också customize meddelandet genom att skriva in det i den lilla textredigeraren. Du kan t.ex. påminna användarna om att kontrollera sina foldrar med skräppost.
Proffstips: Om dina e-postmeddelanden regelbundet skickas till skräppost rekommenderar vi att du använder en SMTP-tjänsteleverantör för att förbättra leveransgraden för dina e-postmeddelanden.
När du är nöjd med hur formuläret är uppbyggt, clickar du på knappen ”Save” högst upp till höger på vyn.
För att ersätta WordPress standardsida för återställning av lösenord skapar du en sida med sluggen ”ett lösenord”. Lägg sedan till formuläret på den sidan.
Det enklaste sättet att göra detta är att klicka på knappen ”Embed” i WPForms editor och välja ”Create New Page”.
Skriv nu in en rubrik för den nya page. Du kommer att ändra sluggen i ett senare steg, så du kan använda vad du vill.
När du har gjort det klickar du på ”Let’s Go”.
Du kommer då till WordPress sidredigerare, där formuläret redan har lagts till på den nya sidan. Du kan nu göra ändringar på sidan, t.ex. lägga till mer text, en egen logotyp eller kategorier och taggar.
När du är nöjd med hur page ser ut klickar du på knappen ”Save draft”.
Därefter går du till Pages ” All Pages och hittar sidan för återställning av password som du just skapade.
Här klickar du på knappen ”Quick Edit”.
I fältet ”Slug” skriver du in ”lostpassword”.
Därefter öppnar du dropdown-menyn ”Status” och väljer ”Publicerad”.
Nu måste du redirecta besökare till den custom password reset page i stället för den built-in WordPress page. Det enklaste sättet att göra detta är att använda det gratis tillägget WPCode.
WPCode är det bästa code snippets plugin som används av över 2 miljoner WordPress-webbplatser. Det gör det enkelt att add to custom code i WordPress utan att behöva edit filen functions.php.
Med WPCode kan även Beginnare editera koden på sin website utan att riskera misstag och stavfel som kan orsaka många vanliga WordPress error.
Det första du behöver göra är att installera och aktivera det gratis pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering, head över till Code Snippets ” Add Snippet.
Här hittar du färdiga snippets som tillåter dig att ladda upp ytterligare filtyper till WordPress, inaktivera bilagssidor, helt inaktivera kommentarer och mycket mer.
Bara hovera musen över ”Add Your Custom Code” och klicka sedan på ”Use snippet” när det dyker upp.
Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.
Därefter öppnar du dropdown ’Code Type’ och väljer ’PHP Snippet’.
I code editor, add to följande code snippet:
add_filter( 'lostpassword_url', 'my_lostpassword_url' );
function my_lostpassword_url() {
return site_url('/lostpassword/');
}
Därefter rullar du till ”Insertion” section. WPCode kan add koden till olika locations, såsom efter varje post, endast front-end eller endast admin.
För att använda den custom PHP-koden på hela din website, blogg eller WooCommerce store, click on ”Auto Insert” om det inte redan är valt. Öppna sedan dropdown ’Location’ och välj ’Run Everywhere’.
Därefter är du redo att bläddra upp till toppen av skärmen och klicka på ”Inactive” för att ändra den till ”Active”.
Slutligen klickar du på ”Save Snippet” för att göra PHP snippet live.
Försök nu att besöka den built-in WordPress login vy.
Om du klickar på länken ”Lost your password?” kommer du att redirectas till den customized page för återställning av lösenord som du just skapat.
Beroende på hur din site är uppbyggd kan du behöva update länkarna för återställning av password på andra pages.
Om du har skapat en customized login page för WordPress med hjälp av ett plugin som WPForms, rekommenderar vi också att du lägger till länken för återställning av new password i detta formulär.
Expertguider för att customize pages i WordPress
Vi hoppas att denna poradnik hjälpte dig att lära dig hur du anpassar WordPress sida för återställning av lösenord. Du kanske också vill se några poradnikar om hur du förbättrar säkerheten vid inloggning i WordPress:
- Så här skapar du en customize login page i WordPress (Ultimate Guide)
- Hur och varför du bör begränsa försök till inloggning i WordPress
- Så här lägger du till säkerhetsfrågor på vyn för att logga in på WordPress
- Så här lägger du till en anpassad URL för inloggning i WordPress (steg för steg)
- Viktiga tips för att skydda ditt admin area 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.
Rowdy
Hello, do I need to have a paid license for the first method with Formidable Forms ?
WPBeginner Support
Yes, at the moment user registration is part of the paid plan.
Administratör
Lennon
your article is nice and helpful
WPBeginner Support
Glad you found our guide helpful!
Administratör