WordPress - Thema Styling

Iedereen kent wel dat standaard login-scherm van WordPress. U heeft dan een persoonlijke website, maar dat login-scherm past simpel weg niet bij uw stijl. Het zou dus veel mooier zijn als dat scherm aangepast zou zijn aan de stijl van uw website.

Dat kan, er zijn vele plugins voor te krijgen. Maar zoals iedere toevoeging of aanpassing door middel van een extra plugin wordt uw website trager en is de kans op storingen groter. De plugin moet maar net overweg kunnen met de andere plugins of uw thema. Tevens bent u dan afhankelijk van de updates van de plugin-ontwikkelaar, heeft die er geen zin meer in; zit u met een oud stukje software op uw website.

Zelf doen is niet echt moeilijk, indien u de volgende stappen volgt.

Voor & Na:

Aangepaste CSS en Extra Functions

Om een vergelijkend resultaat te bereiken als in de afbeelding hiervoor gaan we extra css codes toevoegen aan het thema om de styling van het inlogscherm aan te passen. We dienen tevens een aantal extra code snippets aan het functions.php bestand toe te voegen om de gebruikte links en teksten in het standaard login-scherm van WordPress aan te passen.

Het is raadzaam om dit altijd in het Child-Theme van uw thema te doen.

Extra CSS Bestand

De CSS stijl codes die we gaan gebruiken zetten we in een extra stijl-bestand en plaatsen dat bestand in een map “login” in het Child-theme.

In diezelfde map plaatsen we ook de afbeeldingen als het logo en de gebruikte achtergrond.

Dat CSS bestand geven we de naam: “custom-login.css”

Om nu aan het thema en WordPress duidelijk te maken dat we van dat bestand gebruik willen maken dienen we de volgende code toe te voegen aan het bestand functions.php:

/* Custom Login CSS */
function customized_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login.css" />';
}
add_action('login_head', 'customized_login');

Login Venster

Om het gehele inlog-blok eenzelfde kleur te geven (in ons voorbeeld wit) met afgeronde hoeken dienen we het volgende stukje code toe te voegen aan de custom-login.css:

/* Login Venster volledig */ 
#login {
    width: 350px;
    padding: 20px 0 0;
    margin: 100px auto;
    background: white;
    border: 2px solid #2d5c88;
    border-radius: 10px;
}

Wit met afgeronde hoeken

We hebben hier de breedte (width) en marges ingesteld naar verhouding van het door ons gebruikte logo. Die kunt u dan naar wens aanpassen nadat het logo is toegevoegd.

De regel “padding 20px 0 0;” zorgt voor een extra wit-ruimte van 20 pixels gezien vanaf de bovenkant met rechts, onder en linkt geen wit-ruimte.

Via de regel “margin: 100px auto” vertellen we dat het venster aan de boven- en onderkant een marge krijgt van 100px t.o.v. van het computerscherm (tablet of mobiel). Met ‘auto’ geven we aan dat het venster gecentreerd dient te worden.

Eigen Logo

Een logo-afbeelding plaatsen we ook in de map “login” in het Child-Theme. Via de stijl-codes die we later gaan toevoegen kunt u naar wens de grootte van het logo aanpassen. Het logo in dit voorbeeld heeft een afmeting van 300 x 130 px en is transparant.

Het WordPress logo verwijst in het login-scherm via een link naar WordPress.org. Dat willen we natuurlijk ook niet.

Om de link van het logo te wijzigen, zodat die naar onze eigen website verwijst dienen we ook nog een stukje code aan het functions.php bestand toe te voegen:

/* Custom Login Logo URL */
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

De alt-tekst moeten we dan nog aanpassen door middel van toevoeging van de volgende code:

