Hvordan tilpasse WordPress innloggingsside i 2026 (uten plugins)

Standard WordPress-innloggingsskjerm (wp-login.php) er ikonisk, men den skriker “Generisk Blogg”. Hvis du er et byrå som bygger et nettsted for en kunde (f.eks. Coca-Cola), er det å se WordPress-logoen en merkevarefeil.

I 2026 er White-Labeling standard praksis. Denne guiden viser deg hvordan du fullstendig tilpasser innloggingsopplevelsen ved hjelp av functions.php, slik at den ser ut som en skreddersydd applikasjon.

#1. Endre logoen (grunnleggende)

Først, la oss bli kvitt WordPress “W” og erstatte den med kundens logo.

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

Profftips: Standardlenken går til WordPress.org. Endre den til nettstedets forside:

function wppoland_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wppoland_login_logo_url' );

#2. Full CSS-overhaling (det moderne utseendet)

Den grå standardbakgrunnen (#f1f1f1) er kjedelig. La oss gjøre det til en fullskjerms merkevareopplevelse. Lag en fil login-style.css i temaet ditt og last den bare på innloggingssiden.

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

Eksempel style-login.css:

body.login {
    background-color: #0d1117; /* Dark Mode */
    display: flex;
    align-items: center;
    justify-content: center;
}
.login form {
    background: #161b22;
    border: 1px solid #30363d;
    box-shadow: none;
    border-radius: 8px;
}
.login label {
    color: #c9d1d9;
}
.wp-core-ui .button-primary {
    background: #238636; /* GitHub Green */
    border-color: rgba(27,31,35,0.15);
}

#3. Sikkerhetsherding (uklarhet)

Som standard, hvis du skriver inn feil passord, sier WordPress: “Passordet du skrev inn for brukernavnet admin er feil.” Dette forteller en hacker: “Brukernavnet admin eksisterer! Nå er det bare å brute-force passordet.”

La oss tvinge WordPress til å være vag.

function wppoland_login_errors() {
    return 'Noe er galt!';
}
add_filter( 'login_errors', 'wppoland_login_errors' );

Nå er feilmeldingen generisk og avslører ingenting.

#4. Fjerne “riste”-effekten

Når du mislykkes med innlogging, rister skjemaet. Noen kunder synes dette er irriterende eller uprofesjonelt. Du kan fjerne JS-en som utløser det.

function wppoland_remove_login_shake() {
    remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'wppoland_remove_login_shake' );

#5. Legge til 2fa / passkeys (fremtiden)

I 2026 er passord kanskje foreldet. Selv om du ikke enkelt kan bygge 2FA (To-faktor autentisering) fra bunnen av i functions.php, bør du style 2FA-feltene hvis du bruker en plugin som Two Factor. Målrett CSS-klassen .login .backup-methods for å sikre at knappene “Bruk en sikkerhetsnøkkel” passer til merkevaren din.

#Oppsummering

En tilpasset innloggingsside er “prikken over i-en” på et profesjonelt WordPress-prosjekt.

• Merk det: Logo + Lenke.
• Styl det: Full CSS-kontroll.
• Sikre det: Generiske feilmeldinger.

Ikke la kunden din se standard WordPress-grensesnitt. Det ødelegger illusjonen av en konkret funksjon.

Se vår WordPress-sikkerhetsrevisjon.