Jak zmienić logo logowania WordPress: metody za pomocą wtyczki, kodu i CSS

Strona logowania WordPress domyślnie wyświetla standardowe logo WordPress — ogólny element brandingowy, który nie ma miejsca na profesjonalnej stronie lub stronie skierowanej do klientów. Zastąpienie go własnym logo zajmuje mniej niż pięć minut i nie wymaga głębokiej wiedzy technicznej, a wpływ na spójność marki jest natychmiastowy. Ten przewodnik omawia trzy metody gotowe do wdrożenia produkcyjnego: podejście oparte na wtyczce GUI, bezpośrednie wstrzykiwanie kodu functions.php oraz samodzielna wtyczka z niestandardowym CSS — każda z dokładnym kodem, ścieżkami plików i przypadkami brzegowymi, których potrzebujesz, aby wdrożyć ją poprawnie za pierwszym razem.

Dlaczego domyślne logo strony logowania ma większe znaczenie, niż myślisz

Za każdym razem, gdy członek zespołu, klient lub administrator przechodzi do /wp-login.php, widzi logo WordPress. W przypadku agencji oferującej usługi white-label, platformy SaaS lub wielodostępnej instalacji WordPress, ten domyślny branding aktywnie podważa profesjonalny wizerunek, który zbudowałeś w każdym innym miejscu witryny.

Poza estetyką, niestandardowe logo strony logowania pełni subtelną, ale realną funkcję bezpieczeństwa: sygnalizuje użytkownikom, że znajdują się w legalnym, kontrolowanym środowisku — a nie na stronie phishingowej imitującej standardowy ekran logowania WordPress. Gdy hostujesz WordPress w środowisku VPS Hosting z dostępem root, masz pełną kontrolę nad każdą warstwą tej personalizacji, od uprawnień do plików po wdrażanie motywów, bez ograniczeń narzucanych przez środowiska współdzielone.

Porównanie trzech metod personalizacji

Kluczowa różnica architektoniczna: metody opierające się na pliku functions.php motywu nadrzędnego zostaną nadpisane przy każdej aktualizacji motywu. Zawsze używaj motywu podrzędnego do bezpośrednich modyfikacji plików.

Metoda 1: Użycie wtyczki

To najbezpieczniejsza ścieżka dla osób niebędących programistami i najszybsza dla każdego, kto potrzebuje działającego rezultatu w mniej niż trzy minuty.

Krok 1: Zainstaluj i aktywuj LoginPress

1. Zaloguj się do panelu WordPress.
2. Przejdź do Wtyczki > Dodaj nową.
3. Wyszukaj LoginPress lub Custom Login Page Customizer.
4. Kliknij Zainstaluj teraz, a następnie Aktywuj.

Obie wtyczki są aktywnie utrzymywane, mają dużą bazę instalacji i udostępniają swoje ustawienia poprzez natywny Kreator WordPress — co oznacza brak nieznanego interfejsu do nauki.

Krok 2: Prześlij i skonfiguruj swoje logo

1. Przejdź do LoginPress > Kreator (lub Wygląd > Login Customizer w zależności od wtyczki).
2. Znajdź sekcję Logo w lewym panelu.
3. Kliknij Wybierz obraz i prześlij swoje logo z Biblioteki multimediów lub komputera lokalnego.
4. Dostosuj szerokość, wysokość i wypełnienie za pomocą kontrolek podglądu na żywo wtyczki.
5. Kliknij Opublikuj.

Przypadek brzegowy: Jeśli Twoje logo wygląda rozmazanie na wyświetlaczach o wysokiej rozdzielczości (Retina), prześlij obraz o rozmiarze dokładnie 2x zamierzonego rozmiaru wyświetlania i ogranicz go za pomocą właściwości CSS width zamiast polegać na wymiarach pikselowych wtyczki. Na przykład, jeśli chcesz logo o szerokości 250px, prześlij PNG o szerokości 500px i ustaw szerokość wyświetlania na 250px.

Metoda 2: Ręczny kod w functions.php (zaawansowane)

