Własne logo przy logowaniu do kokpitu WP

Zastanawiałaś się kiedyś, jak dodać swój osobisty akcent do WordPressa? Jeśli tworzysz strony dla klientów albo chcesz, żeby Twój kokpit wyglądał bardziej „po Twojemu”, to własne logo na ekranie logowania to absolutny must-have. I wiesz co? Zrobienie tego jest prostsze, niż myślisz – zero magii, same konkretne kroki.

Dlaczego warto mieć własne logo przy logowaniu do kokpitu?

Profesjonalizm – Masz branding na full, nawet w miejscu, o którym większość zapomina.
Personalizacja – Kokpit staje się „Twój”, a nie „WordPressowy”. Miłe, prawda?
Pierwsze wrażenie – Nawet ekran logowania może być częścią Twojej marki. Tak, to detal, ale detale robią różnicę.

Jak to zrobić?

Są dwa sposoby – wtyczkowo i bezwtyczkowo. A jak! Oczywiście Ty decydujesz! Jak mnie już nieco znasz to wiesz co ja bym wybrała 😉

1. Metoda wtyczkowa – dla tych, co lubią wygodę

Jeśli Twoje motto to „po co komplikować”, to wtyczka jest dla Ciebie. Wypróbuj np. LoginPress albo Custom Login Page Customizer. Oto jak to działa:

  • Instalujesz i aktywujesz wtyczkę.
  • W ustawieniach wtyczki wrzucasz swoje logo i dostosowujesz kolory, tło, czcionki i co tam jeszcze oferuje dana wtyczka.
  • Zapisujesz zmiany i gotowe. Zero kodowania, zero stresu. Tylko pamiętaj, żeby nie przesadzać z ilością wtyczek! Szczególnie warto przemyśleć czy potrzebna Ci na pewno wtyczka do takich dupereli, które spokojnie można obejść bezwtyczkowo. A więc gotowa na jazdę bez trzymanki i na nieco zabawy w kodzie?

2. Metoda kodowa – dla hardcorowych Specek

Jeśli kod to Twój drugi język, to możesz dodać logo ręcznie. Wystarczy parę linijek PHP i CSS. Gotowa? Let’s go!

  1. Przygotuj logo – Optymalny rozmiar to 320×80 px. Nazwij plik np. custom-logo.png i wrzuć go do folderu z motywem (np. do /wp-content/themes/twoj-motyw/images).
  2. Dodaj kod do pliku functions.php w motywie potomnym:
function wlasne_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: 100% !important;
height: 80px !important;
}
</style>';
}
add_action('login_head', 'wlasne_login_logo');

A teraz odśwież stronę logowania – Boom, logo jest na swoim miejscu! Daj znać, którą opcję wybrałaś i czy misja się powiodła 🙂

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *