publikacja: 5 października 2009, 10:40; autor: Szymon Skulimowski http://wpninja.pl/artykuly/formularz-logowania-z-wlasnym-logo/

Formularz logowania z własnym logo

Tworząc komercyjną stronę opartą o WordPress często zachodzi potrzeba podmiany logo, które znajduje się na stronie logowania / rejestracji. Chciałbym się z Wami podzielić sposobem na uzyskanie takiego efektu, który jest prosty, „bez-wtyczkowy” i odporny na aktualizacje.

Standardowy formularz logowania / rejestracji

Dla przypomnienia - standardowy formularz logowania wygląda następująco:

WordPress - standardowy formularz logowania

Naszym zadaniem jest podmiana WP-owego logo na nasze w taki sposób aby:

nie obciążać WordPressa niepotrzebnymi wtyczkami,
nie trzeba było aktualizować odpowiednich plików po każdej aktualizacji skryptu,
zbytnio się nie namęczyć :-).

Krok 1: Przygotowanie pliku graficznego:

Nowe logo powinno mieć wymiary pokrywające się ze starym czyli maksymalnie 310x70 pikseli. Nic nie stoi na przeszkodzie jednak abyśmy dali obrazek o mniejszych rozmiarach ponieważ zostanie od automatycznie wycentrowany.

Przygotowany plik wgrywamy na serwer do katalogu z używanym szablonem graficznym. Załóżmy, że nazwiemy go „login-logo.gif”.

Krok 2: Tworzymy plik CSS:

Tworzymy plik login.css i umieszczamy go w katalogu szablonu graficznego. W treści natomiast wpisujemy:

.login h1 a {
background: url(login-logo.gif) no-repeat top center;
}

Plik posłuży nam do podmiany standardowego logo na nowe.

Krok 3: Dodajemy trochę magii:

Otwieramy plik functions.php (katalog z używanym szablonem graficznym) i uzupełniamy go o poniższy kawałek kodu:

function new_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_option('siteurl') .'/wp-content/themes/'. get_option('template') .'/login.css" />'."\n";
}
 
add_action('login_head', 'new_login');

Dzięki niemu na stronach logowania i rejestracji wczytany zostanie dodatkowy plik CSS, który utworzyliśmy w poprzednim kroku.

Krok bonusowy: Podmieniamy adres odnośnika:

W komentarzach daliście znać, że interesowałaby Was również opcja podmiana adresu odnośnika. Aby to zrobić trzeba dopisać dodatkowo do pliku functions.php poniższy kod:

function new_login_headerurl($url) {
return get_bloginfo('siteurl');
}
 
add_filter("login_headerurl","new_login_headerurl");
 
function new_login_headertitle($message) {
return get_bloginfo('name');
}
 
add_filter("login_headertitle","new_login_headertitle");

Prawda, że nie było trudne? Odważne osoby, które nie boją się zaprezentować efektów swojej pracy zapraszam do komentarzy :-).

Podobał się artykuł? Dodaj kanał RSS / Atom do swojego czytnika lub zapisz się na bezpłatny newsletter i dołącz do grona stałych czytelników.

Podobne artykuły

Brak powiązanych artykułów

Komentarze (28)

