WordPress inlogpagina aanpassen aan de stijl van de website

Je WordPress inlogpagina aanpassen aan de stijl van je website of aan je merk is makkelijker dan je denkt. De standaard inlogpagina van WorPress is ietwat saai en heeft het bekende logo. In dit artikel laat ik je zien hoe je met een paar wijzigingen de inlogpagina kunt aanpassen aan de stijl van je website of merk.

Er zijn meerdere manieren om je inlogpagina te wijzigen, er zijn een aantal handige plugins die het veranderen van je inlogpagina eenvoudig maken. Een aantal van deze plugins zijn:

Custom Login
Custom Login Form
Login
Theme My Login

Je kan natuurlijk ook zelf een plugin voor dit doel maken maar daar zal ik later een ander artikel aan wijdden. In dit artikel gaan we op een andere manier de WordPress inlogpagina wijzigen.

Je WordPress inlogpagina Aanpassen

Omdat de inlogpagina nogal is ingebakken in WordPress is het belangrijk om een child thema te hebben zodat we ongestoord wijzigingen kunnen aanbrengen in bijvoorbeeld het functions.php bestand. Voor dit artikel gebruik ik weer het Twenty Sixteen child thema dat ik eerder gemaakt heb.

Wat gaan we allemaal aanpassen?

We gaan de volgende onderdelen van de thema bestanden aanpassen:

1 We gaan de achtergrond aanpassen,
2 Het WordPress logo vervangen voor een eigen logo,
3 Het uiterlijk van de inlogpagina veranderen,
4 De url van het inlog logo aanpassen,
5 Het wachtwoord vergeten link verwijderen,
6 De terug naar link gaan we verwijderen,
7 De fout bij inloggen melding aanpassen,
8 Het schudden bij fout inloggen gaan we verwijderen,
9 De redirect url gaan we wijzigen,
10 Het gegevens onthouden vlakje standaard aangevinkt houden.

We gaan als volgt te werk

Maak in je huidige map van je child thema een nieuwe map en noem die “login”. In deze map maak je een nieuw bestand aan die noem je “custom-login-styles.css”. Nu moeten we WordPress laten weten dat dit CSS bestand geopend moet worden. Dit doen we door in het functions.php bestand het volgende stukje code toe te voegen:

function my_custom_login() {

echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';

}

add_action('login_head', 'my_custom_login');

De achtergrond wijzigen

Ik heb een mooie achtergrond uitgekozen en die ga ik nu aan de WordPress inlogpagina toevoegen. Ik doe dit door de volgende code toe te voegen aan het custom-login-styles.css bestand:

