publikacja: 5 października 2009, autor: , komentarze 43 http://wpninja.pl/artykuly/formularz-logowania-z-wlasnym-logo/

Formularz logowania z własnym 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

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 310×70 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 :-).

tagi:

Komentarze

  1. Kapsel 7 lat 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
  2. Kapsel 7 lat 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
  3. Madzia 7 lat temu:

    Szkoda tylko Kaspel, że został jeszcze alt i link do wordpressa.

    odpowiedz
  4. Lemony. 7 lat temu:

    A propos. Jak to można zmienić?

    odpowiedz
  5. Nomex 7 lat 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
  6. Nomex 7 lat temu:

    Widzę, że coś tu opcja kodu nie działa, prosiłbym o edycję i poprawienie…

    odpowiedz
  7. palmiak 7 lat 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
  8. Szymon Skulimowski 7 lat 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
  9. SpeX 7 lat 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
  10. Kapsel 7 lat 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
  11. zonk 7 lat temu:

    a tu tak … lubie tą stronę http://www.polandbowling.eu/wp-login.php

    odpowiedz
  12. Lemony. 7 lat temu:

    Czy da się zrobić 3 kolumny z dwóch? Magicznym sposobem?

    odpowiedz
  13. Marian 7 lat 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
  14. Marian 7 lat 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
  15. Marches 7 lat temu:

    Ciekawy art, skorzystałem choć pod operą jakoś dziwnie mi się wyświetla.

    odpowiedz
  16. marsjaninzmarsa 7 lat 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
  17. gawa 7 lat 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
  18. Robb 7 lat temu:

    @gawa: czytałem kiedyś o takim pluginie … ale gdzie i kiedy … ? hmmmm

    odpowiedz
  19. Marsel 7 lat temu:

    A ja zrobiłem tak:
    http://marsel.webbo.pl/wp-login.php

    odpowiedz
  20. marsjaninzmarsa 7 lat temu:

    @Marsel: Nie ma co, naprawdę ładna… Jestem pod wrażeniem… :D

    odpowiedz
  21. gawa 7 lat 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
  22. grochu 7 lat temu:

    Ja zrobiłem tak: http://grochu.eu/wp-login.php No i wybrałem plik .png a nie .gif
    :)

    odpowiedz
  23. BeautyIcon 7 lat temu:

    Ciekawy bajer :-)

    odpowiedz
  24. Mateusz Puszczyński 7 lat 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
  25. Doctor 6 lat 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
  26. Arkadiusz 6 lat 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
  27. Piotr 5 lat 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 5 lat temu:

      Zgadza się, już poprawiłem kod w artykule. Dzięki za czujność i informację.

      odpowiedz
  28. Patrycjusz 4 lata temu:

    Po wprowadzeniu powyższych kodów do plików na stronie logowania wypluwania mi taki taki kod:

    Warning: Cannot modify header information - headers already sent by (output started at /katalog_na_serwerze/nazwa_strony/wp-content/themes/katalog-theme/functions.php:67) in /katalog_na_serwerze/nazwa_strony/wp-login.php on line 368

    oraz nie można się zalogować do panelu….

    Jak można to poprawić? najnowsza wersja wp 3.5.1

    odpowiedz
    1. Piotr 4 lata temu:

      Może być sytuacja, ze w pliku function.php masz funkcje odpowiedzialną już za taka podmiankę. Sprawdź sobie w Wygląd -> Opcje Szablonu (piszę z głowy) lub problem z domkniętymi znacznikami . Powinieneś poszukać pod tym kątem. http://wordpress.org/support/topic/warning-cannot-modify-header-information-at-wp-loginphp

      odpowiedz
    2. Patrycjusz 4 lata temu:

      Dzięki,
      Robię swój szablon, możliwe, że jakieś funkcje ze sobą nie współgrają. Usunąłem fragment odpowiedzialny za zmianę wyglądu logowania i mogę się zalogować. Ewidentnie problem u mnie jest z moim functions.php

      odpowiedz
    3. Piotr 4 lata temu:

      Sprawdź czy masz dobrze zakończone znaczki php, czy nie ma gdzieś niepotrzebnych spacji czy linebreaków. Problem też może leżeć w pliku config.php, niekoniecznie w function.php.

      odpowiedz
  29. Marian 4 lata temu:

    Ja znam najszybszy sposób. Wtyczki-dodaj nową i wpisujesz „wp login”

    odpowiedz
  30. Paweł Protaś 3 lata temu:

    Dzięki za wpis. Akurat to mi było potrzebne, aby uchronić się przed ponownym zmienianiem kodu w pliku wp-login.php podczas aktualizacji WordPressa. Zastosowałem i działa. Jednie mi nie działało, gdy użyłem kodu w pliku functions.php w motywie potomym. Skorzystałem z funkcji get_bloginfo(‚stylesheet_directory’) i wstawiło mi właściwy link do pliku login.css umieszczonego w katalogu motywu potomnego.

    odpowiedz
  31. Krzysiekn 3 lata temu:

    Moim sposobem jest zainstalowanie wtyczki „Theme My Login” która tworzy stronę domena.pl/login i tam się logujemy; przykład u mnie http://blog.sportplus.pl/login

    odpowiedz
  32. radek 3 lata temu:

    Witam,

    A może mi ktoś powiedzieć jak zmienić adres logowania? Tak, żeby zamiast domena/wp-login było domena/login? Kolejnej wtyczki, jak u Krzysiekn, wolałbym uniknąć

    Pozdrawiam

    odpowiedz
    1. Krzysiekn 3 lata temu:

      Heh, wtyczka „Theme My Login”. Polecam. Potem aby ten wp-login.php nie był dostępny możesz zmienić chmod :). Pozdrawiam.

      odpowiedz
    2. Szymon Skulimowski 3 lata temu:

      Od WordPressa w wersji 3.4 można też korzystać z poniższych odnośników (wszystkie kierują do formularza logowania / panelu administracyjnego):

      http://wpninja.pl/admin/
      http://wpninja.pl/login/
      http://wpninja.pl/dashboard/
      odpowiedz
  33. Janek 2 lata temu:

    Jak moge zmienic wymiary dostepne dla wgranego przeze mnie obrazka? Obecnie scielo mi go do wymiarow loga „W” (wordpressa)

    odpowiedz
    1. Szymon Skulimowski 2 lata temu:

      Trzeba pobawić się nieco stylami CSS. Dla obecnej wersji trzeba nadpisać standardowe style w poniższy sposób:

      -webkit-background-size: auto;
      background-size: auto;
      width: auto;
      odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

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

  1. 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…) […]

  2. 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 […]

  3. 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 […]