Share
WordPress-påloggingsskjermen er godt utformet - det er rent og enkelt å samhandle med, og det fungerer bra på alle skjermstørrelser. Men hva om du bygger et nettsted for en klient som ønsker å vise sin egen logo til brukere som logger inn? Eller hvis du har en MultiSite-installasjon og vil at brukerne skal se merkevaren din når de logger på? Heldigvis kan du tilpasse måten påloggingsskjermen ser ganske enkelt ut.
For denne opplæringen har jeg laget et plugin for å gjøre dette; Fordelen med å bruke et plugin er at du kan slippe det inn på noen WordPress-nettsteder du utvikler, og gir dem øyeblikkelig merkevarebygging.
Trinnene jeg skal demonstrere i denne opplæringen er:
For å fullføre denne opplæringen trenger du:
Øverst på pluginet legger jeg til følgende linjer:
/ * Plugin Name: WPTutsPlus Tilpass Admin Part 1 - Inloggingsskjerm Plugin URI: http://rachelmccollin.co.uk Beskrivelse: Denne plugin støtter opplæringen i wptutsplus. Den tilpasser WordPress-påloggingsskjermen. Versjon: 1.0 Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.com Lisens: GPLv2 * /
Det er enkelt å legge til din egen eller kundens logo til påloggingssiden, og gjør din WordPress-installasjon umiddelbart mer profesjonell.
Accentsconagua
login_enqueue_scripts Handlingskrok:// legge til en ny logo på innloggingssiden funksjonen wptutsplus_login_logo () ?>
Dette vil legge til logoen din på påloggingsskjermen, som vist skjermbildet.
I tillegg til å legge til en logo kan du også endre størrelsen på den for å passe og legge til styling for andre elementer på skjermen.
Logoen over er litt presset for å passe inn i standardplassen som er oppgitt for den. Jeg skal justere størrelsen.
Rediger koden i plugin slik at den leser som følger:
// legge til en ny logo på innloggingssiden funksjonen wptutsplus_login_logo () ?>
Den høydeverdien du bruker vil avhenge av størrelsesforholdet mellom logoen din. Ved hjelp av 300px og auto for background-size Egenskapen sikrer at logoen din er like bred som innloggingsboksen, og at dens størrelsesforhold holdes, og høyde verdien vil gi nok plass til at logoen passer inn.
Nå ser logoen ut slik:
Mye bedre! Men størrelsen på logoen er ikke det eneste jeg kan gjøre med hensyn til styling. Hva med å endre noen farger?
All teksten som vises på påloggingssiden, er i form av lenker, så det er linker du må stile. Rediger koden din igjen slik at den lyder som følger:
// legge til en ny logo på innloggingssiden funksjonen wptutsplus_login_logo () ?>
Dette gir meg linker som er i tråd med min logoen farger. Koblingsfarge er cyan og hoverfarge er magenta.
Merk: Siden min logos hovedfarge ligner på blå, fungerer det bra for koblinger. Du vil kanskje ikke endre fargen på koblingene hvis logoen din er en helt annen farge for å unngå brukervennlighet.
Det endelige elementet på skjermen er 'Logg inn' -knappen, som fortsatt er blå. La oss endre det. Rediger koden din slik at den lyder som følger:
// legge til en ny logo på innloggingssiden funksjonen wptutsplus_login_logo () ?>
Så jeg har nå en helt tilpasset påloggingsskjerm, noe som betyr at når kundene eller brukerne logger på, ser de noe som stemmer overens med merkevaren min og gjør nettstedet ser mer profesjonelt ut..
Tilpassing av WordPress-innloggingsskjermen er grei og kan gjøre stor forskjell for inntrykket nettstedet ditt gir til brukere og kunder som logger inn. Ved å tilpasse koden ovenfor for å dekke dine behov og reflektere ditt merke, kan du lage et meget profesjonelt påloggingsskjermbilde i svært lite tid.
