Na, most lett elegem belőle! Puszilgatok néhány WordPress CMS rendszerel készült honlapot, és amikor az admin felületre belépek, akkor a bejelentkezési képernyő szinte mindig így néz ki:

Ez nem is lenne olyan nagy baj, hiszen kellemes felület, normális logó. Igen ám, de mi van akkor, ha több oldalt kezel valaki, egy beállítást több oldalon is módosítania kell? Egy idő után belekeveredik, mint macska a házicérnába, hogy melyik oldalra is lépne be?

Jó lenne, ha – annak ellenére, hogy az asszony éppen megrovóan rászólt, és negédes mosollyal történt válaszadás után visszafordulva a képernyő felé – ránézéssel is látható lenne, hogy éppen hol is tart az ember fia a munkájában.

Nem utolsósorban arra is kell gondolnunk, hogy a felhasználók a regisztráció során ezzel a képernyővel találkoznak, és nem lenne nagy baj, ha itt már találkoznának a saját logóval, ezzel is egyértelműsítve, hogy kinek az oldalára is szeretnének regisztrálni. (És nagyon jól tudjuk, hogy az első benyomás nagyon meghatározó az interneten böngésző látogatók számára.)

A saját logók elhelyezésére többféle bővítmény (plugin) létezik, de ezen bővítmények közös jellemzője, hogy más egyéb funkciókat is meg lehet valósítani velük, és csak másodlagos szolgáltatásuk a bejelentkezési képernyő logójának cserélése.

Minek erőforrásokat pazarolni, amikor egyszerűbben is meg tudjuk oldani a feladatot?

1. Céges logónkból, vagy bármilyen tetszőleges képből, szövegből, ezek kombinációjából alkossuk meg azt a képet, amelyet szeretnénk saját logóként viszontlátni a bejelentkező felületen.

Az ajánlott képméret: 310 x 60 pixel

310 pixel szélességű a jelenlegi bejelentkezési űrlap szélessége, és ezzel az eljárással bármilyen szélességű kép elhelyezése a bejelentkezési mező (admin) vonalától kezdődik.

A 60-80 pixel magasságot nem érdemes átlépni, mert, ha nagyon magas képet választunk, akkor az egész felület alja letolódik, és görgetni kell a bejelentkező oldalt a belépés során. (Ne okozzunk kényelmetlenséget a látogatóknak!)

Ajánlott kiterjesztés (formátum): .gif, .png, .jpg (kis méretűek, webes megjelenítéshez optimalizáltak – példánkban .gif kiterjesztést mutatunk be)

2. Az 1. pont szerinti képet custom-login-logo.gif néven mentjük el. (Vagy – értelemszerűen – custom-login-logo.jpg, vagy custom-login-logo.png néven stb.)

3. FTP kapcsolattal az elmentett képet bemásoljuk a /wp-content/themes/sajat-tema/images könyvtárba. (Ha nem lenne a saját sablonunkban images könyvtár, akkor hozzuk létre előbb, majd úgy másoljuk be a fájlunkat.)

Amennyiben a sablonunknak új verziója jelenne meg, és frissítünk, akkor sem fogja érinteni ez a változtatás a munkánkat, még ha el is felejtettük régen, hogy miként is szegeltük be az új bejelentkezési logót.

4. Ha már úgyis az FTP programunkkal a sablonunkban csámborgunk, akkor töltsük le a sablon könyvtárában lévő functions.php fájlt a saját gépünkre,mert ezt kell egy kicsit szerkeszteni. (Nem betojni! Teljesen egyszerű, nem fog fájni! Csak egy szövegszerkesztés az egész!)

5. Csináljunk a letöltött functions.php fájlról egy másolatot; ha mégis sikerülne elcseszni a szerkesztésünket, akkor egyszerűen a másolatot visszatesszük az eredeti helyére, amíg eredményesek nem leszünk az átalakításban.

6. Ne merészeljen senki – sem most, sem később – Word, WordPad, Notepad és hasonló szörnyszüleményeket használni a szerkesztésre, mert nagy az esélye, hogy nem jár sikerrel (ezek olyan saját, nem szabványos vezérlőkaraktereket használnak, hogy a honlapunk még egy cikk írásától is megáll, mint a jancsiszög)!

Ajánljuk az ingyenes, magyarul beszélő, több funkcióra képes PSPad, vagy Notepad++ programok használatát. Bármelyik is kerül használatra, arra ügyeljünk, hogy a szerkesztés és a mentés UTF8 – Boom nélkül történjék! (Ettől sem becsinálni: automatikusan a szerkesztésre megnyitott fájl formátumára áll a szerkesztő, de a mentés előtt a felső sorban lévő ablakban nem árt ellenőrinzni – magyarul van odaírva -, hogy ezekkel a beállításokkal történjék ténylegesen a mentés.

7. Másoljuk ki az alábbi rövid kódot innen (egérrel kijelölés, majd Ctrl-C billentyűk):

function my_custom_login_logo() {
echo ’<style type=”text/css”>
h1 a { background-image:url(’.get_bloginfo(’template_directory’).’/images/custom-login-logo.gif) !important; }
</style>’;
}

add_action(’login_head’, ’my_custom_login_logo’);

 

8. Másoljuk be a functions.php fájlba az előző kódrészletet; legjobban tesszük, ha a legvégére illesztjük, abból nem lesz nagy baj.

a.) A szövegszerkesztővel szerkesztésre megnyitjuk a fájlt

b.) elmegyünk a kódok legaljára, az utolsó karakter után nyomunk egy Enter billentyűt, majd a Ctrl-V billentyűvel bemásoljuk a kódot

c.) mentjük a munkánkat

9. FTP-vel ismét felmegyünk a tárhelyünkre, a régi fuctions.php fájlt nevezzük át functions-regi.php névre, és másoljuk fel az előbb szerkesztett és elmentett functions.php fájlt.

10. A böngészővel ellenőrizzük a munkánkat, írjuk be a http://www.oldalunk-neve.tld/wp-login.php-t a böngészőnkbe, és nézzük meg az eredményt.

Nem kell aggódni, ha nem látjuk az új logót: frissítsük az oldalt, és máris látni fogjuk!

Nálam ilyen lett a logó annál az oldalnál, amit éppen építgetek: