Share
Het WordPress inlogscherm is goed ontworpen - het is schoon en eenvoudig om mee te werken en het werkt goed op alle schermformaten. Maar wat als u een site aan het bouwen bent voor een klant die zijn eigen logo wil laten zien aan gebruikers die inloggen? Of als u een MultiSite-installatie hebt en wilt dat uw gebruikers uw branding zien wanneer ze inloggen? Gelukkig kun je de manier aanpassen waarop het inlogscherm vrij eenvoudig wordt weergegeven.
Voor deze zelfstudie heb ik een plug-in gemaakt om dit te doen; het voordeel van het gebruik van een plug-in is dat je het in elke WordPress-site die je ontwikkelt kunt laten vallen en ze meteen wat branding kunt geven.
De stappen die ik in deze tutorial ga demonstreren zijn:
Om deze tutorial te voltooien, hebt u nodig:
Bovenaan mijn plug-in voeg ik de volgende regels toe:
/ * Naam van de plug-in: WPTutsPlus De Admin Deel 1 - Aanmeldingsscherm plug-in URI aanpassen: http://rachelmccollin.co.uk Beschrijving: Deze plug-in ondersteunt de zelfstudie in wptutsplus. Het past het WordPress inlogscherm aan. Versie: 1.0 Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.com Licentie: GPLv2 * /
Het is gemakkelijk om het logo van uzelf of van uw klant toe te voegen aan de inlogpagina en uw WordPress-installatie meteen professioneler te maken.
Accentsconagua
login_enqueue_scripts actie haak:// voeg een nieuw logo toe aan de inlogpagina-functie wptutsplus_login_logo () ?>
Hiermee wordt uw logo toegevoegd aan het inlogscherm, zoals getoond in de schermafbeelding.
Naast het toevoegen van een logo kun je het ook verkleinen zodat het past en stijl toevoegen voor andere elementen in het scherm.
Het bovenstaande logo is enigszins geplet om te passen in de standaardruimte die ervoor is opgegeven. Ik ga de dimensionering aanpassen.
Bewerk de code in uw plug-in zodat deze als volgt luidt:
// voeg een nieuw logo toe aan de inlogpagina-functie wptutsplus_login_logo () ?>
De hoogte die u gebruikt, is afhankelijk van de beeldverhouding van uw logo. Gebruik makend van 300px en auto voor de background-size eigenschap zorgt ervoor dat uw logo even breed is als de inlogbox en dat de beeldverhouding behouden blijft, en de hoogte waarde biedt voldoende ruimte voor uw logo om in te passen.
Nu ziet mijn logo er zo uit:
Veel beter! Maar het formaat van het logo is niet het enige dat ik kan doen met betrekking tot styling. Hoe zit het met het veranderen van sommige kleuren?
Alle tekst die wordt weergegeven op de aanmeldingspagina heeft de vorm van koppelingen, dus het zijn koppelingen die u moet stylen. Bewerk uw code opnieuw, zodat deze als volgt luidt:
// voeg een nieuw logo toe aan de inlogpagina-functie wptutsplus_login_logo () ?>
Dit geeft me links die in overeenstemming zijn met mijn logo-kleuren. De koppelingskleur is cyaan en de zweefkleur is magenta.
Opmerking: aangezien de hoofdkleur van mijn logo lijkt op blauw, werkt deze goed voor koppelingen. U wilt misschien niet de kleur van uw links wijzigen als uw logo een heel andere kleur heeft, om gebruiksproblemen te voorkomen.
Het laatste element op het scherm is de knop 'Inloggen', die nog steeds blauw is. Laten we dat veranderen. Bewerk uw code zodat deze als volgt luidt:
// voeg een nieuw logo toe aan de inlogpagina-functie wptutsplus_login_logo () ?>
Dus nu heb ik een volledig aangepast inlogscherm, wat betekent dat wanneer mijn klanten of gebruikers inloggen, ze iets zien dat consistent is met mijn merk en de site professioneler maakt.
Het aanpassen van het WordPress inlogscherm is eenvoudig en kan een groot verschil maken voor de indruk die uw site geeft aan gebruikers en klanten die inloggen. Door bovenstaande code aan te passen aan uw behoeften en uw merk weer te geven, kunt u een zeer professioneel inlogscherm creëren in heel weinig tijd.
