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 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 :-).
Autor artykułu:
Komentarze
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ł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ć ;)
odpowiedzSzkoda tylko Kaspel, że został jeszcze alt i link do wordpressa.
odpowiedzA propos. Jak to można zmienić?
odpowiedzJa 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', 'https://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
odpowiedzWidzę, że coś tu opcja kodu nie działa, prosiłbym o edycję i poprawienie…
odpowiedz@nomex
odpowiedzTwoja 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.
Na życzenie uzupełniłem artykuł o taki bajer (krok bonusowy) :-).
odpowiedzW sprawie uzupełnienie.
odpowiedzCzy znasz jakiś sposób by sytuacjach takich jak ta, gdy gość znacznie modyfikujesz wpis, wymusić ponowne opublikowane go na RSSie?
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!
odpowiedza tu tak … lubie tą stronę http://www.polandbowling.eu/wp-login.php
odpowiedzCzy da się zrobić 3 kolumny z dwóch? Magicznym sposobem?
odpowiedzWitam,
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.
odpowiedzNo 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.
odpowiedzCiekawy art, skorzystałem choć pod operą jakoś dziwnie mi się wyświetla.
odpowiedzFajny sposób, nie wiedziałem, że system szablonów wp jest aż tak elastyczny… :)
odpowiedzI przy okazji podczepiam się pod pytanie @SpeX’a – też chciałem kiedyś uzyskać ten efekt… ;)
A skoro jesteśmy przy temacie logowania…
odpowiedzTo 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 .
@gawa: czytałem kiedyś o takim pluginie … ale gdzie i kiedy … ? hmmmm
odpowiedzA ja zrobiłem tak:
odpowiedzhttp://marsel.webbo.pl/wp-login.php
@Marsel: Nie ma co, naprawdę ładna… Jestem pod wrażeniem… :D
odpowiedz@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 … ?
odpowiedzJa zrobiłem tak: http://grochu.eu/wp-login.php No i wybrałem plik .png a nie .gif
odpowiedz:)
Ciekawy bajer :-)
odpowiedzTutaj 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!
odpowiedzDzię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) ;-)
odpowiedzZrobił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!
odpowiedzWitam,
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; }odpowiedzZgadza się, już poprawiłem kod w artykule. Dzięki za czujność i informację.
odpowiedz[…] 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 […]
odpowiedzPo 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 368oraz nie można się zalogować do panelu….
Jak można to poprawić? najnowsza wersja wp 3.5.1
odpowiedzMoż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. https://wordpress.org/support/topic/warning-cannot-modify-header-information-at-wp-loginphp
odpowiedzDzięki,
odpowiedzRobię 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
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.
odpowiedzJa znam najszybszy sposób. Wtyczki-dodaj nową i wpisujesz „wp login”
odpowiedzDzię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.
odpowiedzMoim 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
odpowiedzWitam,
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
odpowiedzHeh, wtyczka „Theme My Login”. Polecam. Potem aby ten wp-login.php nie był dostępny możesz zmienić chmod :). Pozdrawiam.
odpowiedzOd WordPressa w wersji 3.4 można też korzystać z poniższych odnośników (wszystkie kierują do formularza logowania / panelu administracyjnego):
odpowiedzJak moge zmienic wymiary dostepne dla wgranego przeze mnie obrazka? Obecnie scielo mi go do wymiarow loga „W” (wordpressa)
odpowiedzTrzeba pobawić się nieco stylami CSS. Dla obecnej wersji trzeba nadpisać standardowe style w poniższy sposób:
odpowiedzDodaj własny komentarz
Odnośniki z innych stron
Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:
[…] 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 […]