Hvordan opretter man en brugerdefineret login- og registreringsside i WordPress?

Oprettelse af en brugerdefineret login- og registreringsside i WordPress hjælper dig med at give brugerne en mere problemfri og mere brandet oplevelse. I stedet for standardskærmene i WordPress kan du designe sider , der matcher dit websteds stil og giver bedre brugervenlighed.

En brugerdefineret opsætning giver dig også mulighed for at tilføje nyttige funktioner som sociale logins , stærkere sikkerhed, brugerroller og personlige beskeder. Dette gør din loginproces mere professionel og brugervenlig.

I denne guide lærer du de nemmeste måder at opbygge og tilpasse dine login- og registreringssider uden at ødelægge dit websted eller skrive kompleks kode.

Trin til at oprette en brugerdefineret login- og registreringsside på WordPress

En brugerdefineret login- og registreringsside på WordPress kan være din vej til at skabe dybere forbindelser med dit publikum. Lad os begive os ud på denne rejse sammen og opdage, hvordan du kan løfte dit websted til et skræddersyet og interaktivt online knudepunkt.

Opret brugerdefineret login

WordPress brugerdefineret design udfører en skræddersyet loginside for at give brugerne en gateway til at indtaste deres legitimationsoplysninger for at få adgang til deres konti. I modsætning til standard login-sider er brugerdefinerede sider designet til at matche webstedets stil og branding, hvilket giver en problemfri brugeroplevelse. De kan også indeholde yderligere funktioner, såsom forbedrede websikkerhedsforanstaltninger eller felter til at indsamle specifikke brugeroplysninger under registrering. Det er en personlig tilgang for brugere til at logge ind og interagere sikkert med et WordPress-websted.

Læs mere : Sådan tilføjer du WordPress reCAPTCHA til hjemmesidesikkerhed?

Sådan opretter du en med WP Forms –

Trin 1: Installer WPForms-pluginnet

Først skal du installere og aktivere WPForms-pluginnet.

Husk, at hvis du vil bruge brugerregistrerings- og loginfunktionerne, skal du bruge WPForms Pro eller en nyere version. Pro-versionen leveres med tilføjelsen Brugerregistrering, hvilket gør det super nemt at oprette brugerdefinerede login-sider.

Når du har installeret WPForms, skal du blot gå til WPForms ⟶ Tilføjelser .

Fortsæt med at rulle ned, indtil du finder brugerregistreringstilføjelsen . Klik på knappen for at installere den og gå videre til næste trin.

Slå WordPress vedligeholdelsestilstand til for at holde besøgende på afstand, mens du navigerer gennem hele processen uden afbrydelser.

Lær mere : Outsourcing af WordPress-vedligeholdelsesopgaver for at maksimere effektiviteten

Klar til at gå i gang! Lad os lave vores helt nye brugerdefinerede loginformular.

Trin 2: Opret en brugerdefineret WordPress-loginformular

Når WPForms-installationen er færdig, er det tid til at oprette en ny WordPress-loginformular, der afspejler vores hjemmesides unikke udseende.

Gå til WPForms ⟶ Klik på Tilføj ny for at starte

Dernæst lander du på WPForms-skabelonvalgskærmen. Takket være brugerregistreringstilføjelsen kan du få adgang til adskillige specialiserede skabeloner med unikke funktioner, som illustreret nedenfor.

Når formularen åbnes i formularbyggeren, vil du bemærke, at den indeholder felter til brugernavn, adgangskode og husk mig, hvilket gør den til en ret omfattende brugerdefineret loginløsning.

Feltet "Husk mig" er unikt og kun tilgængeligt i denne skabelon. Det giver brugerne mulighed for automatisk at logge ind, når de vender tilbage til dit websted efter at have brugt denne formular. Du kan beholde skabelonen, som den er, eller tilføje flere ting.

Vi vil gennemgå, hvordan du gør det i næste trin.

Interessant læsning : Top 5 uundværlige formularplugins til WordPress

Trin 3: Tilføj et brandingbillede til din loginformular

Med WPForms kan du nemt redigere skabeloner eller oprette nye formularer. For eksempel kan vi tilføje branding til vores loginformular for at gøre den unik.

En måde er at indsætte et headerbillede, der repræsenterer vores brand. For at gøre det skal du trække og slippe Indhold øverst i din formular, lige under titlen.

