WordPress belépő, regisztráló oldal formázása

WordPress bejelentkező felület csinosítása

A WordPress oldalakat a legkönnyebben a belépő felületéről tudjuk megkülönböztetni. Egyfelől, mert az emberek többsége még kicsit se formázza, másfelől pedig nem is törődnek vele. Azonban egy jó minőségű, céges honlap készítésnél nem szabad elfeledkezni róla. Ha kis időt és munkát ráfordítunk, akkor könnyen megoldhatjuk, hogy egyedik legyünk. Így jobb képet alakíthatunk ki weboldalunkról. Régebben olyan trükkök voltak, mint a WordPress logo képének felülírása hasonló méretű képpel. Az eredményt megkaptuk, de minden WordPress motor frissítés alkalmával meg kellett ismételni, így nem jó megoldás. Mivel a sablonunk functions.php fájljához kell nyúlni, így WordPress frissítés után is megmaradnak a módosításaink. (Amíg az alap bejelentkező form stíluselem azonosítóit nem módosítják.)

Szükséges kód

Az kód maga itt van, sima css elemeket használhatunk. Arra kell ügyelnünk:

• Nincsen a sablon alap css-e meghívva, tehát ne számítsunk örökölt értékekre. Azokat a WordPress mag stílusából örökli.
• Nincsenek scriptek sem meghívva a sablonból.
• A felső kettős vesszőt (macskakaparás, idézet jel) cseréljük le a sima egy darabosra, tehát a shift+2 karakterek helyett shift+1 legyen. A kettőssel php kódrészleteket illeszthetünk be, mint ahogy a h1 megadásánál is a sablon url címe.

function custom_login_logo() {
echo "
<style>
/* Logo kep csereje: sablonodban az images mappaban. */
body.login #login h1 a {
background: url('".get_bloginfo('template_directory')."/images/loginkep.jpg') no-repeat scroll center top transparent;
}

/* Hatter szine */
body.login {
background: #FFF; 
}

/* A mezok mogotti resz hatter szine */
.login form {
....
}

/* Gomb formazasa */
input.button-primary, button.button-primary, a.button-primary {
....
}
/* Gomb fole az eger */
input.button-primary:hover, button.button-primary:hover, a.button-primary:hover {
....
}

/* Mezok alatti linkek */
.login #nav a, .login #backtoblog a {
....
}
.login #nav, .login #backtoblog {
....
}
.login form .input, .login input[type='text'] {
....
}
	</style>
	";
}
add_action('login_head', 'custom_login_logo');

Ezzel hozzá is adtuk a szükséges css formázást, mely csak a bejelentkező, jelszó újrakérő és regisztrációs oldalon fog meghívódni. Mehetünk tovább, hiszen még a képen rossz hivatkozás ( www.WordPress.org ) és rossz szöveg van. ( A honlap lelke a WordPress )

function custom_login_header_url($url) {
  return esc_attr( get_bloginfo( 'siteurl' ));
  //return 'http://rotisoft.hu';
}
add_filter( 'login_headerurl', 'custom_login_header_url' );

A fenti kódban természetesen a saját weboldalának az url címét kéri, amit az Admin/Beállítások/Általános részben adott meg. A ‘siteurl’ helyett használható még a ‘wpurl’ vagy a ‘home’ is, kedvünk szerint. Azonban megadhatunk akár egyedi címet is. Ilyenkor a 2. sort töröljük és a 3. sor elejéről a // jeleket is töröljük.

function fb_login_headertitle() {
return esc_attr( get_bloginfo( 'description', 'display' ) );
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );

Most már csak azt a szöveget kell eltüntetnünk, ha a látogató az egeret / kurzort a kép fölé viszi. A fenti kód a honlap leírását jeleníti meg, de használható még a ‘name’, akkor a weboldal nevét fogja megjeleníteni a kis buborékba. ( Szintén Admin/Beállítások/Általános rész. )

Így nézett ki

Az eredeti, könnyen felismerhető

Ilyen lett formázás után

Majd a végeredmény már sokkal jobban illik az oldal megjelenéséhez.

Források:

• WordPress: Functions.php szerkesztése – Saját cikkünk, melyben segítséget nyújtunk a WordPress functions.php fáj módosításához.
• How to build custom WordPress login page (angol) – Forrásanyag egy részlete