5
1615

Hogyan készíts egyedi belépő felületet WordPressre?

A wordpressben található belépő felület nagyon könnyen testre szabható. A cikkben szereplő funkció, egy saját css fájlt ad a login oldalra, amivel felülírjuk az eredeti stílust. Így egyéni ízlésünknek megfelelően alakíthatjuk át a wordpress login oldalát.

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.

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!

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.

custom-login mappa

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.

/* Custom login */

html { }
h1 a { }

body.login { }
.login p#backtoblog a:link, .login p#backtoblog a:visited { }
.login p#backtoblog a:hover, .login p#backtoblog a:active { }
#backtoblog { }

form { }
form:hover { }
label { }
#nav { }
.login #nav a { }
input.button-primary, button.button-primary, a.button-primary { }
input.button-primary:active, button.button-primary:active, a.button-primary:active { }

.updated, .login .message { }

#login_error, .message { }

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

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.

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.

A szerző:

A CodeArt 2009-ben alakult és azóta gyűjt inspiráló cikkeket és publikál design és webfejlesztés témában érdekes és hasznos leírásokat.

29 Hozzászólás Hozzászólások hírcsatorna

  1. badly 2011.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. :)

  2. codeart 2011.02.11. 17:51

    Köszi a plusz infókat, örülök, hogy tetszik a leírás.

  3. Udvi 2011.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.

  4. codeart 2011.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.

  5. Udvi 2011.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:

    <a>Elfelejtett jelszó</a>

    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.

  6. Udvi 2011.03.01. 21:58

    Sajnos a code elem nem működött. Próbálom másképp:

    Elfelejtett jelszó

  7. Udvi 2011.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.

  8. codeart 2011.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.

  9. Udvi 2011.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.

  10. codeart 2011.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. :)

  11. Udvi 2011.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).

  12. John 2011.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!

  13. codeart 2011.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.

  14. Anikó 2011.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!

  15. codeart 2011.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!

  16. Anikó 2011.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!

  17. codeart 2011.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.

  18. Anikó 2011.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ó

  19. Tamás 2011.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 :-)

  20. codeart 2011.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.

    html {
    background: url(images/backgroundbej.png) repeat top left;
    }

    Ha mégsem menne adj egy linket és megnézzük mi a probléma.

  21. Ymel 2011.05.02. 06:52

    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. :(

  22. codeart 2011.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.

  23. urbanheroes 2011.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 2011.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.

  24. Gabor 2012.03.26. 11:33

    Üdv.
    Lehet az én sablonom functions-ával van a gond, de nekem sintax errort dob ki az oldal, ha a cikk elején a kódot betszem az aljára. Ha a ?php-s részt lecserélem, olyan formára, amit elfogad és nem ir ki hibát, akkor viszont nem történik semmi. maad a régi belépős oldal. Mi a probléma?

    • codeart 2012.05.01. 09:27

      Szia,

      A functions.php legvégére tetted? A ?> tag után?

  25. mysite 2012.06.15. 11:34

    ez már a 3.4-es verziónál nem megy, ez alatt(3.3, 3.2, stb.) simán működött minden

  26. mysite 2012.06.15. 12:57

    Na ez nem megy frissítés után…

  27. mysite 2012.06.15. 12:58
    function change_wp_login_url() {
    echo bloginfo('url');
    }
    add_filter('login_headerurl', 'change_wp_login_url');

    Na ez nem megy frissítés után…

Mond el a véleményed

A következő HTML tag-ek és tulajdonságok használata engedélyezett:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Dizájn újdonságok, Wordpress hírek! Iratkozz fel!

E-mail címedet bizalmasan kezeljük! Adatvédelmi Nyilatkozat