Inlogpagina logo WordPress aanpassen? Hoe doe ik dat?

Standaard krijg je het WordPress logo te zien op je WordPress inlogpagina. Hoe leuk zou het zijn als je dit kunt aanpassen naar je eigen logo? Je logo van je bedrijf!

Het is niet moeilijk om het WordPress logo te veranderen naar een ander logo op de inlogpagina. Je kunt gebruik maken van een plugin of je kunt een eenvoudige CSS code toevoegen aan je style.css bestand.

Laten we beginnen met de makkelijkste methode. Gebruik maken van de Uber login plugin.

Uber login plugin downloaden en activeren

Natuurlijk moet je eerst de plugin downloaden en activeren voordat je gebruik kunt maken van de plugin.

• Login op je WordPress website
• Ga naar: Plugins > Nieuwe plugin
• Zoek naar: Uber login
• Klik op: Nu installeren
• Activeer de plugin

Logo uploaden naar je media

Om het logo op je inlogpagina aan te kunnen passen moet je natuurlijk wel een nieuw logo toevoegen aan je website.

Het belangrijkste van het logo is dat deze voldoet aan de juiste afmetingen. Het logo moet 300 px breed zijn en 72 px hoog.

Als je het logo hebt toegevoegd aan je media dan kun je het logo koppelen aan je inlogpagina.

Ga naar: Instellingen > Selecteer Uber login.

Hier kun je eenvoudig het logo uploaden zonder dat je gebruik hoeft te maken van PHP of CSS kennis.

Nadat je het logo hebt toegevoegd is het belangrijk dat je de instellingen opslaat.

Logo inlogpagina aanpassen met CSS

Je kunt er ook voor kiezen om het logo aan te passen zonder dat je een plugin hoeft te installeren.

Plugins kunnen er namelijk voor zorgen dat je website trager wordt. Natuurlijk verschilt het per plugin of je website trager wordt.

In dit geval willen we je ook de mogelijkheid geven om middels CSS de loginpagina van je WordPress website aan te passen.

Om het logo aan te passen moet je een code toevoegen aan je style.css bestand. Belangrijk is dat je gebruik maakt van een child thema. Maak je namelijk geen gebruik van een child thema, dan ben je namelijk na het updaten van je thema je veranderde inlogpagina weer kwijt.

Het style.css bestand vind je terug via: Weergave > Editor.

.login h1 a {
background-image: url('logourl.png');
background-size: 300px 72px;
width: 300px;
height: 72px;
}

Hierboven zie je de CSS code die je meot toevoegen aan je style bestand.

De background URL moet je aanpassen naar de URL naar je logo. Het is dus belangrijk dat je jou logo hebt geupload naar je media en vervolgens de URL kopieert en deze plaatst achter de background-image.

Vervolgens klik je op Wijzingen opslaan.

Is het gelukt om je logo op je inlogpagina aan te passen? Laat hieronder een reactie achter als je nog vragen hebt over het aanpassen van je inlogpagina.