8 prostych kroków: Jak wstawić własne logo na stronie logowania WordPress + bonus
Promocja marki własnego bloga to rzecz pracochłonna. Jednym z elementów budowy marki jest świadomość jego znaku graficznego, więc dobrze byłoby mieć własny obrazek również na stronie do logowania. Cieszy, że w nowej wersji WordPress zamiana standardowego obrazka na własne logo jest taka prosta.
Przygotowanie
Zanim zaczniemy cokolwiek zmieniać przyda się zaznajomić z wersją pierwotną i ewentualnie zrobić kopię zapasową pliku graficznego:
1.) Wchodzimy na stronę logowania naszego bloga
2.) Ściągamy plik /wp-admin/images/logo-login.gif (albo zapisujemy plik graficzny pojawiający się nad polami „użytkownik” i „hasło”)
Obr. 1. Wyglad pierwotnego ekranu do logowania
3.) Otwieramy plik w dowolnym edytorze graficznym
4.) Oglądamy jak wygląda pierwotny plik nagłówka
Zmiany
Widać, że pierwotny plik ma rozmiary 290 na 66 pikseli i jest w formacie GIF, więc nasze zastępstwo też powinno być w GIF’em o rozmiarach 290 pikseli szerokości na 66 pikseli wysokości (głębia kolorów nie gra roli).
5.) Tworzymy nowy plik graficzny o rozmiarach 290×66 z białym tłem
6.) Wklejamy nasze logo bądź to, co chcemy by pojawiało się nad polem do logowania. Nasza wyobraźnia ograniczona jest tylko dwoma czynnikami:
- Format GIF ma tylko 256 kolorów
- Grafika ma rozmiary 290 pikseli szerokości i 66 pikseli wysokości
7.) Zapisujemy nasze dzieło pod nazwą logo-login.gif (najlepiej w innym katalogu niż ten do którego ściągneliśmy wersję pierwotną, by nie nadpisać kopii zapasowej)
Podmiana
8.) Nowy plik logo-login.gif wysyłamy na serwer do katalogu /wp-admin/images/ nadpisując już istniejącą grafikę o tej samej nazwie.
Obr. 2. Wyglad ekranu logowania po zmianie (na przykładzie http://topblogger.pl/wp-login.php )
Bonus
Po zmianie nasze logo wciąż linkuje do http://wordpress.org. Aby to zmienić należy edytować plik wp-login.php (przed edycją zrób kopię zapasową!):
- W pliku wp-login.php wyszukujemy wiersz #30 o treści:
<div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://wordpress.org/’); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>
- Podkreślony fragment zmieniamy na adres naszego bloga. W przypadku topblogger.pl wynik zmian jest następujący:
<div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://topblogger.pl/’); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>
- Gotowe!
Działający wynik zmian możecie sprawdzić na stronie http://topblogger.pl/wp-login.php
A może wtyczka
Jeśli wolisz do sprawy podejść za pomocą wtyczek polecam dwie:
- dla WordPress 2.3.3 i niższych: Binary Moon Custom Login Page
- dla WordPress 2.5: Branded Login Screen
To jak, zmienisz sobie ekran logowania? Dlaczego? Dlaczego nie?
- Dodaj
kanał rss
do swojego czytnika - Skorzystaj z
adresu trackback - Prenumeruj
kanał komentarzy
Kommentarze: 14 »
Można (a nwet trzeba) to zrobić na blogu na którym pisze wielu autorów, lub gdzie każdy może się zarejestrować (jak u Ciebie).
U mnie, dla mnie samego nie warto ;)
Racja, przecież ty sam wiesz jak nazywa sie blog i jakie są jego cechy rozpoznawalne :). W tym wypadku pozostaje chyba tylko motyw „dla zabawy” lub „dla satysfakcji”. Ale nie zgodze sie ze stwierdzeniem „dla mnie nie warto” – jesteś jedną z najważniejszych osób na swoim blogu, więc część rzeczy powinna być robiona dlatego, że sprawia Ci radość albo zmniejsza nawał pracy :).
Świetny pomysł – o takiej rzeczy nawet nie pomyślałem :) w wolnej chwili na pewno zrobię swoje logo :)
Dziękuję. Daj znać gdy zrobisz, pójdę poogladać :)
Czytając ten tekst myślałem sobie „zwariował… nie ma co robić?”, ale komentarz Tomka Goździewicza mnie przekonał. Tam gdzie jest wielu autorów, gdzie można zakładać konta … warto. (i poszedł ustawiać na jednym z wieloautorskich blogów).
Dziękuje za otrzeźwienie, pisząc ten tekst zastanawiałem sie, czy nie przesadziłem (bo temat dość specyficzny i dla wąskiej grupy odbiorców). Dzieki niech będą Tomkowi, że mnie uratował przed linczem ;)
wp-admin/css/login.css
W tym pliku warto pogrzebać, jeżeli chcemy zmienić coś więcej niż tylko grafikę poprzez podmianę. Do loga ekranu logowania odnosi się selektor „h1 a”.
Zmieniając wp-login.php oraz style można stworzyć coś oryginalnego.
Ciekawe ile osób zrobiło sobie kompletną podmianę ekranu logowania. Nie znalazłem niestety żadnego zestawienie top 10 lub podobne :(
Ja bym sie skupil na tym, co widzi uzytkownik, a nie admin… Masz teraz np. ladne logo w panelu logowania, ktorego tylko Ty uzywasz, natomiast tekst w komentarzach wyjezdza poza diva :/
Kilka dni temu było całkowicie inaczej – jedynym sposobem logowania był panel logowania. To, że chciałem uzytkownikowi ułatwić sprawę i wprowadziłem logowanie całkowicie do zakładki kosztowało niestety przywilej w postaci firmowego panelu do logowania :(.
Dziękuję za informacje o div’ie, zostaje jeszcze tylko wymyślić sposób na ten bug firefoxa.
Dziękuję za artykuł. Szukałem informacji na ten temat i wszystko znalazłem tutaj. Wielkie dzięki!
Obecnie nie trzeba się tyle pocić aby uzyskać ten sam efekt. Dostępna jest wtyczka do WP dzięki której podmianę logo możemy sobie wyklikać z panelu -> http://bavotasan.com/tidbits/add-your-logo-to-the-wordpress-admin-and-login-page/
A czytałeś może ostatnie linijki wpisu? – abstrahując, dziękuję za linka :).
Fajny przykład, dzięki. Osobiście zrobiłem to ręcznie bez wtyczki. Ciekawe, iż zrobiłem tak jak piszesz od A do Z na testowym blogu i oczywiście było Ok, a później wrzuciłem tylko sam „gif” na docelową stronę bez zmiany w pliku php – i też działa.