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:

1. nie obciążać WordPressa niepotrzebnymi wtyczkami,

2. nie trzeba było aktualizować odpowiednich plików po każdej aktualizacji skryptu,

3. 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 :-).

#logowanie