no.hideout-lastation.com
Paradis For Designere Og Utviklere


Hvordan bygge en fullt tilpasset WordPress Login Page

Mange av dere tror jeg er kjent med WordPress-innloggingssiden på wp-login.php . Det ser bra ut, og fungerer fint. Men når det gjelder å skape et nettsted for kunder, vil du kanskje ha en mer tilpasset påloggingsside, slik at den integrerer pent med webdesignet som helhet. I tillegg kan det være at kundene får et godt inntrykk av dine ferdigheter ved å ha en tilpasset påloggingsside.

Hvis dette er noe du vil oppnå på nettstedet ditt, kan du lage en fullt tilpasset WordPress-påloggingsside.

Tilpasset påloggingsside

Først må vi opprette en egendefinert sidemal for innloggingssiden. For å gjøre det kan du opprette en ny sidemal og navnet - for eksempel - page-login.php . Deretter oppretter du en ny side fra WordPress-backend og angir permalinken for å login slik at WordPress automatisk vil ta inn page-login.php malen for siden.

Innloggingsskjemaet

Sett wp_login_form taggen på page-login.php siden mal for å vise påloggingsskjemaet.

Følgende er valgfritt, men kan være nyttig i visse tilfeller. Du kan konfigurere noen få ting for påloggingsskjemaet, for eksempel å angi omadressering av nettadressen etter at brukeren har logget inn, endrer brukernavnet og passordet.

 home_url (), 'id_username' => 'bruker', 'id_password' => 'pass');?> 

Videre kan du også legge til noe til side. Det kan være din logo og en liten beskrivelse av nettstedet ditt, for eksempel.

Hongkiat.com er en designweblog dedikert til designere og bloggere. Vi publiserer kontinuerlig nyttige triks, verktøy, opplæringsprogrammer og inspirerende kunstverk.

home_url (), 'id_username' => 'bruker', 'id_password' => 'pass');?>

La oss nå gjøre skjemaet bedre med CSS. Du kan gjøre CSS opp på egen hånd som per ditt nettsted krav. I dette eksemplet ser du hvordan innloggingsskjemaet mitt ser ut. Den har svart bakgrunn, med en blå knapp, som passer ganske bra med Hongkiat.com-temaet.

Validering

På dette tidspunktet er innloggingssiden allerede funksjonell. Vi kan prøve å logge inn, og hvis det lykkes, blir vi omdirigert til nettadressen som vi har angitt i redirect ovenfor. Men det er noe vi trenger å ta opp.

Først er wp-login.php siden fortsatt tilgjengelig. Det ville være bedre å omdirigere wp-login.php til vår nye påloggingsside for å levere en samlet opplevelse til våre kunder.

For å gjøre det kan du legge til følgende koder i functions.php av temaet ditt.

 funksjon redirect_login_page () {$ login_page = home_url ('/ login /'); $ page_viewed = basenavn ($ _ SERVER ['REQUEST_URI']); hvis ($ page_viewed == "wp-login.php" && $ _SERVER ['REQUEST_METHOD'] == 'GET') {wp_redirect ($ login_page); exit; }} add_action ('init', 'redirect_login_page'); 

Husk å endre $login_page variabelen til din egen påloggingsside (takk til Montana Flynn for tipset).

For det andre kan innloggingssiden virke som forventet når vi er logget inn. Men hvis det oppstår en feil som når du sender inn ugyldige bruker- og passordkombinasjoner, eller sender inn et tomt felt, vil vi også bli kastet bort til wp-login.php . For å løse dette problemet, legg til følgende funksjoner i functions.php .

 funksjon login_failed () {$ login_page = home_url ('/ login /'); wp_redirect ($ login_page. '? login = mislyktes'); exit; } add_action ('wp_login_failed', 'login_failed'); funksjon verifiser_brukernavn_password ($ bruker, $ brukernavn, $ passord) {$ login_page = home_url ('/ login /'); hvis ($ brukernavn == "" || $ passord == "") {wp_redirect ($ login_page. "? login = empty"); exit; }} add_filter ('autentiser', 'verify_username_password', 1, 3); 

Disse to funksjonene utfører to oppgaver. De vil omdirigere brukeren ved å feile, og legge til en login streng til nettadressen med verdien av enten failed eller empty .

Det siste problemet er at vi også blir omdirigert til wp-login.php når vi har logget ut fra nettstedet. Så, vi må også spesifisere omadresseradressen ved å logge ut, slik som det.

 funksjon logout_page () {$ login_page = home_url ('/ login /'); wp_redirect ($ login_page. "? login = false"); exit; } add_action ('wp_logout', 'logout_page'); 

Feilmelding

Vi vil vise en feilmelding, vise brukeren når feilen oppstod, og når de har logget ut ved å bruke spørringsstrengen som vi har lagt inn i nettadressen. For å få verdien fra innloggingsspørsstrengen over, kan vi bruke $_GET .

Sett denne koden under på innloggingssiden mal.

 $ login = (isset ($ _ GET ['login'])))? $ _GET ['login']: 0; 

Ovennevnte kode vil sjekke om login inneholder verdi, ellers vil den bli satt til 0 . Da vil vi vise forskjellige varslingsmeldinger basert på verdien av $error, slik som det.

 hvis ($ login === "mislyktes") {echo ' 

FEIL: Ugyldig brukernavn og / eller passord.

'; } elseif ($ login === "tom") {echo '

FEIL: Brukernavn og / eller passord er tomt.

'; } elseif ($ login === "false") {echo '

FEIL: Du er logget ut.

'; }

Og nedenfor er hva feilmeldingen ser ut.

Konklusjon

Det er flere ting vi kan gjøre for å forbedre innloggingssiden, for eksempel legge til Lost Password-lenke, Register Link og en personlig feilmelding . Men på dette tidspunktet fungerer det godt nok for at brukerne skal logge på og logge ut, og det kan også være en god start å lage en mer avansert påloggingsside.

Vi håper at du finner denne opplæringen nyttig.

20 smarte enheter for bedre helse og fitness

20 smarte enheter for bedre helse og fitness

Det er et bredt spekter av faktorer involvert i å opprettholde en sunn livsstil . Noen ganger gjør dette det vanskelig å identifisere hvorvidt du er på rett spor. Sikker, slitesterk treningsutstyr kan virkelig hjelpe i noen form, men de gir ikke nødvendigvis en omfattende oversikt over helsen din.Held

(Tekniske og design tips)

Quantum Computing Forklart (Som Du Er En 5 år gammel)

Quantum Computing Forklart (Som Du Er En 5 år gammel)

Konseptet "Quantum Computing" som nylig går viral - takket være en bestemt statsminister - er et av de mange ukjente områdene av vitenskap av våre ikke-vitenskapelige peeps .Grunnen til at de fleste av oss ikke har hørt om det ennå, til tross for at det har eksistert i flere tiår, er at det for det meste er teoretisk, og de som eksperimenterte på det i begynnelsen var veldig hush-hush om det på grunn av behovet for militær og bedriftshemmelighet.Ikke dest

(Tekniske og design tips)