Når du har tilføjet feltet Indhold til din formular, skal du klikke på det for at få adgang til dets feltindstillinger .

Tid til at blive kreativ! Gå til WYSIWYG-editoren i venstre side, og begynd at tilføje billeder eller lave brugerdefineret tekst til din formular.

Lad os pifte vores WordPress-loginformular op med lidt brand-stil. Du skal blot trykke på Tilføj medie for at uploade et smart brugerdefineret billede .

Gør dig klar til lidt medie-pizzazz. Hvis du klikker på knappen Tilføj medie, åbnes WordPress Media Gallery- modalvinduet . Det er dit signal til at uploade billeder, ligesom du normalt gør i WordPress.

Husk at trykke på Gem -knappen for at forsegle handlen!

Yderligere læsning : Bedste WordPress kontaktformular plugins

Trin 4: Tilpas dine indstillinger for brugerdefineret loginformular

Lad os nu dykke ned i indstillingerne for loginformularen. Dette giver os mulighed for at administrere formularens knap og den side, som vores besøgende skal henvende sig til efter at have indsendt den.

For at starte skal du klikke på Indstillinger, der findes i venstre side af formularbyggeren.

Når du indtaster indstillingerne, Generelt allerede valgt, hvilket er præcis der, vi skal være.

I de generelle indstillinger skal du blot rulle ned til teksten på knappen Send og opdatere den til at læse Log ind .

Derudover har vi justeret teksten under Send-knappen for at give brugerne besked om, at login er i gang. Du er velkommen til at tilpasse denne besked.

Lad os nu navigere til Bekræftelser .

Her kan du vælge handlingen, efter loginformularen er indsendt. Du kan dirigere brugere til WordPress-administrationsområdet, men at sende dem tilbage til frontend er mere logisk for mange websteder.

I dette tilfælde omdirigerer vi brugerne til hjemmesiden.

Før vi går videre, er der endnu en indstilling, vi skal gennemgå.

Rul ned under fanen Indstillinger i formularbyggeren, og du vil se Brugerregistrering . Klik på den for at se dens muligheder.

Du kan skjule denne formular for brugere, der allerede er logget ind, ved at slå knappen til "til". Tilpas meddelelsen, så den vises i stedet for formularen, når en bruger allerede er logget ind, ved hjælp af det medfølgende tekstfelt.

Nu er det tid til lidt udforskning! Du er velkommen til at tjekke de andre indstillinger og justere hvad som helst, du har lyst til. Når du er tilfreds, skal du blot trykke på Gem øverst i formularbyggeren for at gemme dine ændringer.

Se også : Sådan installerer du WordPress lokalt på Mac

Trin 5: Udgiv din brugerdefinerede loginformular

Spændende tider! Din nyudviklede loginformular er klar til verden.

Hvor skal den placeres? Mulighederne er lige så ubegrænsede som din fantasi:

• Pryd siderne med dens tilstedeværelse.
• Integrer det problemfrit i dine opslag.
• Lad det skinne i sidebjælken.
• Eller læg den tæt ind i sidefoden.

Dernæst vil vi begynde at oprette en brugerdefineret WordPress login-side. Klar til at dykke ned? Bare klik hårdt på Integrer øverst i formularbyggeren!

Her er hvad der skal ske næste gang –

1. Der vises en modal, der spørger, hvor du vil integrere din formular. I dette eksempel opretter vi en ny side. Klik på Opret ny side .
2. Giv nu din side et navn. Når det er gjort, skal du klikke på Lad os gå i gang .
3. Denne handling fører dig til WordPress-blokeditoren med den integrerede loginformular.
4. Dette er et godt sted at bruge formularstylingmulighederne i WPForms-blokken til nemt at tilpasse udseendet af dine felter, etiketter og knapper.
5. Når du er tilfreds med udseendet af din brugerdefinerede loginformular, skal du blot klikke på Udgiv for at udgive din brugerdefinerede loginside.

Det var det! Din brugerdefinerede WordPress loginside er nu live og klar til brug.

Pro-tip: Hvis du har brugt Skjul hvis logget ind , skal du huske, at du skal logge ud af WordPress for at se din færdige formular. Ellers vil loginskærmen ikke være synlig, mens du er logget ind. Det er et lille trick til at sikre, at alt ser korrekt ud, før besøgende ankommer!

