Select Page

Hoe maakt u een op maat gemaakte loginpagina in WordPress?

Hoe maakt u een op maat gemaakte loginpagina in WordPress?

Geef het maar toe, de standaard login pagina op WordPress ziet er maar saai uit. Over de jaren heen is de WordPress loginpagina niet veel veranderd. Sinds de kleuren met het 3.8 versie donkerder werden, zou het logisch zijn om ook de achterliggende pagina’s hier aan aan te passen. Toch?

De meeste ontwerpers van sjablonen doen helemaal geen moeite om de login pagina te stylen omdat het ook helemaal niet nodig is. Het maakt ook geen deel uit van de algemene WordPress set up. Maar wanneer u een site bouwt voor een klant, en ondertussen dan uw stijl en merk verwaarloost, dan is dit toch wel een gemiste kans. De gebruikerservaring komt erdoor in gedrang wanneer er geen passende loginpagina voorhanden is.

Maar het is helemaal niet moeilijk om een aangepast thema te maken met een behulp van een beetje php of css. In deze tutorial zal ik u alvast uitleggen hoe u met een WPMU DEV sjabloon uw loginpagina kunt verfraaien.

Hier krijgt u een voorproefje van de tutorial:

final-login-page

Een WordPress loginpagina op maat maken!

Maak een map aan om de loginpagina bestanden te bewaren. Deze tutorial zal verschillende veranderingen aan loginsjablonen behandelen die ervoor kunnen zorgen dat u uw persoonlijke loginpagina kunt ontwerpen

  1. Voeg een aangepaste achtergrond toe
  2. Vervang het WordPress logo door een aangepast logo
  3. Pas het uitzicht van het loginformulier aan
  4. Verander de url van het loginlogo
  5. Verwijder de link naar het verloren paswoord
  6. Verberg de login foutboodschap
  7. Verwijder de loginpagina shake
  8. Verander de redirect url
  9. Stel de ‘mij onthouden’ in door dit aan te vinken

Zoals hierboven vermeld werd maakt de loginpagina geen deel uit van de WordPress sjabloon set-up. Als u ooit geprobeerd hebt om de loginpagina aan te passen, dan zult u waarschijnlijk al ontdekt hebben dat op dit pagina WordPress dus niet het sjabloon van je style sheet oplaadt.

Maar dat is niet zo erg, want in deze tutorial gaan we dus zelf een style sheet ontwerpen. Open een volgend txt.file en geef het de naam login-styles.css.

Om consequent te blijven, zullen we alle veranderingen die we maken, bewaren in de map van de huidige sjabloon. Ik stel voor dat we alle bestanden in een nieuwe login directory bewaren, waardoor alles op zijn plaats blijft.

Upload het nieuwe style sheet naar de nieuwe login directory, zodat alles op dezelfde plaats bewaard blijft.

We moeten WordPress wel vertellen om dit css bestand te uploaden dus is het nodig om het functions.php van het sjabloon te openen en de volgende code bij te voegen:

1

2

3

4

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 achtergrond op maat toe

We willen de donkere achtergrond van de site WPMU DEV benadrukken, en dat kan met een klein beetje CMS. Standaard voegt WordPress een .login klasse toe aan de body van de loginpagina, dus je kunt deze klasse toevoegen aan je eigen achtergrond.

Voeg de volgende code toe aan het login-style.css bestand.

body.login {

background: #021a2b;

}

De loginpagina ziet er nu zo uit:

login-background-color-

De loginpagina, nu met een achtergrond die lijkt op die van WPMU DEV. En het is gemakkelijk om een afbeelding te gebruiken in plaats van een egaal gekleurde achtergrond. U hoeft er alleen op te letten dat u voor een afbeelding kiest die goed staat op grote schermen. Het is ook een goed idee om de afbeelding te bewaren in de login directory en het daar te linken.

Vervang het WordPress logo met een aangepast logo

We zullen de standaard .login h1 a klasse toevoegen aan ons aangepast logo. Upload uw eigen logo naar de /login directory en houdt rekening mee de hoogte en de breedte.

Voeg dan deze code toe aan het style sheet:

.login h1 a {

background-image: url(‘../login/logo.png’);

background-size: 300px 72px;

width: 300px;

height: 72px;

}

Vervang de grootte, breedte en hoogte door de afmetingen van uw eigen logo en vergeet logo.png niet te vervangen door de bestandnaam van uw eigen logo.

De loginpagina ziet er nu zo uit:

login-custom-logo

Personaliseer uw WordPress loginpagina met een aangepast logo

Afhankelijk van de hoogte van je logo, zou u de padding kunnen aanpassen:

#login {

padding: 30px 0 0;

}

 

Bewerk de look van het login formulier

Het WPMU DEV mini formulier. Nu gaan we een beetje spelen met de look van het formulier, zodat het gaat lijken op het miniformulier van WPMU DEV. Het is gemakkelijk om het formulier te stylen door gebruik te makken van CSS. De CSS zal het formulier dermate transformeren zodat het op het WPMU DEV formulier gaat lijken, maar u kunt natuurlijk de CS zo aanpassen dat het qua gevoel en uitzicht op uw eigen site gaat lijken.