Ta metoda daje Ci precyzyjną kontrolę nad każdą właściwością CSS — pozycjonowaniem, zachowaniem linków, stanami hover — bez instalowania dodatkowej wtyczki. Jest to preferowane podejście dla programistów tworzących niestandardowe motywy lub utrzymujących minimalną liczbę wtyczek.

Krok 1: Utwórz lub uzyskaj dostęp do motywu podrzędnego

Nigdy nie edytuj bezpośrednio pliku functions.php motywu nadrzędnego. Jeśli nie utworzyłeś jeszcze motywu podrzędnego, zrób to przed kontynuowaniem. Na serwerze VPS z cPanel lub dowolnym serwerze z dostępem SSH możesz ręcznie utworzyć katalog motywu podrzędnego i wymagane pliki.

Z panelu WordPress przejdź do Wygląd > Edytor plików motywu i wybierz plik functions.php swojego motywu podrzędnego.

Krok 2: Dodaj hook logo strony logowania

Dodaj następujący blok kodu do pliku functions.php swojego motywu podrzędnego:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Ważny szczegół: Oryginalny kod źródłowy w wielu samouczkach celuje tylko w #login h1 a. Od WordPress 5.x, opakowanie strony logowania zawiera również klasę .login, więc celowanie w oba selektory zapewnia kompatybilność ze wszystkimi wersjami WordPress i wszelkimi przyszłymi zmianami strukturalnymi.

Krok 3: Prześlij plik logo

Używając klienta FTP, menedżera plików hostingu lub SSH, prześlij swoje logo do katalogu images/ motywu podrzędnego:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

Ścieżka pliku w funkcji PHP używa get_stylesheet_directory_uri(), która zawsze wskazuje na główny URI aktywnego motywu — potwierdzając, dlaczego motyw podrzędny jest tutaj obowiązkowy. Jeśli przez pomyłkę użyjesz funkcji katalogu motywu nadrzędnego get_template_directory_uri(), ścieżka przestanie działać przy każdej zmianie lub aktualizacji motywu nadrzędnego.

Krok 4: Dostosuj link i podpowiedź logo

Domyślnie logo strony logowania prowadzi z powrotem do wordpress.org. Prawie na pewno chcesz, aby wskazywało na Twoją własną stronę główną. Dodaj te dwa dodatkowe hooki w tym samym pliku functions.php:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

To szczegół, który większość samouczków całkowicie pomija. Jeśli Twój klient kliknie logo na stronie logowania i trafi na wordpress.org, to jest to błąd profesjonalny. Te dwa filtry eliminują ten problem.

Krok 5: Zapisz i zweryfikuj

Kliknij Zaktualizuj plik w Edytorze plików motywu lub zapisz za pomocą edytora tekstowego, jeśli pracujesz przez SSH/SFTP. Przejdź do yourdomain.com/wp-login.php w prywatnym oknie przeglądarki, aby zweryfikować wynik bez ingerencji zbuforowanych zasobów.

Metoda 3: Niestandardowa wtyczka CSS (bez functions.php)

Jeśli pracujesz na stronie klienta, gdzie edytowanie plików motywu jest ryzykowne, lub używasz motywu zewnętrznego, którego nie możesz bezpiecznie rozszerzyć motywem podrzędnym, dedykowana wtyczka CSS jest najczystszym rozwiązaniem.

Krok 1: Zainstaluj Simple Custom CSS and JS

1. Przejdź do Wtyczki > Dodaj nową.
2. Wyszukaj Simple Custom CSS and JS (lub lżejszy Simple Custom CSS).
3. Zainstaluj i aktywuj.

Krok 2: Dodaj CSS strony logowania

Przejdź do Custom CSS and JS > Add Custom CSS i wstaw następujący kod:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Zastąp URL bezpośrednią ścieżką do przesłanego logo. Najbardziej niezawodnym źródłem jest Biblioteka multimediów: otwórz swoje logo w Bibliotece multimediów, skopiuj URL pliku z panelu szczegółów załącznika i wklej go bezpośrednio do reguły CSS.