Vidste du det? – Nyt CF7 Blocks-plugin bringer blokke til kontaktformular 7

Trin 6: Tilføj loginformularen til din navigationsmenu

Ah, du har lige lagt sidste hånd på din brugerdefinerede loginformular. Fremragende arbejde!

Lad os nu sørge for, at det er nemt tilgængeligt for dine besøgende. Nøglen? Tilføj det til din hjemmesides navigationsmenu .

For at komme i gang skal du glide over til dit WordPress-dashboard og klikke på Udseende og derefter vælge Menuer .

Udseende ⟶ Menuer

Med et rent bord følger vi de næste trin –

1. Hvis dit tema allerede har en navigationsmenu, skal du gå til Udseende og derefter Menuer i dit WordPress-dashboard. Marker din loginside i kolonnen til venstre, og klik på Tilføj til menu .
2. Din loginside vises nu i højre side sammen med andre menupunkter. Omarranger deres rækkefølge ved at trække og slippe, hvis det er nødvendigt.
3. Vælg derefter, hvor du vil have menuen vist. De fleste temaer tilbyder op til 5 visningsplaceringer, f.eks. headeren eller footeren. I dette eksempel tilføjer vi den til headeren, ofte mærket som den primære menu.
4. Klik på Primær menu , og tryk derefter på Gem menu nederst for at opdatere den.

Din navigationsmenu vil nu indeholde den nye loginside. Når du har opdateret eller oprettet menuen, skal du sørge for at besøge din hjemmeside for at kontrollere, om alt ser godt ud.

5. Hvis din hjemmeside stadig har brug for en menu, er det lignende at oprette en. Start med at give din nye menu et navn under Menustruktur .

Følg de samme trin som ovenfor for at tilføje loginsiden til din navigation. Hvis du også har oprettet en brugerdefineret formular til nulstilling af adgangskode, kan du overveje at tilføje den til menuen også.

Endnu en vejledning : Hvordan opretter man en hjemmeside med én side i WordPress? (3 enkle trin)

Trin 7: Omdiriger WordPress-loginsiden til din brugerdefinerede loginside

På dette tidspunkt skal du sørge for, at alle, der forsøger at bruge den sædvanlige WordPress-loginside, i stedet sendes til din nye brugerdefinerede side.

For at få dette til at ske, skal vi bruge et plugin kaldet WPCode og en lille smule kodningskendskab.

WPCode er et praktisk plugin, der giver dig mulighed for at tilføje din egen kode til dit WordPress-websted gratis. Når du har installeret og aktiveret det, skal du gå til Kodesnippets , klikke på + Tilføj kodesnippet og vælge Tilføj din brugerdefinerede kode for at oprette et nyt kodesnippet .

Dernæst skal du på den følgende skærm give dit kodestykke et tydeligt og huskeværdigt navn. For eksempel har vi kaldt det Omdirigering af loginside.

Indsæt derefter den angivne kode i det angivne område:

