Domyślny ekran logowania WordPress (wp-login.php) jest kultowy, ale krzyczy “Generyczny Blog”.
Jeśli jesteś agencją budującą stronę dla klienta (np. Coca-Coli), widok logo WordPress to porażka wizerunkowa.
W 2026 roku White-Labeling to standardowa praktyka.
Ten przewodnik pokazuje, jak całkowicie dostosować doświadczenie logowania używając functions.php, sprawiając, że wygląda jak aplikacja szyta na miarę.
1. Zmiana logo (podstawy)
Najpierw pozbądźmy się “W” WordPressa i zastąpmy go logo klienta.
function wppoland_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-klienta.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' );Pro Tip: Domyślny link prowadzi do WordPress.org. Zmień go na stronę główną Twojej witryny:
function wppoland_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'wppoland_login_logo_url' );2. Pełna przebudowa CSS (nowoczesny wygląd)
Domyślne szare tło (#f1f1f1) jest nudne. Zróbmy z tego pełnoekranowe doświadczenie marki.
Stwórz plik login-style.css w swoim motywie i załaduj go tylko na stronie logowania.
function wppoland_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'wppoland_login_stylesheet' );Przykład 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. Utwardzanie bezpieczeństwa (obscurity)
Domyślnie, jeśli wpiszesz złe hasło, WordPress mówi: “Hasło, które wpisałeś dla użytkownika admin, jest niepoprawne.” To mówi hakerowi: “Użytkownik admin istnieje! Teraz po prostu łam hasło.”
Zmuśmy WordPressa do bycia ogólnikowym.
function wppoland_login_errors() {
return 'Coś poszło nie tak!';
}
add_filter( 'login_errors', 'wppoland_login_errors' );Teraz komunikat błędu jest generyczny i nic nie ujawnia.
4. Usuwanie efektu “trzęsienia”
Gdy logowanie się nie powiedzie, formularz się trzęsię. Niektórzy klienci uważają to za irytujące lub nieprofesjonalne. Możesz usunąć JS, który to wywołuje.
function wppoland_remove_login_shake() {
remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'wppoland_remove_login_shake' );5. Dodawanie 2fa / passkeys (przyszłość)
W 2026 roku hasła są prawdopodobnie przestarzałe.
Chociaż nie możesz łatwo zbudować 2FA (Uwierzytelniania Dwuskładnikowego) od zera w functions.php, powinieneś ostylować pola 2FA, jeśli używasz wtyczki takiej jak Two Factor.
Celuj w klasę CSS .login .backup-methods, aby upewnić się, że przyciski “Użyj klucza bezpieczeństwa” pasują do Twojego brandingu.
Podsumowanie
Niestandardowa strona logowania to “wisienka na torcie” profesjonalnego projektu WordPress.
- Obranduj to: Logo + Link.
- Ostyluj to: Pełna kontrola CSS.
- Zabezpiecz to: Generyczne komunikaty błędów.
Nie pozwól klientówi zobaczyć domyślnego interfejsu WordPress. To psuje immersję rozwiązania szytego na miarę.
Explore os nossos serviços de segurança WordPress para levar o seu projeto mais longe.