Pułapka do uniknięcia: Nie używaj tutaj względnego URL (np. /wp-content/uploads/logo.png). Jeśli WordPress jest zainstalowany w podkatalogu, względne ścieżki będą cicho się psuć. Zawsze używaj bezwzględnego URL z Biblioteki multimediów.

Ustaw opcję Gdzie na Frontend lub Strona logowania, jeśli wtyczka obsługuje targetowanie specyficzne dla strony, aby uniknąć ładowania niepotrzebnego CSS na każdej publicznej stronie.

Specyfikacje obrazu logo i najlepsze praktyki

Format pliku: Używaj PNG z przezroczystym tłem. Artefakty kompresji JPEG są widoczne na jasnoszarym tle strony logowania. SVG jest obsługiwany w nowoczesnych przeglądarkach, ale wymaga dodatkowego CSS (background-size: auto zachowuje się inaczej dla SVG) i może powodować niespójności renderowania na starszych konfiguracjach.

Wymiary: Kontener formularza logowania WordPress ma szerokość 320px. Logo o rozmiarze 250 x 80px mieści się w tym ograniczeniu. Dla ekranów Retina/HiDPI eksportuj w rozmiarze 500 x 160px i ogranicz rozmiar wyświetlania za pomocą właściwości CSS width: 250px; height: 80px.

Rozmiar pliku: Utrzymuj logo poniżej 50KB. Strona logowania jest punktem dostępu o wysokiej częstotliwości — każdy administrator, redaktor i współpracownik ją ładuje. Duży plik obrazu dodaje niepotrzebne opóźnienia, szczególnie na serwerach z ograniczoną przepustowością I/O.

Kontrast kolorów: Domyślne tło strony logowania to #f0f0f1. Przetestuj swoje logo na tle tej dokładnej wartości hex przed wdrożeniem. Białe logo na białym tle jest niewidoczne — błąd, który jest wstydliwie powszechny przy pośpiesznych wdrożeniach.

Zachowanie responsywne: Dodaj max-width: 100% do kotwicy logo, aby zapobiec przepełnieniu na ekranach mobilnych węższych niż 320px. Strona logowania WordPress nie jest domyślnie w pełni responsywna, ale ta pojedyncza reguła zapobiega poziomemu przewijaniu na małych ekranach.

Uwagi dotyczące środowiska hostingowego

Wybór metody jest częściowo zdeterminowany przez Twoje środowisko hostingowe. Na Serwerze Dedykowanym masz nieograniczony dostęp SSH i możesz wdrażać motywy podrzędne, zarządzać uprawnieniami plików i automatyzować aktualizacje logo za pomocą skryptów wdrożeniowych. Na Hostingu Współdzielonym jesteś zazwyczaj ograniczony do menedżera plików i panelu WordPress — co sprawia, że metoda wtyczkowa lub wtyczka Custom CSS są jedynymi praktycznymi opcjami.

Dla zespołów zarządzających wieloma instalacjami WordPress, rozważ użycie WP-CLI do automatyzacji aktualizacji logo na wielu stronach:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Jeśli Twoja strona WordPress obsługuje rejestracje użytkowników, portale klientów lub logowania e-commerce, połączenie markowej strony logowania z ważnym Certyfikatem SSL jest niezbędne. Strona logowania przesyła dane uwierzytelniające — HTTPS to podstawa, a nie opcjonalne ulepszenie.

Macierz decyzyjna: którą metodę powinieneś wybrać

Użyj tej listy kontrolnej, aby wybrać właściwe podejście dla swojej konkretnej sytuacji:

• Jesteś osobą niebędącą programistą lub budujesz dla klienta nieposiadającego wiedzy technicznej — użyj Metody 1 (wtyczka LoginPress). Jest odwracalna, nie wymaga kodu, a wtyczka automatycznie obsługuje zachowanie responsywne.
• Jesteś programistą utrzymującym niestandardowy motyw podrzędny — użyj Metody 2 (functions.php). Nie dodaje żadnego narzutu wtyczek i daje pełną kontrolę CSS, w tym poprawkę URL linku logo.
• Musisz dostosować motyw zewnętrzny bez motywu podrzędnego — użyj Metody 3 (wtyczka Custom CSS). Jest odizolowana od aktualizacji motywu i łatwa do usunięcia.
• Zarządzasz wieloma stronami — połącz Metodę 2 z motywem podrzędnym specyficznym dla klienta, wdrożonym przez Git lub WP-CLI dla spójności.
• Twoje logo wygląda rozmazanie na wyświetlaczach Retina — niezależnie od metody, prześlij obraz w rozdzielczości 2x i ogranicz jego rozmiar wyświetlania za pomocą właściwości CSS width i height.
• Link logo nadal wskazuje na wordpress.org po personalizacji — dodaj filtry login_headerurl i login_headertext z Metody 2, nawet jeśli użyłeś wtyczki do samego obrazu.

FAQ

Czy zmiana logo strony logowania wpływa na bezpieczeństwo WordPress?

Nie, zastąpienie obrazu logo nie ma wpływu na bezpieczeństwo uwierzytelniania. Jednak niestandardowe logo strony logowania może zmniejszyć wizualną skuteczność ogólnych stron phishingowych WordPress atakujących Twoich użytkowników, ponieważ atakujący zazwyczaj klonują domyślny wygląd strony logowania WordPress. W celu rzeczywistego wzmocnienia bezpieczeństwa połącz to z uwierzytelnianiem dwuskładnikowym, ograniczaniem prób logowania i wymuszaniem HTTPS.

Czy niestandardowe logo strony logowania przestanie działać po aktualizacji rdzenia WordPress?

Aktualizacje rdzenia nie dotykają plików motywu ani danych wtyczek. Jeśli użyłeś Metody 2 z motywem podrzędnym, Twoje zmiany są w pełni odizolowane od aktualizacji zarówno rdzenia, jak i motywu nadrzędnego. Jeśli edytowałeś bezpośrednio plik functions.php motywu nadrzędnego, aktualizacja motywu nadpisze Twój kod — dlatego wymóg motywu podrzędnego jest niezbędny.

Jaki jest prawidłowy hook do wstrzykiwania CSS na stronie logowania WordPress?

Użyj login_enqueue_scripts. Ta akcja uruchamia się specyficznie na stronie logowania przed renderowaniem stylów, co czyni ją prawidłowym i oficjalnie udokumentowanym hookiem do tego celu. Użycie wp_enqueue_scripts nie zadziała na stronie logowania — uruchamia się tylko na froncie.

Czy mogę użyć pliku SVG jako logo strony logowania?

Tak, ale z zastrzeżeniami. WordPress domyślnie blokuje przesyłanie SVG ze względów bezpieczeństwa (SVG może zawierać wykonywalny JavaScript). Musisz albo użyć wtyczki takiej jak Safe SVG, aby umożliwić przesyłanie SVG, albo odwołać się do SVG za pomocą zakodowanego bezwzględnego URL w CSS. Dodatkowo ustaw background-size: auto lub jawne wymiary pikselowe, ponieważ zachowanie skalowania SVG różni się od obrazów rastrowych.

Moje logo nie pojawia się po wykonaniu tych kroków — co powinienem sprawdzić?

Po pierwsze, wykonaj twardy reload strony logowania za pomocą Ctrl+Shift+R (Windows/Linux) lub Cmd+Shift+R (Mac), aby ominąć pamięć podręczną przeglądarki. Po drugie, sprawdź, czy URL obrazu jest publicznie dostępny, wklejając go bezpośrednio do karty przeglądarki. Po trzecie, otwórz DevTools przeglądarki na stronie logowania, sprawdź element #login h1 a i sprawdź, czy Twoja reguła CSS jest stosowana, czy nadpisywana przez inny arkusz stylów. Po czwarte, potwierdź, że plik został przesłany do właściwego katalogu i że nazwa pliku w Twoim kodzie dokładnie odpowiada nazwie przesłanego pliku, uwzględniając wielkość liter — serwery Linux traktują Logo.png i logo.png jako różne pliki.