De standaard loginpagina van WordPress kan wel wat kleur en een nieuw lettertype gebruiken! Natuurlijk is het niet écht nodig om een leuke inlogpagina te hebben, maar het is wel heel erg leuk. Ook kan een stijlvolle inlogpagina helpen als je een professionele pagina voor iemand maakt. Een eerste indruk maakt wel degelijk verschil!

Met wat hulp van CSS en PHP, programma’s waarmee je de opmaak van pagina’s kunt aanpassen, kun je in een handomdraai je eigen inlogpagina opfleuren. In deze handleiding zal ik jullie uitleggen hoe dat moet. Hierbij gebruik ik een WPMU DEV voorbeeld.

 

Deze handleiding bevat verschillende aanpassingen op thema’s die ervoor zullen zorgen dat je een eigen persoonlijke inlogpagina krijgt:

• Voeg een persoonlijke achtergrond toe
• Vervang het WordPress logo met een eigen logo
• Verander de uitstraling van de inlogpagina
• Verander de URL van het inlog logo
• Verwijder de ‘lost password’ link
• Verberg de ‘error message’ bij verkeerde inloggegevens
• Verwijder het schudden van het beeld bij verkeerde inloggegevens
• Verander de ‘redirect’ URL
• Stel ‘remember me’ zo in dat hij altijd aangevinkt is

De inlogpagina is geen deel van de WordPress thema’s. Je kunt de inlogpagina dus niet veranderen met opties die WordPress geeft. Hoe het wel moet wordt hieronder uitgelegd.
Open een .txt bestand, dit kan bijvoorbeeld kladblok (wordpad) zijn, maar je kunt ook een wordbestand opslaan als .txt door bij ‘opslaan als’ te kiezen voor ’tekst zonder opmaak’. Noem dit bestand login-style.css.

Zodat alles overzichtelijk blijft voegen we alle veranderingen die we doorvoeren toe aan één map. Het is aan te raden hiervoor een nieuwe map te gebruiken zoals in onderstaande afbeelding.

Je ‘login-style.css’ kun je nu toevoegen aan de ‘login’ map.
WordPress moet nu dit CSS bestand kunnen laden. Open je functions.php file in je thema’s /wp-content/themes/your_theme_name/functions.php .
Voer de volgende code in:

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
}
add_action('login_head', 'custom_login_css');

Voeg een persoonlijke achtergrond toe

We gaan de donkerblauwe achtergrond, zoals in het beginplaatje, toevoegen. Dit kunnen we doen met een eenvoudig regeltje CSS. Het volgende moet worden ingevuld in het login-style.css bestand dat je eerder hebt gemaakt:

body.login {
background: #021a2b;
}

Nu ziet de pagina er zo uit:

Dit kan niet alleen met kleurcode’s, maar ook met afbeeldingen . Zorg er dan wel voor dat de afbeelding een goede kwaliteit heeft zodat hij er ook op een groot scherm goed uit ziet.

Vervang het WordPress logo met een eigen logo

We gebruiken de standaard .login h1 a  om ons eigen logo aan toe te voegen. Upload je eigen logo in de /login map, en zorg dat je de hoogte en breedte weet. Voeg dan de volgende code toe aan de style sheet:

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

Verander de afmetingen van de achtergrond naar de dimensies van jouw logie, en vergeet niet logo.png te veranderen naar de naam van je persoonlijke logo.
Misschien wil je ook nog aanpassen hoe scherp of wazig de randen van de letters zijn. Dat kun je zo doen:

#login {
padding: 30px 0 0;
}

Verander de uitstraling van de inlogpagina

Hier kun je zelf een beetje met CSS spelen. Het eerste wat we aanpassen is de algemene stijl.
Voeg de volgende regels CSS toe aan je login-styles.css bestand:

.login form {
margin-left:auto;
margin-right:auto;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
background-clip: padding-box;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}

Om de tekst wat donkerder te maken voegen we vervolgens dit toe:

login label {
color: #333;
line-height: 26px;
}

Nu passen we ook nog de inlogknop aan:

.login .button-primary {
width: 120px;
float:right;
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 1px 0;
color: #849db0;
}

.login .button-primary:hover {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

.login .button-primary:active {
background-color:#083353 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0b436e), to(#083353));
background: -webkit-linear-gradient(top, #0b436e, #083353);
background: -moz-linear-gradient(top, #0b436e, #083353);
background: -ms-linear-gradient(top, #0b436e, #083353);
background: -o-linear-gradient(top, #0b436e, #083353);
background-image: -ms-linear-gradient(top, #0b436e 0%, #083353 100%);
text-shadow: #333333 0 -1px 0;
color: #fff;
}

Het zijn misschien subtiele verschillen, maar de inlogpagina ziet er nu toch een heel stuk beter uit!

 

Verander de URL van het inlog logo

Standaard is het logo een link naar wordpress.org. Dit kun je aanpassen naar een site van jouw keuze door deze code toe te voegen aan je functions.php bestand:

 

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

 

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

De titel van de link kun je naar wens aanpassen.

Verwijder de ‘lost password’ link

De lost your password?  link is ontzettend handig wanneer je je wachtwoord kwijtraakt, maar als iemand je e-mailadres heeft gehackt kunnen ze zo je hele WordPress site overnemen. Wil je deze link dus verwijderen, voeg deze code toe aan je functions.php bestand:

function remove_lostpassword_text ( $text ) {
if ($text == 'Lost your password?'){$text = '';}
return $text;
}
add_filter( 'gettext', 'remove_lostpassword_text' );

Verberg de ‘error message’ bij verkeerde inloggegevens

Als je een verkeerde gebruikersnaam of een verkeerd wachtwoord invoert, krijg je een foutmelding die zegt dat ofwel je gebruikersnaam ofwel je wachtwoord verkeerd is.

Om deze foutmelding te verwijderen voeg je deze code toe aan je functions.php bestand:

add_filter('login_errors',create_function('$a', "return null;"));

Verwijder het schudden van het beeld bij verkeerde inloggegevens

Als je een verkeerde gebruikersnaam of een verkeerd wachtwoord invoert, schud het beeld om de gebruiker bewust te maken van de fout. Sommige mensen vinden dit erg irritant.
Om het schudden te verwijderen voeg je de volgende code toe aan je functions.php bestand:

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

Verander de ‘redirect’ URL

Wanneer je bij WordPress inlogt wordt je meteen naar het dashboard gebracht. Deze redirect kun je zo aanpassen dat hij je ergens anders heen verwijst. Op de volgende manier worden alle gebruikers doorverwezen naar de homepage.
Voeg deze code toe aan je functions.php bestand:

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);

Stel ‘remember me’ zo in dat hij altijd aangevinkt is

De ‘onthoud mij’ functie is standaard niet aangevinkt.  Om dit aan te passen naar een ‘remember me’ functie die wél altijd is aangevinkt voer je de volgende code toe aan je functions.php bestand:

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "";
}

Samengevat

Met wat eenvoudige aanpassingen ziet je inlogpagina er al heel anders uit en pas hij echt bij je! Als er regelmatig mensen jouw pagina bezoeken is het zeker de moeite waard om te zorgen dat je inlogpagina er goed uit ziet.
Voor meer informatie kun je kijken op de site van Paul Underwood: http://www.paulund.co.uk/customise-wordpress-login-page

De Engelse versie van deze handleiding en commentaar door gebruikers is hier te vinden http://premium.wpmudev.org/blog/create-a-custom-wordpress-login-page/

Veel succes met het personaliseren van jouw inlogpagina!