Hvordan lage en tilpasset WordPress-påloggingsside (Ultimate Guide)

Ønsker du å opprette en tilpasset WordPress påloggingsside for nettstedet ditt?


Hvis du driver et WordPress-medlemsnettsted eller en nettbutikk, vil mange av brukerne dine ofte se påloggingssiden. Tilpassing av standard WordPress påloggingsside lar deg tilby en bedre brukeropplevelse.

I denne ultimate guiden vil vi vise deg forskjellige måter å lage en tilpasset innloggingsside for WordPress. Du kan også bruke denne opplæringen til å opprette en tilpasset WooCommerce påloggingsside.

Hvordan du enkelt oppretter en tilpasset påloggingsside for WordPress for nettstedet ditt

Dette er hva du vil lære av denne guiden.

    Hvorfor opprette en tilpasset WordPress-påloggingsside?

    WordPress kommer med et kraftig brukeradministrasjonssystem. Dette lar brukerne opprette kontoer i e-handelsbutikker, medlemsnettsteder eller på en blogg.

    Som standard viser innloggingssiden WordPress merkevare og logo. Dette er bra hvis du driver en liten blogg, eller du er den eneste personen som har administratoradgang.

    Standard innloggingsskjerm for WordPress

    Men hvis nettstedet ditt lar brukere registrere seg og logge på, gir en tilpasset påloggingsside en bedre brukeropplevelse.

    Bruke din egen logo og design får brukerne til å føle seg hjemme. Mens det å omdirigere dem til standard innloggingsskjerm for WordPress som ikke ligner nettstedet ditt, kan det se mistenksom ut for brukerne dine.

    Til slutt inneholder ikke standard påloggingsskjermbildet annet enn påloggingsskjemaet. Ved å lage en tilpasset påloggingsside kan du bruke den til å markedsføre andre sider eller spesielle kampanjer.

    Når det er sagt, la oss se på noen eksempler på tilpassede WordPress-påloggingssidesign.

    Eksempler på design av WordPress-påloggingssider

    Nettstedseiere kan tilpasse WordPress-påloggingssiden ved å bruke forskjellige stiler og teknikker.

    Noen lager en tilpasset påloggingsside som bruker nettstedets tema og farger. Andre, endrer standard påloggingsside ved å legge til en tilpasset bakgrunn, farger og sin egen logo til den.

    1. WPForms

    WPForms

    WPForms er markedets beste WordPress-kontaktskjema-plugin. Tilfeldigvis inneholder pluginen deres også et tillegg for å lage vakre innloggings- og registreringsskjemaer for WordPress, som vi vil vise deg senere i denne artikkelen.

    Deres tilpassede påloggingsside bruker en to-kolonneoppsett. Den venstre kolonnen inneholder påloggingsskjemaet og høyre kolonne brukes til å fremheve kampanjer og andre oppfordringer. I eksemplet over bruker de påloggingssiden for å dele sin årsrapport. Den bruker tilpasset merkevarebygging, bakgrunnsillustrasjon og merkefarger for å skape en unik påloggingsopplevelse.

    2. Rock My Wedding

    Rock My Wedding

    Rock My Wedding’s nettsted bruker et popup-modal for å vise innloggings- og registreringsskjema. Fordelen med å bruke en popup er at brukere kan logge seg på uten å forlate siden. Det sparer dem fra en ny sideinnlasting og gir en raskere brukeropplevelse.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves er et nettsted for kunst og håndverk der forfatteren publiserer innhold om å dekorere hjem, lage dyner, mønstre, broderi og mer. Påloggingssiden deres bruker et tilpasset bakgrunnsbilde som samsvarer med nettstedets tema med påloggingsskjemaet til høyre.

    4. Kirkens bevegelsesgrafikk

    Kirkens bevegelsesgrafikk

    Påloggingssiden til dette selskapet med bevegelsesgrafikk bruker en fargerik bakgrunn som gjenspeiler hva deres virksomhet handler om. Den bruker de samme nettstedets topptekst-, bunntekst- og navigasjonsmenyer på påloggingsskjermen. Innloggingsskjemaet er ganske enkelt med mørk bakgrunn.

    5. MITSLoan Management Review

    MITSLoan Management Review

    MITSLoan Management Review nettstedet bruker standard WordPress påloggingsskjermbilde. Den bruker tilpasset CSS med sin egen logo for å skjule WordPress-merkevaren.

    Opprette en front-end tilpasset påloggingsside i WordPress

    Det er flere WordPress-plugins som du kan bruke til å lage en front-end tilpasset påloggingsside i WordPress. Vi viser deg to forskjellige plugins, og du kan velge den som passer deg best.

    Opprette en WordPress påloggingsside ved å bruke Theme My Login

    Det første du trenger å gjøre er å installere og aktivere Theme My Login-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

    Ved aktivering oppretter Theme My Login automatisk nettadresser for din tilpassede pålogging, utlogging, registrering, glemt passord og tilbakestilling av passordhandlinger.

    Du kan tilpasse disse innloggingsadressene for WordPress ved å gå til Tema Min innlogging »Generelt side. Bla ned til delen “Slugs” for å endre disse nettadressene som brukes av plugin-programmet for påloggingshandlinger.

    Tema Mine innloggingssider

    Tema Min innlogging lar deg også bruke kortkoder for å lage tilpassede innloggings- og registreringssider. Du kan ganske enkelt opprette en side for hver handling og deretter legge til sidesluggen her, slik at pluginen kan finne og omdirigere brukere ordentlig.

    La oss starte med påloggingssiden.

    Gå over til Side »Legg til nytt å lage en ny WordPress-side. Du må gi siden din en tittel og deretter angi følgende kortkode “[tema-min-pålogging]” i innholdsområdet.

    Legger til kortkode

    Du kan nå publisere siden din og forhåndsvise den for å se din tilpassede påloggingsside i aksjon.

    Tilpasset innloggingsside for WordPress

    Gjenta prosessen for å lage andre sider ved å bruke følgende kortkoder.

    [theme-my-login action = ”register”] for registreringsskjema.

    [theme-my-login action = ”lostpassword”] ​​for siden med mistet passord.

    [theme-my-login action = ”resetpass”] bruk den på siden for tilbakestilling av passord.

    Opprette en tilpasset WordPress-påloggingsside ved hjelp av WPForms

    WPForms er det beste WordPress-skjemaet som bygger plugin på markedet. Det lar deg enkelt opprette tilpassede påloggings- og registreringsskjemaer for nettstedet ditt.

    WPForms er et premium WordPress-plugin, og du trenger minst deres pro-plan for å få tilgang til brukerregistreringstillegg. WPBeginner-brukere kan få 50% rabatt ved å bruke WPForms-kupongkoden: SAVE50

    Det første du trenger å gjøre er å installere og aktivere WPForms-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

    Ved aktivering må du besøke WPForms »Innstillinger side for å oppgi lisensnøkkelen. Du finner denne informasjonen under kontoen din på WPForms nettsted.

    WPForms lisens

    Etter å ha skrevet inn lisensnøkkelen, vil du kunne installere tilleggsprogrammer. Gå videre og besøk WPForms »Addons side og finn brukerregistrerings Addon.

    Installer brukerregistreringsvedlegg

    Deretter klikker du på Installer Addon-knappen for å laste ned og aktivere addon. Du er nå klar til å lage dine egne tilpassede påloggingsskjemaer.

    Gå over til WPForms »Legg til nytt og bla ned til malen ‘Brukerpåloggingsskjema’. Du må klikke på knappen “Opprett et brukerpåloggingsskjema” for å fortsette.

    Lag innloggingsskjema

    WPForms vil laste inn Brukerpåloggingsskjema med obligatoriske felt. Du kan klikke på feltene for å legge til din egen beskrivelse eller tekst rundt dem.

    WPForms danner byggmester

    Du kan også endre andre innstillinger. For eksempel legger den automatisk til ‘Send inn’ som knappetittel. Du kan klikke på den og deretter endre den til Innlogging i stedet.

    Skjemainnstillinger

    Du kan også bestemme hva som skjer når en bruker er logget på. Gå til Innstillinger »Bekreftelse kategorien og velg en handling.

    Omdiriger innloggede brukere

    Du kan omdirigere brukeren til hvilken som helst annen URL, omdirigere dem til hjemmesiden, eller bare vise dem en melding om at de nå er logget inn.

    Når du er fornøyd med skjemainnstillingene, klikker du på Lagre-knappen øverst til høyre på skjermen og lukker skjemabyggeren.

    Legge til ditt tilpassede påloggingsskjema til en WordPress-side

    WPForms gjør det superenkelt å legge til ditt tilpassede påloggingsskjema på ethvert WordPress-innlegg eller -side.

    Bare rediger siden der du vil legge til påloggingsskjemaet eller opprette et nytt. Legg til WPForms-blokken på innholdsområdet på siden redigeringsskjerm.

    Legger til WPForms-blokkering i et innlegg

    Velg deretter påloggingsskjemaet du opprettet tidligere, og WPForms-blokkering lastes automatisk inn i innholdsområdet.

    Forhåndsvisning av påloggingsskjema

    Du kan nå fortsette å redigere siden for påloggingsskjema, eller lagre og publisere endringene.

    Tilpassing av WordPress-innloggingsskjemadesign

    Som standard bruker din tilpassede WordPress-påloggingsskjemaside temaets sidemal og stiler. Den vil ha navigeringsmenyer, topptekst, bunntekst og sidefelt-widgeter til temaet ditt.

    Hvis du vil overta hele siden og designe noe helt fra bunnen av, kan du bruke et WordPress-sidebygger-plugin.

    Med en sidebygger-plugin, kan du opprette en tilpasset sidelayout og deretter legge til påloggingsformularwidget levert av Theme My Login eller WPForms.

    I skjermdumpen nedenfor har vi brukt den populære Beaver Builder-plugin. Vi brukte et bakgrunnsbilde på fullskjermoppsett og la deretter to kolonner. I en kolonne la vi til litt tekst og en knapp. I den andre kolonnen la vi til WPForms-widgeten.

    Opprette en tilpasset påloggingsside ved hjelp av sidebygger-plugin

    Fordelen med Beaver Builder er at det er 100% dra-og-slipp-løsning.

    Merk: Siden du allerede er logget inn, kan det hende at både Theme My Login og WPForms plugins ikke viser en direkte forhåndsvisning av påloggingsskjemaet. WPForms-plugin har et alternativ der du kan slå av dette i skjemainnstillingene.

    Hvis WordPress-sidebygger-plugins ikke er din greie, kan du bruke tilpassede CSS til å style skjemaet og selve innloggingssiden. Alternativt kan du også bruke CSS Hero-plugin for enkelt å legge til tilpassede CSS-stiler.

    Endre innloggingslogo og URL for WordPress

    Du trenger ikke alltid å lage en helt tilpasset WordPress-påloggingsside for nettstedet ditt. Mange nettsteder erstatter faktisk WordPress-logoen og logo-url-en mens du fremdeles bruker standard påloggingsside.

    Hvis du vil erstatte WordPress-logoen på påloggingsskjermen med din egen logo, kan du enkelt gjøre det ved å bruke en WordPress-plugin eller ved å legge til tilpasset kode. Vi viser deg begge metodene du kan bruke en som passer best for deg.

    Endre WordPress-påloggingslogo og URL ved hjelp av en plugin

    Det første du trenger å gjøre er å installere og aktivere Colorlib Login Customizer. plugg inn. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

    Ved aktivering legger pluginen til et nytt menyelement merket ‘Login Customizer’ til WordPress admin sidefelt. Ved å klikke på den vil innloggingstilpasseren starte.

    Innlogging tilpassing

    Innloggingstilpasseren vil laste inn ditt standard WordPress påloggingsskjermbilde med tilpasningsalternativer til venstre og live forhåndsvisning til høyre.

    For å erstatte WordPress-logoen med din egen, klikker du på fanen ‘Logoalternativer’ til høyre. Herfra kan du skjule WordPress-logo, laste opp din egen tilpassede logo, endre logo-URL og tekst.

    Last opp tilpasset logo til påloggingssiden

    Plugin-enheten lar deg også tilpasse standard WordPress-påloggingssiden helt. Du kan legge til kolonner, bakgrunnsbilde, endre farger på innloggingsform og mer.

    I utgangspunktet kan du opprette en tilpasset påloggingsside for WordPress uten å endre standard innloggingsadresse for WordPress.

    Når du er ferdig, klikker du bare på publiser-knappen for å lagre endringene. Du kan nå besøke WordPress-påloggingssiden for å se det tilpassede påloggingsskjemaet ditt.

    Tilpasset WordPress påloggingsside med tilpasset logo

    Endre innloggingslogo og URL for WordPress uten plugin (kode)

    Denne metoden lar deg erstatte WordPress-logoen manuelt på påloggingsskjermen med din egen tilpassede logo.

    Først må du laste opp din tilpassede logo til mediebiblioteket. Gå til Media »Legg til nytt side og last opp din tilpassede logo.

    Når du har lastet opp bildet, klikker du på “Rediger” -koblingen ved siden av. Dette vil åpne redigeringsmediesiden der du trenger å kopiere URL-en til filen og lime den inn i en tom tekstfil på datamaskinen din.

    Deretter må du legge til følgende kode i temaets features.php-fil eller en nettstedsspesifikk plugin.

    funksjon wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    bakgrunnsbilde: url (http: //path/to/your/custom-logo.png);
    høyde: 100 piksler;
    bredde: 300 piksler;
    bakgrunnsstørrelse: 300px 100px;
    bakgrunn-gjenta: ikke-gjenta;
    polstring-bunn: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Ikke glem å bytte ut bakgrunnsbilde-URL-en med fil-URL-en du kopierte tidligere. Du kan også justere andre CSS-egenskaper slik at de samsvarer med ditt tilpassede logobilde.

    Du kan nå besøke WordPress-påloggingssiden for å se den tilpassede logoen din i aksjon.

    WordPress påloggingsside med tilpasset logo

    Denne koden erstatter bare WordPress-logoen. Det endrer ikke logolinkelen som peker til nettstedet WordPress.org.

    La oss endre dette.

    Bare legg til følgende kode i temaets funksjoner.php-filen eller en stedsspesifikk plugin. Du kan legge til denne koden rett under koden du la til tidligere.

    funksjon wpb_login_logo_url () {
    returnere hjem_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    funksjon wpb_login_logo_url_title () {
    returner ‘Ditt nettstednavn og info’;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Ikke glem å erstatte ‘ditt nettstednavn og info’ med nettstedets faktiske navn. Den tilpassede logoen på påloggingsskjermen vil nå peke til nettstedets hjemmeside.

    Det er alt. Vi håper denne artikkelen hjalp deg med å lære forskjellige måter å lage en WordPress-påloggingsside for nettstedet ditt. Det kan også være lurt å se den ultimate WordPress-sikkerhetsveiledningen for tips om hvordan du forbedrer innloggingssikkerheten din i 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