Personalizacja strony logowania WordPress

Oryginalny branding WordPressa na stronie logowania może się niektórym nie podobać. W tym wpisie pokażę, jak bezinwazyjnie i w sposób odporny na aktualizacje zmienić logo oraz wygląd formularza na stronie wp-login.

Otwieramy plik functions.php, z folderu gdzie znajdują się pliki naszego aktywnego motywu. Dla ułatwienia można skorzystać z edytora wbudowanego w WordPressa. Wybieramy Wygląd >> Edytor, Aktualny motyw, functions.php:

Na samym końcu można dodać taki kod:

function login_p() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png);
height:65px;
width:320px;
background-size: 320px auto;
background-repeat: no-repeat;
padding-bottom: 0px;
}

body{
background:#1A1A1B !important;
}

#loginform{
background:#2A2A2B;
}

.button-primary{
background:#3A3A3B !important;
border:1px solid #4A4A4B !important;
}

.privacy-policy-link{
color:#aaa !important;
}

</style>
<?php }
add_action( 'login_enqueue_scripts', 'login_p' );

Co się dzieje? Login_enqueue_scripts dodaje do strony wp-login kod jaki znajduje się w funkcji login_p. Dzięki temu strona może wyglądać dokładnie tak jak tego chcemy. Ja na szybko zmieniłem kolorystykę, logo i kilka detali.

Modyfikacja formularza logowania WordPress

Jeżeli zmiana CSS to za mało, sprawdź jak wykonać niestandardową stronę logowania w WordPressie wykorzystując natywną funkcję wp_login_form().

Podsumowanie

Jak widać dostosowanie strony logowania to nic trudnego. Edytując wygląd w functions.php za pomocą specjalnej metody taka zmiana będzie kompatybilna z przyszłymi aktualizacjami WordPressa (nawet z tymi które będą dotyczyć wp-login.php).