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.

Freebie: Infographic Elements Pack

Freebie: Infographic Elements Pack

Hvis du liker vår siste freebie-utgivelse av 5 sett med inforgaphic-bannerelementer, er vi tilbake med en annen infografisk freebie-utgave, som er tilgjengelig utelukkende for våre lojale Hongkiat- lesere av våre venner på freepik.Dette er en flott pakke som inneholder 100% vektorelementer, inkludert grafikk, diagramgrafikk, tidslinjer, bannere, kakediagrammer, pyramider, infografiske kart og buntings, alt i en lys og vakker fargevalg, klar til å bli redigert og utgitt. Bor

(Tekniske og design tips)

Lory Carousel Slider Funksjoner CSS Animasjon og Touch Support

Lory Carousel Slider Funksjoner CSS Animasjon og Touch Support

Ut av alle karusellplugger på nettet må jeg tippe hatten min til Lory . Det er et så enkelt konsept, men det er lett en av de mest kraftige skyvekontrollene på nettet.Den minifiserte versjonen utgjør ca. 7 KB, som ikke er liten, men det er absolutt ikke dårlig for en berøringsaktivert karusellregulator .Du kan

(Tekniske og design tips)