Konkretny cel tej porady

W tipsie tym przedstawimy, w jaki sposób podmienić logo oraz dostępne, domyślne odnośniki, tak aby wykonane zmiany były odporne na wszelkiego typu późniejsze, automatyczne aktualizacje skryptu.

Rysunek 1: formularz logowania w standardowym wydaniu.

Przygotowujemy nowe logo

Jak będzie wyglądać nowe logo, którego użyjecie - pozostawiam Wam samym. Teoretycznie powinno spełniać ono jednak pewne warunki. Mianowicie, nie powinno przekraczać 320 pikseli szerokości, gdyż na tyle określony jest element je zawierający (#login).

W praktyce można jednak zamieścić szerszą grafikę, trzeba będzie jednak nadpisać rozmiary rodzica oraz innych związanych z logiem bloków. Wysokość nie jest z góry określona, gdyż zastosowanie wyższego obrazka spowoduje wydłużenie całego panelu logowania.

Zastosowanie rozmiarowo mniejszego logotypu spowoduje automatyczne wycentrowanie go względem nadrzędnego elementu <div>. Reasumując, najszybciej i najbardziej bezpiecznie jest wykonać ten zastępczy element w rozmiarach aktualnego, czyli 310x70 px. Warto zrobić to w jednym z dwóch formatów: PNG lub GIF. Wynik naszej pracy wysyłamy do katalogu aktualnie używanego szablonu (/wp-content/themes/SZABLON/). Możemy go nazwać na przykład wp-signin-logo.png.

Budujemy arkusz stylów

Ponieważ chcemy stworzyć rozwiązanie odporne na aktualizacje, to wszelkiego typu pliki, które w tej poradzie stworzymy, będziemy zapisywać jako nowe, a nie dopisywać lub nadpisywać już istniejących.

W tym samym katalogu, który wykorzystywaliśmy w poprzednim paragrafie, tworzymy arkusz stylów. Nazwijmy go sobie wp-signin-styles.css.

Plik ten należałoby jeszcze stosownie wypełnić kodem, zależnym od położenia logotypu w strukturze dokumentu. Domyslnie wygląda ono tak:

<h1><a href="http://wordpress.org/" title="Oparte na WordPressie">ukryta_treść_odnośnika</a></h1>

Żeby więc podmienić grafikę, musimy stworzony przez nas plik uzupełnić następującym kodem:

h1 a {
 background-image: url('wp-signin-logo.png');
 background-repeat: no-repeat;
 background-position: top center;
 }

Opcjonalnie, możemy także zmusić Wordpress do wyświetlania osobnej grafiki po najechaniu kursorem myszy na logo lub po zaznaczeniu go za pomocą tabulatora.

Wystarczy przygotować drugi obrazek (np. o nazwie wp-signin-logo-hover.png) i wgrać go podobnie jak poprzedni. W pliku CSS dodajemy:

h1 a:hover, h1 a:focus {
 background-image: url('wp-signin-logo-hover.png');
 background-repeat: no-repeat;
 background-position: top center;
 }

Jeżeli w trakcie zamiany obrazków będzie następowało zauważalne przeładowywanie, warto zapoznać się z efektem rollover.