Inlogpagina Wordpress aanpassen

Inlogpagina van WordPress aanpassen

Het ziet er professioneel uit als je eigen logo bovenaan de inlogpagina van WordPress staat, hoe doe je dat? Lees hieronder verder. Gebruik onderstaande stappen om de afbeelding van de inlogpagina aan te passen:

  • maak in de templatemap een map “images” en plaats hierin je logo
  • noem het bestand “site-login-logo.png” met de afmetingen van 80×80 pixels

Plaats onderstaande code onderin het “functions.php” bestand van je template.

function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
height:80px;
width:80px;
background-size: 80px 80px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Pas de “padding-bottom” naar wens aan, om de ruimte tussen het logo en het formulier aan te passen.




Je kan ieder Html element op de inlogpagina aanpassen met Css, door bovenstaande functie te gebruiken. Er wordt een “embedded stylesheet” geplaatst in de “head” van de pagina, bekijk het bronbestand van de inlogpagina maar eens.
Als je nu op het logo klikt dan opent de Nederlandse website van WordPress, om dit aan te passen plaats je onderstaande code onderin het “functions.php” bestand van je template.

function my_login_logo_url() {
return home_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' );

Nu opent je eigen website na het klikken op het logo.

Inlogpagina aanpassen met apart bestand

Als je veel aanpassingen wilt doen aan de loginpagina, kan je beter een apart stijlblad maken. Noem dit bestand “style-login.css” en plaats het in je templatemap. Voeg onderstaande code toe onderin het “functions.php” bestand van je template om het stijlblad te laden voor je inlogpagina.

function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Zo kan je eenvoudig als voorbeeld de achtergrondkleur van de loginpagina aanpassen door onderstaande code in het “style-login.css” bestand te zetten.

body.login {background-color: #cccccc;}

De achtergrondkleur is nu licht grijs.

Hieronder vindt je een overzicht met de CSS selectors van de loginpagina.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Bron: codex.wordpress.org


0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *