Aangepast inlogscherm voor WordPress

Een eigen logo en aangepaste links op de inlogpagina staat beter en mooier dan het bijgeleverde WordPress inlogscherm. Het staat beschreven op de sites van Pro Blog Design en Alue Anvil.
Hieronder stap voor stap uitgeschreven en gecombineerd.

Voeg action toe aan functions.php

function custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
} 
add_action('login_head', 'custom_login');

Maak een apart stylesheet voor de login-pagina

Bijvoorbeeld dus /custom-login/custom-login.css en definieer hierin de css, bijvoorbeeld

/* Custom Login Styles */
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

/* Page background. Can't use the body tag for this! */
h1 a {
  /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
  background:url(../images/pbd-title.png) 0 0 no-repeat;
  width:415px;
  height:70px;
} 

body.login {border-top-color:#dff4fc;}	/* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;}	/* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */

Aanpassen WordPress logo

Het logo linkt standaard naar WordPress.org. Beide kun je in functions.php aanpassen met:

function custom_loginpage_logo_link( $url ) {
 // Return a url; in this case the homepage url of wordpress
 return get_bloginfo( 'url' );
}
add_filter( "login_headerurl","custom_loginpage_logo_link" );

function custom_loginpage_logo_title( $message ) {
 // Return title text for the logo to replace 'wordpress'; in this case, the blog name.
 return get_bloginfo( 'name' );
}
add_filter( "login_headertitle","custom_loginpage_logo_title" );

Pas het logo zelf aan in het custom-login.css

#login h1 a {
          background:url(../images/logo.jpg) no-repeat top;
     }

And you’re done…

Voorbeelden

custom inlogscherm 1

custom inlogscherm

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

5 thoughts on “Aangepast inlogscherm voor WordPress”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s