Jak Zmienić Domyślny Ekran Logowania w WordPress?

Domyślny ekran logowania WordPressa jest prosty i funkcjonalny, ale często nie pasuje do identyfikacji wizualnej strony czy firmy. Dzięki kilku modyfikacjom możesz spersonalizować wygląd logowania, dodając własne logo, kolory, a nawet tło.

Dodanie własnego logo

Aby zmienić logo na stronie logowania, wystarczy dodać kod do pliku functions.php aktywnego motywu (najlepiej motywu potomnego):

function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png) !important;
            background-size: contain !important;
            width: 200px !important;
            height: 100px !important;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');

Pamiętaj, aby umieścić plik custom-logo.png w folderze images swojego motywu.

Zmiana linku i tytułu logo

Domyślnie logo WordPressa kieruje do strony wordpress.org. Możesz to zmienić na własny adres:

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

function custom_login_logo_url_title() {
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'custom_login_logo_url_title');

Personalizacja kolorów i stylu

Możesz dodać własny arkusz stylów dla strony logowania:

function custom_login_styles() {
    echo '<style type="text/css">
        body.login {
            background-color: #f5f7fa;
        }
        .login #loginform {
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }
        .login label {
            color: #333 !important;
        }
        .wp-core-ui .button-primary {
            background: #0073aa;
            border-color: #0073aa;
            box-shadow: none;
            text-shadow: none;
        }
        .wp-core-ui .button-primary:hover {
            background: #005f8d;
            border-color: #005f8d;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_styles');

Dodanie własnego tła

Możesz też podmienić tło logowania na własne:

function custom_login_background() {
    echo '<style type="text/css">
        body.login {
            background: url(' . get_stylesheet_directory_uri() . '/images/login-bg.jpg) no-repeat center center fixed !important;
            background-size: cover !important;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_background');

Podsumowanie

Zmiana ekranu logowania w WordPress to prosty sposób na nadanie stronie bardziej profesjonalnego charakteru i dopasowanie jej do identyfikacji wizualnej marki. Dzięki kilku liniom kodu możesz dodać własne logo, kolory, styl, a nawet tło.

Jeśli chcesz, aby Twoja strona była całkowicie spersonalizowana i wyglądała unikalnie już od ekranu logowania – warto wdrożyć te zmiany!