[Top] 101 Inlogscherm WordPress aanpassen – Diana Brandt

Inlogscherm WordPress aanpassen

Inlogscherm WordPress

Het standaard inlogscherm van WordPress bestaat uit het WordPress logo met daaronder de inlogvelden.
Dit scherm kun je aanpassen. Je kunt bijvoorbeeld een ander logo laten zien of de kleuren van het inlogscherm aanpassen.
Hieronder leg ik uit hoe je dat doet.

Het WordPress logo aanpassen in jouw eigen logo

Stap 1

Zorg dat je met een childtheme werkt. Plaats nu een nieuwe map in de map van het hoofdtheme van je childtheme. Noem deze: loginpagina.

Stap 2

Plaats een logo in deze nieuwe map. Zorg ervoor dat de afbeelding vierkant is (ongeveer 84 x 84 px) . Wanneer de achtergrond van de afbeelding transparant is kun je hem op elk gewenste kleur achtergrond plaatsen

Stap 3

Plaats nu aan het einde van het functions.php bestand van je childtheme onderstaande code (pas logo.png aan in de naam van jouw logo bestand).
(Zorg ervoor dat je een kopie hebt gemaakt van functions.php zodat je deze terug kunt plaatsen mocht je een foutje maken.)
/* Custom logo */
function new_logo() {
echo ‘<style type=”text/css”>
h1 a {
background-image: url(‘.get_bloginfo(‘template_directory’). ‘/loginpagina/logo.png) !important;
} </style>’;
}
add_action(‘login_head’, ‘new_logo’);

De url en title tag van het logo aanpassen

Standaard wijst het logo naar http://wordpress.org. Ook dit kun je aanpassen:

Stap 1

Plaats onderstaande code onderaan het functions.php bestand:

/* Custom url */
function new_loginURL() {
return ‘http://www.andereurl.nl’;
}
add_filter(‘login_headerurl’, ‘new_loginURL’);

Stap 2

Om de title tag aan te passen plaats je deze code in functions.php:

/* Custom logintext */
function new_loginURLtext() {
return ‘Plaats hier de nieuwe tekst;
}
add_filter(‘login_headertitle’, ‘new_loginURLtext’);

Uiterlijk van het loginscherm aanpassen

Om de kleuren en lettertypen van het loginscherm aan te passen moet je een nieuw css bestand toevoegen aan de loginpagina map die je eerder hebt gemaakt.

Stap 1

Voeg een stylsheet bestand toe aan de map “loginpagina”. Noem het css bestand: login_styles.css

Stap 2

Voeg nieuwe css toe aan de stylesheet.
In de WordPress codex vind je een lijst met CSS operators die je kunt gebruiken.

Hieronder vind je een aantal voorbeelden:
/* Pas achtergrond kleur en lettertype aan */
body {
background: #ffffff;
font-family: Arial,Verdana,sans-serif;
}

/* Verander hoogte en breedte van het logo + voeg nieuw logo toe */
.login h1 a {
background-image: url(logo.png);
width: 300px;
height: 150px;
background-size: 300px 150px;
}

/* Verander kleur van de knop */
.wp-core-ui .button-primary {
background: #ccc;
}

/* Verander kleur van de links onderaan het inlogscherm */
.login #nav a,
.login #backtoblog a {
text-decoration: none;
color: #333;
}

Stap 3

Roep de stylsheet aan. Voeg onderstaande code toe aan het functions.php bestand.

/* Custom login CSS */
function custom_login_css() {
wp_enqueue_style( ‘custom-login’, get_bloginfo(‘template_directory’) . ‘/loginpagina/login_styles.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘custom_login_css’ );

Gefeliciteerd! Je hebt je eigen op maat gemaakte WordPress loginscherm!

Spannend?

Vind je het spannend om bovenstaande stappen zelf te doorlopen?
Ik kan ze ook uitvoeren voor je! Neem dan contact met mij op:

info@dianabrandt.nl
06-15028063