Customize de WordPress login pagina
Gepost op 9 februari 2010 om 14:00u, door hiranthi | geen reacties | reageren
loading...
Er zijn meerdere plugins beschikbaar om de login pagina van WordPress te customizen. Erg handig, maar minder grappig als je nog weleens van theme wil wisselen en ook telkens een bijpassende login-pagina wilt hebben. Daarom zet ik het benodigde gewoon in de map van mijn theme, als ik dan van theme wissel is het loginscherm ook meteen gewijzigd.
Klein beetje code
Om je login-pagina te customizen heb je maar een klein beetje code nodig:
<?php add_action('login_head', 'my_custom_login', 0); function my_custom_login() { echo '<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo('template_directory').'/css/login.css" />'; } // end my_custom_login ?>
Met bovenstaande code voeg je login.css aan de header van wp-login.php toe. In dat CSS bestand moet je de standaard CSS van WordPress overschrijven (helaas kun je de stylesheets die door WordPress zelf worden ingeladen niet gemakkelijk - zonder wp-login.php te bewerken - verwijderen).
Mijn CSS
html body { border-top:30px solid #efefef!important; background:#efefef url('../img/body_bg.jpg') 0 0 repeat-x; font-size:1em; line-height:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:normal; color:#000; } /* link - terug naar de site */ body.login p#backtoblog { position:absolute; margin:0; padding:0; top:0; left:0; width:75%; } body.login p#backtoblog a { color:#000; font-size:.8em; text-decoration:none; } body.login p#backtoblog a:hover { color:#000; text-decoration:underline; } /* logo */ body h1 { width:204px; height:52px; padding:0 0 20px; display:inline; display:block; margin:0 auto; overflow:hidden; } body h1 a { width:204px; height:52px; display:inline; display:block; float:left; background:url('../img/logo.gif') 0 0 no-repeat; text-decoration:none; text-indent:-9999px; } /* login div */ body #login { width:320px; margin:8.4em auto 0; } /* form */ body form { margin-left:8px; padding:16px; font-weight:normal; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:#fff; -moz-box-shadow:none; -khtml-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } body form label { color:#000; font-size:1em; font-weight:bold; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-transform:lowercase; padding:0 0 0 5px; } body form input { color:#000; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } body #login form p { margin-bottom:0; } body form p { margin-bottom:24px; } body form #user_pass, body form #user_login, body form #user_email { font-size:1em; width:97%; padding:3px; margin-top:2px; margin-right:6px; margin-bottom:16px; border:1px solid #000; background:#fff; } body form #user_pass:focus, body form #user_login:focus, body form #user_email:focus { outline-color:#bdd73c; } /* submit button */ body form .button-primary { padding:5px 10px; font-size:.9em; border:none; background:#000 none; color:#fff; font-weight:bold; text-transform:lowercase; cursor:pointer; text-decoration:none; margin-top:-5px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } body form .button-primary:hover { background-color:#bdd73c; color:#000; text-shadow:none; } /* checkbox - gegevens onthouden */ body form .forgetmenot { font-weight:normal; float:left; margin-bottom:0; } body form .forgetmenot label { font-weight:normal; padding:0; font-size:.7em; line-height:.7em; } body form .forgetmenot label input#rememberme { margin:0 2px 0 0; display:inline-block; } body form .submit, body .alignright { float:right; } /* error | message */ body #login_error, body .message { margin:0 0 16px 8px; border:1px solid; padding:12px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} /* ww vergeten link etc. */ body.login p#nav { margin:0 0 0 8px; padding:16px; } body.login p#nav a { color:#000!important; font-size:.8em; text-decoration:none; text-shadow:none; } body.login p#nav a:hover { color:#09c!important; text-decoration:underline; }
Extra code
Om je login-pagina nog wat meer te customizen kun je de volgende snippets ook toevoegen. De eerste zorgt ervoor dat de URL waarnaar het logo linkt wordt verandert naar de URL van je WP-site:
<?php add_filter('login_headerurl', 'change_wp_login_url'); function change_wp_login_url() { return get_bloginfo('url'); } // end change_wp_login_url ?>
De volgende snippet zorgt ervoor dat de title van de link (van het logo) wordt gewijzigd naar de titel en tagline van je WP-site:
<?php add_filter('login_headertitle', 'change_wp_login_title'); function change_wp_login_title() { return get_bloginfo('title').' - '.get_bloginfo('description'); } // end change_wp_login_title ?>
Mijn custom login
De custom login van illutic WebDesign ziet er zo uit:











