Inlogscherm WordPress aanpassen

Wat is een WordPress child theme en waarom moet je deze gebruiken?

In WordPress kun je gebruik maken van enorm veel gratis of betaalde themes. Soms is zo’n theme net niet helemaal zoals je het zou willen. Dan kun je de bestanden¬† (zoals de stylesheet) van het theme aanpassen. Maar zodra er een update beschikbaar komt voor het theme zouden al jouw wijzigen verloren gaan bij het updaten.

Door een child theme te gebruiken kun je voorkomen dat de wijzigingen die je hebt aangebracht verloren gaan bij een update van het theme.

Het child theme bestaat uit de volgende onderdelen:

  • Een map met daarin de volgende bestanden:
  • functions.php
  • style.css
  • screenshot

Hieronder leg ik uit hoe je zelf een child theme maakt

Het WordPress logo aanpassen in jouw eigen logo

N

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.

N

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

N

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:

N

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

N

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.

N

Stap 1

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

N

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

 

N

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

WP op maat gemaakt loginscherm

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

Spannend?

Ik kan me voorstellen dat je het spannend vindt om bovenstaande stappen te doorlopen wanneer je dit voor het eerst doet!

Wil je het liever aan mij overlaten? Neem dan contact met mij op:

info@dianabrandt.nl
06-15028063