/* Logo Custom Alt Tekst */
function my_login_logo_url_title() {
return 'QWAIN Webdesign & Trainingen';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

U wijzigt de tekst ‘Qwain Webdesign & Trainingen’ naar een tekst naar keuze. Let op dat u de aanhalingstekens laat staan.

Met deze toevoegingen zijn de link en de alt-tekst aangepast.

Het logo daadwerkelijk vervangen doen we via een aantal CSS stijl-codes:

/* login logo */
.login h1 a {
    background-image: url('login-logo.png');
    width: 300px;
    height: 130px;
    background-size:auto;
    margin: 0 auto;
}

De afbeeldingsnaam dient u dan aan te passen naar de naam van het door u gebruikte logo. De afmetingen (width & height) kunt u naar wens wijzigen.

Sla tussentijds de aanpassingen op, en doe een test om te kijken of deze eerste aanpassingen werken en naar wens zijn.

Login Formulier

Het login-formulier zit onder het logo en overschrijft de border-radius aan de onderkant welke hiervoor hebben opgeven bij “#login”. Tevens zorgt het login-formulier voor een lichte grijze lijn welke in de stijl van WordPress is opgenomen.

Om nu aan de onderkant (links en rechts) dezelfde afgeronde hoeken te krijgen en die lichte grijze lijn te laten verdwijnen voegen we deze codes toe:

/* login formulier */
.login form {
    box-shadow: none;
    border-radius: 10px;
}

De labels (de teksten: Gebruikersnaam, wachtwoord) welke worden gebruikt in het login-formulier stijlen we dan met de volgende codes:

/* Login Labels */
.login label {
    font-size: 16px;
    font-weight: 500;
    color: #2d5c88;
}

Dan doen we nog een kleine aanpassing aan de randen van de formulier-velden via:

/* login veld randen */
.login input[type="text"]{
  background-color: #ffffff;
  border-color:#2d5c88;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#2d5c88;
  -webkit-border-radius: 4px;
}

Login Button

De inlog-knop (button) passen we ook nog aan naar eigen kleuren, voor zowel de passieve status als hover:

/* Login Button */
.login .button-primary {
    width: 100%;
    margin: 20px 0 0;  
    float:none;
    font-size: 18px;
    color: #ffffff;
    background-color:#2d5c88 !important;
    border: 1px solid #2d5c88;
}

.login .button-primary:hover {
    background-color:#6d3a87 !important;
    border: 1px solid #2d5c88;
}

Privacy Verklaring

De “Privacy Verklaring” link willen we ook niet zien. Het is ten slotte duidelijk dat gebruikers die over inlog-gegevens beschikken, al op de hoogte gebracht zijn van die “Privacy Verklaring” bij het aanmaken van de inlog-gegevens.

Die link schakelen we dan ook uit:

/* Privacy Link */
.login .privacy-policy-page-link {
    display: none;
}

Wachtwoord Link

De links welke onder het inlog-blok staan willen we niet zien en verwijderen die door deze twee classes:

/* Verwijder "Wachtwoord vergeten" link */
p#nav {
    display: none;
}

/* Verwijder "Terug naar" link */
p#backtoblog {
    display: none;
}

Foutmelding

Als laatste hebben we dan nog het gedeelte en de tekst welke verschijnt als er een fout wachtwoord of gebruikersnaam is opgegeven:

/* error melding */
.login #login_error {
    box-shadow: none;
    border-left: 4px solid #6d3a87;
    border-right: 4px solid #6d3a87;
    padding: 12px;
    margin: 20px 0 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #2d5c88;
}

Om nu ook nog de tekst aan te passen welke verschijnt bij deze melding, dienen we het volgende stukje code toe te voegen aan het functions.php bestand:

/* Custom Login Error Tekst */
function login_error_override()
{
    return 'Sorry, gegevens niet correct.';
}
add_filter('login_errors', 'login_error_override');

De tekst ‘Sorry,….’ kunt u dan naar eigen wens invullen. Let ook hier op dat de aanhalingstekens dienen te blijven staan.

Wilt u ook het shake-effect uitschakelen, dan kan dat met de volgende code:

/* Verwijder shake effect bij verkeerde inlog */
function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

Deze code dient dan ook aan het functions.php bestand te worden toegevoegd.

Onthoud mij vinkje en tekst

Om standaard het “Onthoud mij” vinkje aan te zetten kunnen we gebruik maken van de volgende code (ook toevoegen aan functions.php):

/* Onthoud mij aangevinkt */
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Willen we ook de tekst een aangepaste stijl geven doen we dat met de volgende CSS-codes (toevoegen aan custom-login.css):

/* login "Onthoud mij" tekst */
.login form .forgetmenot label {
    font-size: 13px;
    line-height: 19px;
}

Voeg hier naar wens een eigen kleur toe en verander de font-size en line-height naar eigen inzicht. Willen we die tekst en het vinkje helemaal niet zien, vervang dan alle codes in deze class door: “display:none”.

WordPress Redirect naar Home-Pagina na uitloggen

Standaard wordt na het uitloggen het inlogscherm weer getoond…. Om gebruikers, ongeacht het de rol van de gebruiker na het uitloggen direct door te sturen naar de home-pagina voegen we de volgende code toe aan het functions.php bestand:

add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
wp_redirect( home_url() );
exit();
}

WordPress Redirect naar andere pagina of website

Het is ook mogelijk om na het uitloggen de gebruiker naar een andere pagina of zelfs een andere website te sturen. Daar is de volgende snippet voor gebruiken.

add_action('wp_logout','auto_redirect_external_after_logout');
function auto_redirect_external_after_logout(){
wp_redirect( 'https://qwain.nl/wordpress-artikelen/alle/' );
exit();
}

Vervang hier de link door een link naar keuze.

Overige Artikelen