Kapsel 955 dni temu:
Ja wiem, czego tu się bać ;) witryna i tak raczej dla zamkniętej grupy stworzona więc mi nie żal pokazać: http://55ddw.org
odpowiedz
Kapsel 955 dni temu:
łech, łech, z rozpędu zapodałem główną a nie panel logowania: http://55ddw.org/wp-login.php (jakby się adminowi chciało, można adres podmienić ;)
odpowiedz
Madzia 955 dni temu:
Szkoda tylko Kaspel, że został jeszcze alt i link do wordpressa.
odpowiedz
Lemony. 955 dni temu:
A propos. Jak to można zmienić?
odpowiedz
Nomex 955 dni temu:
Ja taką możliwość wykorzystuje już od dawna chodź wystarczyło podmienić oryginalne logo WordPressa na nasze: http://historialomzy.pl/wp-login.php
Jeżeli chcesz zmienić link i alt zedytuj plik wp-login.php
```
<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>
```
wpisując oczywiście swój adres i nazwę serwisu
odpowiedz
Nomex 955 dni temu:
Widzę, że coś tu opcja kodu nie działa, prosiłbym o edycję i poprawienie…
odpowiedz
palmiak 955 dni temu:
@nomex
Twoja metoda ma jedną drobną wadą - w momencie update’a trzeba się pilnować, żeby obrazka od logo nie podmieniać - co na dłuższą metę jest upierdliwe.
odpowiedz
Szymon Skulimowski 954 dni temu:
Szkoda tylko Kaspel, że został jeszcze alt i link do wordpressa.
A propos. Jak to można zmienić?
Na życzenie uzupełniłem artykuł o taki bajer (krok bonusowy) :-).
odpowiedz
SpeX 954 dni temu:
W sprawie uzupełnienie.
Czy znasz jakiś sposób by sytuacjach takich jak ta, gdy gość znacznie modyfikujesz wpis, wymusić ponowne opublikowane go na RSSie?
odpowiedz
Kapsel 953 dni temu:
Zauważyłem tą niekonsekwencję alta i linka… ale nie miałem czasu się bliżej przyjrzeć (pewnie bym sam i tak nie naprawił), a tu wracam na bloga i już jest rozwiązanie :) fajnie, fajnie!
odpowiedz
zonk 953 dni temu:
a tu tak … lubie tą stronę http://www.polandbowling.eu/wp-login.php
odpowiedz
Lemony. 951 dni temu:
Czy da się zrobić 3 kolumny z dwóch? Magicznym sposobem?
odpowiedz
Marian 947 dni temu:
Witam,
poza tematem, ale co tam: spotkał się ktoś z takim problemem, że WP w RSS-a wrzuca wypis (excerpt) zamiast treści posta mimo, że zaznaczona jest opcja „W kanałach nowości wyświetlaj: całą treść”? Na innym blogu (też 2.8.4) nie mam tego problemu i staram się zlokalizować przyczynę.
Pozdrawiam.
odpowiedz
Marian 944 dni temu:
No tak… To wina Firefoxa. Jak feed miał postać domyślną, to Fx czytał tylko excerpty, jak zostało puszczone przez Feedburbera - nie ma problemu…
Pozdrawiam.
odpowiedz
Marches 944 dni temu:
Ciekawy art, skorzystałem choć pod operą jakoś dziwnie mi się wyświetla.
odpowiedz
marsjaninzmarsa 938 dni temu:
Fajny sposób, nie wiedziałem, że system szablonów wp jest aż tak elastyczny… :)
I przy okazji podczepiam się pod pytanie @SpeX’a - też chciałem kiedyś uzyskać ten efekt… ;)
odpowiedz
gawa 933 dni temu:
A skoro jesteśmy przy temacie logowania…
To małe pytanko… lekko obok… ;-)
Jest taki typ stron w moim przypadku chodzi o stronę statyczną - prywatne- czy nie wiecie Drodzy WordPress-owicze czy da się i ewentualnie jak zrobić taką „ukrytą” czyli prywatną stronę niewidoczną dla wszystkich - by w momencie logowania konkretnego Usera dodawała się do innych widocznych dla wszystkich stron na stronie? Czyli innymi słowy żeby po zalogowaniu były widoczne strony dla wszystkich + strona(y) dla konkretnego Usera .
odpowiedz
Robb 932 dni temu:
@gawa: czytałem kiedyś o takim pluginie … ale gdzie i kiedy … ? hmmmm
odpowiedz
Marsel 929 dni temu:
A ja zrobiłem tak:
http://marsel.webbo.pl/wp-login.php
odpowiedz
marsjaninzmarsa 926 dni temu:
@Marsel: Nie ma co, naprawdę ładna… Jestem pod wrażeniem… :D
odpowiedz
gawa 922 dni temu:
@Robb: a może sobie przypomnisz ? szukałem, googlowałem i jakoś nie mogę trafić… kurde… bez problemu robię to w prostym CMSimple … a w moim ulubinym WP - nie mogę… a może jeszcze Ktoś ma jakieś propozycje … ?
odpowiedz
grochu 919 dni temu:
Ja zrobiłem tak: http://grochu.eu/wp-login.php No i wybrałem plik .png a nie .gif
:)
odpowiedz
BeautyIcon 915 dni temu:
Ciekawy bajer :-)
odpowiedz
Mateusz Puszczyński 787 dni temu:
Tutaj jest jeszcze metoda uzyskania tego samego za pomocą modyfikacji w functions.php. http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/
Jedenasta funkcja od góry. Jest tam zresztą kilka innych przydatnych funkcji.
Pozdrowienia!
odpowiedz
Doctor 652 dni temu:
Dzięki, świetny tutorial, wiedzę z niego będę wykorzystywac dość często :)
A co do loga: nie musi się mieścić w podanych w artykule wymiarach. Rozmiary linka mieszczącego logo można spokojnie ustawiać w css, więc, do powyższego przykładu należy dodać:
h1 a {height: 666px;} (dla loga o szatańskiej wysokości na przykład) ;-)
odpowiedz
Arkadiusz 599 dni temu:
Zrobiłem wszystko jak pokazałeś i nic się nie zmienia . Logo jest to samo co wcześniej.
Oczywiście nowe logo już wrzuciłem na serwer.
W czym może być problem.
Pozdrawiam.
A propos. fajna stronka, trzymaj tak Szymon!
odpowiedz
Piotr 148 dni temu:
Witam,
po ostatniej aktualizacji WP do 3.3 trzeba w pliku .css zamienić:
```
h1 a {
   background: url(login-logo.gif) no-repeat top center;
}
```
na
```
.login h1 a {
   background: url(login-logo.gif) no-repeat top center;
}
```
odpowiedz
1. Szymon Skulimowski 139 dni temu:
  Zgadza się, już poprawiłem kod w artykule. Dzięki za czujność i informację.
  odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron (3)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

Formularz logowania z własnym logo | Blog Manager
[…] Tworząc komercyjną stronę opartą o WordPress często zachodzi potrzeba podmiany logo, które znajduje się na stronie logowania / rejestracji. Chciałbym się z Wami podzielić sposobem na uzyskanie takiego efektu, który jest prosty, „bez-wtyczkowy” i odporny na aktualizacje. (więcej na WP Ninja…) […]
Własne logo na stronie logowania | WordPress'owe tricki i inne porady
[…] w ten sposób nie odkrywam – rozwiązanie jest stare i przedstawione juz niegdyś na stronie wpninja.pl. Pozwole sobie jednak w skrócie opisać co trzeba […]
Kiedy warto zastąpić plik functions.php wtyczką funkcjonalną i jak to zrobić? | WPNinja
[…] post types),dodanymi na potrzeby strony shortcodes,modyfikacjami panelu administracyjnego (np. zmiana logo na stronie logowania),własnymi taksonomiami.Co pozostawić w pliku functions.php?definicje rozmiarów […]