A wordpress bejelentkező felülete nagyon könnyen testre szabható. A cikkben szereplő funkció egy saját css fájlt ad a login oldalra, amivel felüldefiniálhatjuk a wp eredeti stílusát. Így egyéni ízlésünknek megfelelően alakíthatjuk át a belépő oldalunkat.
A dolog azért is remek mert az eredeti css-hez nem nyúlunk, így a wordpress frissítésénél nem vész el az átalakítás.
Cikkünk a hirdetés után folytatódik!
A functions.php szerkesztése
A sablonod könyvtárában lennie kell egy functions.php fájlnak, másold a következő kódrészletet a végére. Ha véletlen mégsem találnál ilyen nevű fájlt, hozz létre egyet és mentsd el ezzel a névvel.
Ne feledd, ne hagyj üres helyet a php nyitó és záró tegek előtt és után!
1 2 3 4 5 6 | <?php function custom_login() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login'); ?> |
Ha esetleg máshova szeretnéd menteni a css-t, módosítsd az elérési utat.
A sablonfájlok szerkesztése
A következő dolog, hogy létrehozzunk egy helyet a css fájlnak és a képeknek. A sablon mappájában hozz létre egy custom-login mappát, ide fogjuk menteni a bejelentkező oldallal kapcsolatos fájlokat.
Szükség lesz még egy custom-login.css stíluslapra is, melyet a nemrég létrehozott mappába mentsünk el.
CSS hozzáadása
Ezek után, ha a bejelentkezési oldalt meglátogatjuk, a custom-login.css-t fogja minden alkalommal betölteni a wordpress. Tehát azok a szabályok amiket itt definiálunk, felülírják a wordpress eredeti stílusait.
A képi elemeket tároljuk a custom-login mappába. Ha viszont a sablonunk képei közül kell használnunk egyet, akkor onnan is hívjuk meg, mivel azt már egyszer letöltötte a böngésző. pl.
body {background: #e8e8e8 url(../images/custom-login-body.jpg) repeat-x 0 0;}
Összegyűjtöttem a login oldalon használt osztályokat, ezeket nyugodtan lehet formázgatni ízlés szerint. Azt hiszem mind benne van, de ha találnátok olyat ami nincs, jelezzétek és kiegészítem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* Egyedi belépőfelület stílusa */ html { } /* Háttér. Ezt használd a body helyett! */ h1 a { } /* Logó */ body.login { } /* Felső sáv */ .login p#backtoblog a:link, .login p#backtoblog a:visited { } /* Link a felső sávban */ .login p#backtoblog a:hover, .login p#backtoblog a:active { } /* Hover link a felső sávban */ #backtoblog { } form { } form:hover { } label { } #nav { } .login #nav a { } input.button-primary, button.button-primary, a.button-primary { } /* Submit gomb */ input.button-primary:active, button.button-primary:active, a.button-primary:active { } /* Submit gomb aktív */ .updated, .login .message { } /* Figyelmeztető ablak */ #login_error, .message { } /* Hibaüzenet ablak */ |
A logó
A logót, mint láthattátok a css-ben ki tudjuk cserélni. A következő két funkció az url-t (ami alapesetben http://wordpress.org) cseréli le és a link title tegjét, ami pedig eredetileg az oldal leírása.
Hasonlóan a fenti funkcióhoz ezt is a functions.php-ba kell illeszteni.
Az url lecserélése a saját site-unk címére
1 2 3 4 5 6 | <?php function change_wp_login_url() { echo bloginfo('url'); } add_filter('login_headerurl', 'change_wp_login_url'); ?> |
A title lecserélése az oldalunk nevére.
1 2 3 4 5 6 | <?php function change_wp_login_title() { echo get_option('blogname'); } add_filter('login_headertitle', 'change_wp_login_title'); ?> |
Zárszó
Ha gondolod mutasd meg egy hozzászólásban, milyenre sikerült a saját belépő felületed.
badly
11.02.11
13:40
Én még belevettem a #loginform input -ot is és adtam neki betűszínt
Továbbá néhány észrevétel a #backtoblog, az input.button-primary csak a background tulajdonsággal műxik.
De amúgy tök jó bejegyzés, ez alapján csináltam meg az új, készülő céges oldalunk belépőjét. :)
codee47
11.02.11
17:51
Köszi a plusz infókat, örülök, hogy tetszik a leírás.
Udvi
11.03.01
18:47
Szia!
Nagyon jó a cikk. Viszont az “Elfelejtett jelszó” színét nem tudom megváltoztatni. 3.1-es WP-t használok és forráskód alapján “#login p#nav a” a jelölője ennek a résznek és a “color” kivételével minden tulajdonságát lehet módosítani a szövegnek. Hol lehetne a színét változtatni, mert itt nem érvényesül a beállított színkód?
Előre is köszönöm.
codeart
11.03.01
20:15
Szia, nem jól használod. A login egy osztály, tehát ne id-ként azonosítsd.
A pontos css bejegyzés ez:
.login #nav a { }
.login #nav a:hover { }
De ha jobban megnézed benne van a cikkben is, a css résznél. Remélem így már sikerül.
Udvi
11.03.01
21:51
Először is tudnod kell, hogy elsősorban az alap login.css fájl (WP 3.1) tartalmát másoltam át a custom-login.css-be és ebben módosítottam az értékeket, néhol magukat a jelölőket is a cikk alapján.
Látom, hogy a cikkben osztályként van jelezve, így is próbáltam és sikertelen volt. Egyedi azonosítóval is működnie kellene, mert a forráskódnak ez a felépítése:
Elfelejtett jelszó
A másik dolog pedig az, hogy ugyanennél a jelölőnél szerepel nekem egy text-decoration:none, ami szépen eltűnteti az aláhúzást és egy text-shadow:none, ami pedig leveszi az alapértelmezett árnyékot.
Ráadásul a szöveg színe alapértelmezettként kék, hover színe pedig narancs és erre semmi utalást nem látok az eredeti login.css kódban. És ha nem itt van, akkor gyanúm szerint nem is lehet módosítani a custom-login.css-el.
Udvi
11.03.01
21:58
Sajnos a code elem nem működött. Próbálom másképp:
Elfelejtett jelszó
Udvi
11.03.01
22:03
Elnézést, töröljétek az előző hozzászólást. A lényeg amit akartam szemléltetni, hogy a body elemnek class attribútuma van, de ezen belül van egy div elem is id attribútummal, aminek az értéke “login”. És ezen belül van maga a “nav” azonosítójú p elem. Tehát a #login p#nav a jelölő is megállja a helyét.
codee47
11.03.01
22:21
A body osztálya felsőbbrendű, mivel abban van a login azonosítóval ellátott div, ezért alkalmazza azt. Valamint ha megnézed a forráskódot a custom-login.css fut le utoljára, ezért az lesz a “vezér” stíluslap. Így a cikkben írt megoldásnak működnie kell, mivel nálam is működik (feltéve ha véletlen ki nem hagytál vagy másképp nem csináltál valamit).
Ha mégsem megy, valami egyedi probléma lehet pl a sablon vagy esetleg valamelyik plugin miatt.
Udvi
11.03.02
13:40
A következő oldalról lenne szó: http://www.eperjesetterem.hu/wp-admin. Ha megnézed a forráskódot láthatod hogy az általad is használt jelölőt használom és a jelölőn belüli tulajdonságok érvényesülnek is, csak a color nem.
Azonban feltűnt most, hogy a login.css mellett betölt egy colors-fresh.css is, ami gyári wp stíluslap, nem a használt sablonban lévő. Gyanúm szerint ez írja felül nálam a custom-login.css szín tulajdonságát. Hogy tudnám elérni, hogy ez a stíluslap ne töltsön be? Köszönöm.
Ui: A 3.1 verziót pedig azért hangoztattam többször is, mert lehet itt is változtattak dolgokat és ez az oka, hogy nekem nem működik, míg neked igen egy “régebbi” verzióval.
codeart
11.03.02
19:41
Na, így már világos a dolog. A colors-fresh.css-t ne bántsd mivel kihatással lenne más dolgokra is.
Így használd a color beállítást:
color: #000000 !important;
Az !important itt a lényeg, ez dönti el, hogy egy ugyanolyan “jelölő” használatakor melyiket alkalmazza a böngésző. Magyarul azt jelenti fontos, jelentős. Tehát, mivel a másik css-nél használva van az !important az lesz a “fontosabb”.
Remélem érthetően fogalmaztam. Így már tuti jó lesz. :)
Udvi
11.03.03
10:14
Igen, teljesen világos, amit írsz. Köszönöm a segítséget.
A css kódban több helyen oda kell figyelni mit írunk – ld. korábban említett background tulajdonságot -, mert elmaradhat a “felülírás”. Ilyen lehet még a margin/padding vagy margin-x/padding-x megválasztása, függ attól mi szerepel az eredeti kódban (login.css, colors-fresh.css).
John
11.03.11
18:50
Sziasztok!
Ezt a példa css-t valahonnan nem lehetne letölteni, ahol csak át kellene írni a képek nevét? KIcsit hülye vagyok Css-ből :( előre is köszi!
codee47
11.03.15
10:15
A belépő felület css fájljait itt találod: wp-admin/css/
Viszont ha ezeket szerkeszted egy esetleges frissítésnél a módosításaid el fognak veszni. Ezért érdemes átmásolni a fent említett fájlba azokat a részeket amiket át szeretnél alakítani.
Anikó
11.03.16
18:49
Szia!
Nagyon jó az oldal!
Teljesen kezdő vagyok és egészen jól értem amit írsz:)
Egy gondom van, hogy a logó nem jelenik meg a bejelentkező oldalon. A custom-login mappában csináltam egy images mappát amibe belementett a logót, majd css be átírtam. Én is az eredeti login.css-t írtam át, mert azt a részt annyira nem értem (css hozzáadása) amikor a css-t kéne kitöltenem. Szóval már az elején a logónál elakadtam:( Tudnál segíteni alap nyelven, hogy mit rontottam el? Nagyon hálás lennék!
codee47
11.03.17
14:48
Ha az eredeti fájlt módosítottad, akkor absolute elérési utat kellene megadnod a képhez. Tehát “http://www.valami.hu/wp-content/themes/…”
Remélem így már sikerül!
Anikó
11.03.17
15:08
Szia!
Ahogy írod úgy csináltam, mert én is erre gondoltam, de hiába írom át nem jelenik meg. A forrást visszaolvasva viszont azt látom, hogy a régi elérés jelenik meg. Mintha valami az enyémet felül írná. A css-ben viszont az van amit én írtam. Egyéb módosításokat csinálok css-ben pl. szín, azokat megjeleníti. És az url és title lecserélését is megcsinálta. Szóval nem tudom mi lehet a gond. A másik kérdésem az lenne, hogy a css fájlokat te miben szoktad szerkeszteni?
így írtam át: h1 a{background: url(‘http://www.ingyenjos.hu/wp-content/themes/miscellany/custom-login/images/logo.gif‘)
Köszönöm, hogy segítesz!
codee47
11.03.17
20:16
Bocs, azt hittem át sem másoltad az eredeti fájlt a sablon könyvtárába, most nézem csak, hogy igen. Tehát így próbálkozz:
custom-login/images/logo.gif
Erre az eredeti logó fog bejönni, ezt kellene felülírni a tieddel (természetesen a sablon könyvtárában lévő custom-login/images/logo.gif-et).
Fájlszerkesztésre én a Notepad++-t használom.
Anikó
11.03.18
20:49
Szia!
Végre rájöttem mi a bibi..
Rosszul lett lementve a logo típusa. Mind jpg és gif ben is, txt ként kezelte a wordpress és nem images ként. Csak Total Commanderben ezt nem fedeztem fel, csak a tárhelyemen, amikor nézelődtem, hogy mi lehet a baj. Azért nagyon köszönöm a segítséget! Anikó
Tamás
11.04.06
19:41
Szia!
Minden elismerésem a Tied :-)
Bemásoltam a kódrészletet a functions.php-be, megcsináltam a custom-login könyvtárat, abban egy images könyvtárat a képeknek, ebbe feltettem egy képet (backgroundbej.png, 4.43 Kb méretű)háttérnek, megcsináltam a custom-login.css file-t, belemásoltam az általad leírt kódot, beleillesztettem a háttérképnek valót, de nem történik semmi… minden olyan mint volt.
ez a sor az amibe beleírtam a képet:
html {custom-login/images/backgroundbej.png} /* Háttér. Ezt használd a body helyett! */
Mi lehet a hiba szerinted?
Előre is köszönöm a segítséget :-)
codeart
11.04.06
20:16
Szia!
Így próbáld meg, a css-nél szükség van a “background” beállításra is.
Ha mégsem menne adj egy linket és megnézzük mi a probléma.
Ymel
11.05.02
06:52
Kedves Codee47!
elnezest, hogy nem a fenti temaban kerdezek, de egyelore nem tudom, hol nezzek utana annak (angol nyelvu oldalakkal kezdtem), hogy hogyan tudom a wp theme-ben ugy valtoztatni a blog cimenek/bevezeto sorainak szinet/betutipusat stb., hogy az a nyitooldalon (mainpage, frontpage?) is lathato legyen. Alkalmaznek plugint (pl. “super edit” vagy “Special Text Boxes” stb), de azok csak a post oldalan mukodnek es nem viszik at az uj tulajdonsagokat a nyito feluletre :( Elnezest, hogy ez nem ide tartozik, de nem tudom, hogy keressek ennek utana. :(
codeart
11.05.23
10:49
Szia!
Css-ben kell állítgatni a színeket, erre fölösleges plugint használni.
Ha adsz egy linket, melyik oldalról is van szó segítek, hogy mit írj a css-be.
urbanheroes
11.10.25
09:20
Szia!
Hogy tudnek ilyen beleptetot kesziteni facebook page like opcioval.Az elv az lenne hogy csak akkor tudnak az oldalra fellepni ha likeoljak a site facebook oldalat.Lattam mar tobb helyen is ilyesmit de sajnos senki se tud megoldast a problemamra.
codeart
11.10.26
19:53
Szia, sajnos nem tudom hogyan lenne megoldható a dolog és hasonló bővítménnyel sem találkoztam eddig. Talán próbálj rákeresni a WordPress plugin-ek között.