.login {

  background-image: url(' img/wordpress_achtergrond.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: center;

}

Zoals je kunt zien heb ik in mijn child thema een speciale map voor afbeeldingen met de naam img gemaakt. De inlogpagina ziet er nu zo uit:

Het WordPress logo wijzigen

We hebben nu de achtergrond gewijzigd en in hetzelfde bestand gaan we nu het WordPress logo veranderen. We plaatsen het logo in de “img” map.

.login h1 a {

  background-image: url('img/login-logo.png');

}

Het resultaat ziet er nu als volgt uit:

Het uiterlijk van het inlogformulier wijzigen

We gaan nu het uiterlijk van het inlogformulier wat aanpassen. De onderstaande code is een voorbeeld maar je kunt het helemaal aan de stijl van je eigen website aanpassen.

.login label {

  font-size: 12px;

  color: #ff1a1a;

}



.login input[type="text"]{

  background-color: #e6faff;

  border-color:#006680;

  -webkit-border-radius: 4px;

}



.login input[type="password"]{

  background-color: #e6faff;

  border-color:#006680;

  -webkit-border-radius: 4px;

}

We hebben nu de kleur van de tekst veranderd en de invoervelden van de gebruikersnaam en het wachtwoord hebben een andere kleur en de hoeken zijn nu wat ronder. Nu ga ik de inlogknop een andere kleur geven.

.login .button-primary {

  width: 120px;

  float:right;

  background-color: #e600e6;

  background: -webkit-gradient(linear, left top, left bottom, from(#e600e6), to(#ff00ff));

  background: -webkit-linear-gradient(top, #e600e6, #ff00ff);

  background: -moz-linear-gradient(top, #e600e6, #ff00ff);

  background: -ms-linear-gradient(top, #e600e6, #ff00ff);

  background: -o-linear-gradient(top, #e600e6, #ff00ff);

  background-image: -ms-linear-gradient(top, #ff80ff 0%, #e600e6 100%);

  color: #fff;

  -webkit-border-radius: 4px;

  border: 1px solid #e600e6;

}



.login .button-primary:hover {

  background-color:#ff33ff;

  background: -webkit-linear-gradient(top, #ff33ff, #ffccff );

  background: -moz-linear-gradient(top, #ff33ff, #ffccff );

  background: -ms-linear-gradient(top, #ff33ff, #ffccff );

  background: -o-linear-gradient(top, #ff33ff, #ffccff );

  background-image: -ms-linear-gradient(top, #990099 0%, #ffccff 100%);

  color: #fff;

  -webkit-border-radius: 4px;

  border: 1px solid #ffccff ;

}



.login .button-primary:active {

  background-color:#ffccff;

  background: -webkit-gradient(linear, left top, left bottom, from(#ffccff), to(#ff33ff));

  background: -webkit-linear-gradient(top, #ffccff, #ff33ff);

  background: -moz-linear-gradient(top, #ffccff, #ff33ff);

  background: -ms-linear-gradient(top, #ffccff, #ff33ff);

  background: -o-linear-gradient(top, #ffccff, #ff33ff);

  background-image: -ms-linear-gradient(top, #ffccff 0%, #ff33ff 100%);

  color: #fff;

  -webkit-border-radius: 4px;

  border: 1px solid #ffccff ;

}

En dat is dit het resultaat:

Let niet op de kleuren die ik heb gebruikt het dient alleen maar ter illustratie om duidelijk te maken hoe je het uiterlijk aan kan passen. Je kan zelf de kleuren naar de stijl van je eigen website aanpassen.

De url van het logo veranderen

Standaard is het logo op de inlogpagina gelinkt naar de website van wordpress.org. Maar dat willen we natuurlijk niet. Daarom gaan we de url van het logo wijzigen. Dit doen we door het volgende aan het functions.php toe te voegen.

function my_login_logo_url() {

return get_bloginfo( 'url' );

}

add_filter( 'login_headerurl', 'my_login_logo_url' );



function my_login_logo_url_title() {

return 'Jouw website naam en informatie';

}

add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Je zal zien als je op het logo klikt je naar de homepagina van je website wordt geleid.

Nog wat meer regels om toe te voegen

Ik ga nu kort nog wat regels laten zien, hiermee ga je nog meer je WordPress inlogpagina wijzigen.

Wachtwoord vergeten link verwijderen

Door de onderstaande regels aan het custom-login-styles.css bestand toe te voegen verwijder je de wachtwoord vergeten link van de inlogpagina

#nav {

  display: none;

}

Verwijder de “terug naar” link

Voeg de volgende regels toe om de “terug naar” link te verwijderen.

#backtoblog {

  display: none;

}

Fout inloggen bericht wijzigen

Wanneer er fout wordt ingelogd geeft WordPress standaard weer wat er fout is de gebruikersnaam of het wachtwoord dit maakt het voor hackers makkelijker om je website te hacken. Om het hackers wat moeilijker te maken gaan we  de melding die WordPress geeft wijzigen. Doen we door de volgende regels aan het functions.php bestand toe te voegen:

function login_error_override()

{

    return 'Foute inloggegevens.';

}

add_filter('login_errors', 'login_error_override');

Het schudden van de pagina verwijderen

Als er fout wordt ingelogd gaat de inlogpagina schudden. Persoonlijk vind ik dat nogal irritant. Met de volgende regels in het functions.php verwijderen we het schudden:

function my_login_head() {

remove_action('login_head', 'wp_shake_js', 12);

}

add_action('login_head', 'my_login_head');

Redirect url veranderen

Als je inlogt op WordPress wordt iedereen naar het dashboard geleid. Met de volgende code in functions.php gaat iedereen na het inloggen, behalve de beheerder, naar de homepagina van de website:

function admin_login_redirect( $redirect_to, $request, $user )

{

global $user;

if( isset( $user->roles ) && is_array( $user->roles ) ) {

if( in_array( "administrator", $user->roles ) ) {

return $redirect_to;

} else {

return home_url();

}

}

else

{

return $redirect_to;

}

}

add_filter("login_redirect", "admin_login_redirect", 10, 3);

Gegevens onthouden standaard aanvinken

Door het volgende stukje code aan het functions.php toe te voegen is het gegevens onthouden vlakje standaard aangevinkt:

function login_checked_remember_me() {

add_filter( 'login_footer', 'rememberme_checked' );

}

add_action( 'init', 'login_checked_remember_me' );



function rememberme_checked() {

echo "<script>document.getElementById('rememberme').checked = true;</script>";

}

Het uiteindelijke resultaat zie je op de onderstaande afbeelding

Zoals je ziet kun je met een paar eenvoudige aanpassingen je je WordPress inlogpagina kan wijzigen. Het lijkt misschien niet belangrijk en veel webdesigners negeren de inlogpagina. Maar voor een klant is het wel belangrijk als de inlogpagina past bij zijn merk en de rest van de website.

Geef een reactie