add_filter('login_url', function($login_url, $redirect, $force_reauth) { // Skift din loginsides url her $login_url = 'https://sulliesflowers.com/login/'; if (!empty($redirect)) { $login_url = add_query_arg('redirect_to', urlencode($redirect), $login_url); } if ($force_reauth) { $login_url = add_query_arg('reauth', '1', $login_url); } return $login_url;}, 10, 3);

Sørg for at erstatte https://sulliesflowers.com/login/ med URL'en til din brugerdefinerede loginside. Klik derefter på knappen Gem uddrag for at gemme dine ændringer.

Du modtager en bekræftelse, når din omdirigering er gemt og anvendt. Aktiver til sidst indstillingen øverst på skærmen for at aktivere dit kodestykke.

Fra nu af vil brugere, når de forsøger at logge ind, blive dirigeret til din brugerdefinerede side.

Hvordan opretter man en brugerregistrering i WordPress?

En brugerdefineret brugerregistreringsformular er en personlig webside, hvor besøgende kan oprette konti på en hjemmeside. I modsætning til login-siden, som er for erfarne stamkunder, handler denne formular om at byde nye ansigter velkommen og indsamle deres oplysninger for at give en skræddersyet oplevelse. Med WP-registreringsformularer kan du tilføje nogle ekstra detaljer ved at tilføje brugerdefinerede felter og gøre det til en problemfri del af dit websteds stemning.

En brugerdefineret registreringsformular giver dig også mulighed for kun at indsamle de oplysninger, du har brug for, hvilket holder tilmeldingsprocessen ren og brugervenlig.

Endnu en vejledning : Sådan tilpasser du WordPress-siden til nulstilling af adgangskode?

Trin 1: Installer WPForms-pluginnet

Installation af plugin'et er det første skridt. Sørg for at investere i WPForms Pro-abonnementet , da det giver adgang til brugerregistreringstilføjelsen, som vi bruger til nemt at oprette dynamiske registreringsformularer til brugerne af dit websted.

Det fantastiske ved WPForms er, at du ikke behøver nogen HTML , PHP eller CSS for at designe din WordPress-registreringsformular. Med dens intuitive træk-og-slip-formularbygger kan alle nemt oprette en brugerdefineret formular, der er skræddersyet til deres behov.

Trin 2: Aktivér brugerregistreringstilføjelsen

Det er nemt at aktivere tilføjelsen, da den integreres godt og korrekt med dit WordPress-websted.

1. Gå til WPForms ⟶ Tilføjelser fra dit WordPress-administrationsområde.
2. Rul gennem listen over tilføjelser, eller skriv brugerregistrering i søgefeltet for at finde tilføjelsen Brugerregistrering.
3. Klik på Installer tilføjelsesprogram for at starte installationsprocessen.
4. Når den er installeret, ændres status under brugerregistreringstilføjelsen til Aktiv . Tillykke! Du har nu aktiveret brugerregistreringstilføjelsen.
5. Med brugerregistreringstilføjelsen klar, kan du nemt begynde at oprette WordPress-brugerregistreringsformularer ved hjælp af WPForms.

Lær : Sådan migrerer du fra Umbraco til WordPress

Trin 3: Opret WordPress-brugerregistreringsformular

Dette trin giver dig i bund og grund mulighed for problemfrit at indsamle brugeroplysninger og strømline registreringsprocessen på dit WordPress-websted.

Fortsæt med at følge –

1. For at oprette en ny registreringsformular skal du gå til WPForms ⟶ Tilføj ny .
2. Du bliver dirigeret til formularopsætningsskærmen, hvor du kan navngive din formular og vælge en skabelon.
3. I dette tilfælde laver vi WordPress-tilmeldingsformularen fra bunden, men for en hurtigere løsning kan du også starte med en skabelon. Klik på Opret tom formular .

4. Du vil finde dig selv på formularbyggerskærmen, hvor formularen er tom, da vi valgte en blank formular.
5. WPForms tilbyder omfattende tilpasningsmuligheder, herunder forskellige brugerdefinerede felter, du kan tilføje efter behov. I de kommende trin vil vi udforske disse registreringsfunktioner.

Trin 4: Tilpas felterne i brugerregistreringsformularen

Lad os lave en elegant registreringsformular, der holder den overskuelig og overskuelig med kun de nødvendige felter for hurtigt at indsamle brugeroplysninger. Kortere formularer betyder mindre risiko for brugerfrafald. Men vores erfaring er, at du med WPForms' Form Abandonment -tilføjelse stadig kan få fat i disse leads.

Lad os nu tilføje felt-stil til vores formular ved hjælp af træk-og-slip-værktøjet. Du skal blot vælge et felt fra menuen til venstre og slippe det på din formular til højre.

Skyl og gentag, indtil alle dine ønskede felter er på plads.

Til vores formular har vi tilføjet:

1. Navn
2. E-mail
3. Enkeltlinjetekst (til den søde brugernavnsinput)
4. Adgangskode

Du er velkommen til at tilføje flere detaljer til dine formularfelter. Se, hvordan vi har tilpasset vores felt med enkelt linjetekst til at sige Brugernavn , indstillet en maksimal tegngrænse og endda tilføjet en inputmaske til at kontrollere tilladte tegn i brugernavnet.

For at justere et felt skal du klikke på det for at vise feltindstillingerne . Under Generelt kan du justere etiketten, tilføje en beskrivelse og endda markere feltet efter behov.

Kom i gang med at lave kreative ting!

Yderligere læring : Umbraco vs WordPress: Sådan træffer du det rigtige valg til din indholdsstyring

Trin 5: Konfigurer indstillinger for WordPress-brugerregistreringsformular

Brugeraktiveringsmetode

I dette trin konfigurerer vi vores WordPress-brugerregistreringsformularindstillinger, så de passer til brugerflowet i henhold til dine præferencer:

Start med at klikke på Indstillinger ⟶ Brugerregistrering . Slå derefter Aktiver brugerregistrering til for at aktivere det.

Her er hvad du kan administrere i dette afsnit:

• Knyt hvert formularfelt til dets matchende brugerprofilfelt

• Vælg standardbrugerrollen for nye tilmeldinger

• Slå e-mail-notifikationer til for nye registreringer

• Vælg den bekræftelsesside, som brugerne ser efter registrering

Brug rullemenuerne til at linke hvert formularfelt til det korrekte profilfelt. Rul derefter ned til Brugerroller , og vælg en af ​​dit WordPress-websteds foruddefinerede roller til nye brugere.

Ændring af indstillinger for nye brugerregistreringer

Fortsæt med at scrolle ned forbi de tidligere nævnte indstillinger, og du vil støde på sektionen E-mail-notifikationer. Her kan du justere notifikationerne for nye brugerregistreringer.

Mulighederne omfatter:

• Sender en e-mail til administratoren, når en ny bruger tilmelder sig
• Afsendelse af kontooplysninger til brugeren, og
• Giver brugeren besked, når deres konto er aktiveret

Hvis du ønsker at tilpasse overskriften og indholdet af disse e-mails, skal du blot klikke på knappen "Rediger skabelon" ud for hver notifikationstype.

En anden guide: Sådan sletter du usynlige WordPress-administratorbrugere?

Rediger registreringsformular

Udover at sende notifikationsmails viser WPForms også brugerne en bekræftelsesbesked, når de har indsendt formularen.

Der er tre typer bekræftelser at vælge imellem:

1. Besked: Der vises en simpel besked, der bekræfter, at formularen er indsendt.
2. Vis side: Brugere føres til en bestemt webside på dit websted for at takke dem for at registrere sig.
3. Gå til URL (omdirigering): Brugere omdirigeres til et andet websted, f.eks. et affilieret e- handelswebsted.

Du kan tilpasse disse bekræftelser ved at gå til Indstillinger ⟶ Bekræftelser . I vores eksempel brugte vi standardbeskedtypen, men tilføjede brugerinstruktioner. Hvis du ønsker, at nye brugere automatisk skal logges ind på deres nye WordPress-konto i stedet for at se en takkebesked efter registrering på dit websted, skal du gemme dine ændringer.

Dernæst integrerer og publicerer vi formularen på dit websted.

Trin 6: Tilføj brugerregistreringsformularen til dit websted

Når du har oprettet din WordPress-brugerregistrerings- og loginformular, er det tid til at tilføje den til dit WordPress-websted.

1. Integrering af formularen:
   • Klik på Integrer øverst til højre på formularbyggerens skærm.
   • Vælg Opret ny side , og giv din nye side et navn. Klik derefter på Lad os gå i gang .

• WPForms fører dig til din WordPress-editor, hvor din nye registreringsformular allerede er integreret.
• Klik på Udgiv, når du er klar. Det var det! Din registreringsside er nu online på dit WordPress-websted.

2. Omdirigering af standard WordPress-registrerings-URL:
   • Overvej at omdirigere din standard WordPress-registrerings-URL til din nye brugerdefinerede loginside.
   • Standard WordPress-loginsiden virker måske malplaceret på dit websted, fordi den er for simpel og ikke matcher dit websteds tema.

Nu kan brugere registrere sig på dit websted ved hjælp af din brugerdefinerede registreringsformular. Efter registreringen kan du ændre deres roller eller andre indstillinger fra hver brugers standard WordPress-profilside.

Trin 7: Tilføj din registreringsside til din hjemmesides menu

Når du har offentliggjort din nye brugerregistreringsformular, bør du sørge for, at folk nemt kan finde den. En måde at gøre dette på er at tilføje den til hovedmenuen på dit WordPress-websted.

Sådan gør du:

1. Gå til Udseende ⟶ Menuer i dit WordPress-dashboard.

2. Find din nye registreringsside i valgmulighederne til venstre, og tilføj den til din menu.
3. Hvis dit WordPress-tema har en gammel registreringsside i menuen, skal du muligvis fjerne den. Husk at gemme dine ændringer.
4. Hvis du har brug for hjælp, kan du se en WordPress-menuvejledning for vejledning.

Og sådan har du det! Du har lært, hvordan du opretter en WordPress-registreringsformular, der gør det nemt for nye brugere at tilmelde sig på dit websted.

Fortsæt med at læse : Top 10 grunde til at bruge WordPress til din hjemmeside

Fordele ved at oprette en brugerdefineret WordPress-login- og registreringsside

At oprette brugerdefinerede login- og registreringssider til dit WordPress-websted er et smart træk, der kan give dig og dine brugere adskillige fordele. At tage kontrol over dette afgørende aspekt af dit websted kan forbedre den samlede brugeroplevelse, styrke din brandidentitet og endda forbedre sikkerhedsforanstaltninger.

Branding

At tilpasse dine login- og registreringssider er som at give din virtuelle hoveddør en tiltrængt makeover. Med kreativ flair kan du problemfrit integrere dit brands blændende logo, signaturfarveskema og trendy typografi med det samme. Denne ensartede branding forstærker øjeblikkeligt dit websteds unikke identitet og skaber en sammenhængende og mindeværdig oplevelse for hver besøgende, der træder ind ad døren.

Tips til at få mest muligt ud af det:

• Integrer dit brands logo og farveskema
• Oprethold et ensartet udseende og ensartet fornemmelse på tværs af alle sider
• Styrk din brandidentitet og opbyg tillid

Læs mere : 5 tips til branding med et lavt budget

Forbedret brugeroplevelse

Standard WordPress login- og registreringssiderne er basale og mangler visuel appel. Ved at tilpasse disse sider kan du skabe en mere engagerende og brugervenlig oplevelse for dine besøgende.

Tips til at få mest muligt ud af det:

• Design en visuelt tiltalende og intuitiv brugerflade
• Forbedr den overordnede æstetik og brugervenlighed
• Giv dine brugere en problemfri og behagelig oplevelse

Læs mere : Hvorfor er dårlig UX et mareridt for din virksomhed?

Øget sikkerhed

Brugerdefinerede login- og registreringssider giver dig mulighed for at implementere yderligere sikkerhedsforanstaltninger, såsom tofaktorgodkendelse, captcha-bekræftelse eller indikatorer for adgangskodestyrke. Dette ekstra lag af beskyttelse kan hjælpe med at afbøde potentielle sikkerhedsrisici og beskytte dit websted mod uautoriseret adgang.

Tips til at få mest muligt ud af det:

• Tilføj ekstra sikkerhedsfunktioner som f.eks. tofaktorgodkendelse
• Implementer captcha-verifikation for at forhindre botangreb
• Håndhæv mere robuste adgangskodekrav for forbedret sikkerhed

Læs mere : 10 bedste WordPress malware- og sikkerhedsscannere

Integration med tredjepartsværktøjer

Brugerdefinerede login- og registreringssider kan problemfrit integreres med tredjepartsværktøjer og -tjenester, såsom logins til sociale medier, e-mailmarketingplatforme eller CRM-systemer (Customer Relationship Management). Denne integration kan strømline brugeronboarding- og datastyringsprocesser.

Problemfri integrationer er afgørende for medlemssider, fordi de er afhængige af nøjagtige brugerdata, automatiserede arbejdsgange og nem onboarding.

Tips til at få mest muligt ud af det:

• Aktivér loginmuligheder for sociale medier for nemheds skyld
• Integrer med e-mailmarketingplatforme for problemfri kampagner
• Opret forbindelse til CRM-systemer for effektiv datahåndtering

Læs mere : Top 10 projektstyringsværktøjer til webbureauer

Konklusion

Oprettelse af en brugerdefineret login- og registreringsside i WordPress hjælper dig med at levere en renere, mere brandet og brugervenlig oplevelse. Med de rigtige værktøjer kan du tilpasse designet, forbedre sikkerheden og få loginprocessen til at føles professionel og problemfri.

Et par enkle ændringer bidrager i høj grad til, hvordan brugerne interagerer med dit websted, og gør dine loginsider både funktionelle og imødekommende.

Ofte stillede spørgsmål