Eerst voegen we de stijl voor het formulier toe. Voeg deze CSS toe aan uw eigen 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;

}

 

 

Nu kunnen we de tekst een beetje donkerder maken:

.login label {

color: #333;

line-height: 26px;

}

 

 

Nu kunnen we het uitzicht van de buttons veranderen:

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

}

 

Alhoewel het over subtiele veranderingen gaat, passen ze beter bij de WPMU DEV site.

login-custom-form

Het loginformulier na de CSS styling

Verander de url voor het login logo. Standaard zal het logo linken naar wordpress.org. U kunt dit veranderen en verwijzen naar uw eigen site door de code toe te voegen naar het functions.php bestand.

1

2

3

4

5

6

7

8

9

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

 

U kunt de titel van de link naar eigen goeddunken veranderen.

Verwijder de link naar het vergeten paswoord

De link naar ‘verloren paswoord’ is nuttig nadat u uw paswoord verloren hebt, maar wanneer uw e-mail gehackt werd, dan zal de dader op zoek gaan naar uw WordPress paswoord om uw site over te nemen.

Om de link naar ‘verloren paswoord’ weg te halen is het nodig om dit fragmentje toe te voegen aan uw functions.php bestand.

1

2

3

4

5

function remove_lostpassword_text ( $text ) {

if ($text == ‘Lost your password?’){$text = ”;}

return $text;

}

add_filter( ‘gettext’, ‘remove_lostpassword_text’ );

De login errorboodschap verbergen

Wanneer u een onjuiste gebruikersnaam of paswoord invoert, dan geeft de loginpagina een foutboodschap weer die uitlegt dat ofwel uw gebruikersnaam ofwel uw paswoord verkeerd zijn.

Als software om paswoorden te kraken ofwel uw gebruikersnaam of uw paswoord goed kunnen raden, dan laat de foutboodschap zien welk stukje van de puzzel ze juist geraden hebben.

We kunnen een hook voor de loginpagina gebruiken om de foutboodschap weg te halen. U hoeft alleen de volgende code aan het functions.php bestand toe te voegen.

add_filter(‘login_errors’,create_function(‘$a’, “return null;”));

 

Verwijder de loginpagina shake

Wanneer u een paswoord of een gebruikersnaam verkeerd invoert, dan informeert de loginpagina de gebruiker.

Ik vind deze functie niet bepaald hinderlijk, maar sommige mensen ergeren er zich aan. Om de shake te verwijderen, kunt u dit fragment aan je functions.php bestand toevoegen:

1 function my_login_head() {

2 remove_action(‘login_head’, ‘wp_shake_js’, 12);

3 }

4 add_action(‘login_head’, ‘my_login_head’);

Verander de omleidings Url

Wanneer u inlogt in het backend van WordPress, dan wordt u onmiddellijk naar het dashboard geleid. U kunt dit gemakkelijk veranderen om gebruikers in de plaats daarvan naar uw homepagina te leiden.

Voeg de volgende code toe aan uw functions.php bestand zodat alle andere gebruikers behalve de admin omgeleid worden:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

 

Verander ‘onthou mij’ naar ‘aangevinkt’

Het vakje ‘onthou mij’ is standaard niet aangevinkt. Ik heb de gewoonte dit aan te vinken wanneer ik inlog, maar soms vergeet ik dat en ontdek ik de vergissing pas wanneer ik al ingelogd ben. Pffft!

Om de optie altijd aangevinkt te laten, kunt u dit stukje code naar de functions.php kopiëren

1

2

3

4

5

6

7

8

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

}

De samenvatting!

Dus dit is het. Mits een paar wijzigingen is het gemakkelijk om uw login pagina te personaliseren om ze te laten overeenkomen met het uitzicht en het gevoel van uw site.

Dus als er gebruikers zijn die regelmatig op uw site inloggen, dan is het de moeite waard om uw site daaraan aan te passen. Het is een andere mogelijkheid om uw site te verbinden met uw merk, en deze dienst laat altijd positieve een indruk na bij uw gebruikers.

Hebt u uw site aangepast? Laat eens horen wat u eraan gedaan hebt, en geef ons wat commentaar hieronder.

 

 

 

 

About The Author

Peter Kuipers

Peter is WordPress fanaat, Hosting en Linux specialist en uitgever van diverse online magazines. Daarnaast houd hij van Lekker eten, woont sinds kort in Oostende, en bezoekt regelmatig een WP Meetup.

Door de site te te blijven gebruiken, gaat u akkoord met het gebruik van cookies. meer informatie

Deze site gebruikt cookies om haar services te leveren, advertenties te personaliseren en verkeer te analyseren. Informatie over je gebruik van deze site wordt gedeeld met Google. Als je deze site gebruikt, ga je akkoord met het gebruik van cookies.

Sluiten