Låt oss vara ärliga nu: inloggningsskärmen i WordPress är, som standard, ganska tråkig. Vit bakgrund, WordPress-logotypen… Men med mycket lite arbete kan du anpassa WordPress-inloggningen efter dina egna behov. Du kan ändra dess bakgrund, textfärg, logotyp, och i princip allt annat. I den här guiden kommer vi att lära dig hur du gör det.

1. Redigera functions.php

Gå in på temaredigeraren (Admin > Utseende > Redigerare) och öppna functions.php. Scrolla ned till slutet av filen och klistra in följande:

function custom_login() { 
   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/inloggning/inloggning.css" />'; 
}
add_action('login_head', 'custom_login');

2. Redigera temamappen

Vi kommer att behöva en mapp för de filer och bilder som du kommer att använda för att skapa den nya inloggningskärmen. Navigera till din temamapp med ett FTP-program och skapa en ny mapp med namnet ”inloggning”. Inuti den mappen, skapa en ny fil med namnet ”inloggning.css”.

3. Redigera inloggning.css

CSS-filen ”inloggning.css” kommer nu att laddas varje gång någon öppnar inloggningssidan på din WordPress-blogg. Genom att redigera ”inloggning.css” kan du alltså förändra utseendet på inloggningen.

Det är fritt fram att ändra utseendet precis hur du vill, men jag har skapat en grundplåt som du hittar nedan. Klistra in den i inloggning.css och spara för att se hur det ser ut.

/* Sidans bakgrund */
html { 
     background:#e2e4e9 url(../bakgrund.jpg) 0 0 repeat-x; 
}

/* Titelbilden (WordPress-logotypen). Glöm inte att ändra höjd och bredd så att de motsvarar din logotyps attribut. */
h1 a {	
     background:url(../logotyp.png) 0 0 no-repeat;
     width:370px;
     height:70px;
} 
 
/* Toppmenyns bakgrund*/
body.login {
     border-top-color:#dff4fc;
}

/* Länkeffekterna i toppmenyn */
.login p#backtoblog a:link,
.login p#backtoblog a:visited {
     color:#17272d;
}

/* Hover-effekterna på länkarna i huvudmenyn */
.login p#backtoblog a:hover, 
.login p#backtoblog a:active {
     color:#17272d;
     text-decoration:underline;
}