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 skreddersydd løsning.