publikacja: 5 października 2009, autor: , komentarzy 41 https://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:

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