Ukoliko za klijenta radite web stranicu koja zahtjeva registraciju korisnika, ili ako imate blog na kojem piše više autora i/ili samo registrirani korisnici mogu ostavljati komentare, zasigurno ste razmišljali o tome da li i kako promjeniti izgled zadane WordPress login stranice. Slijede savjeti kako to učiniti i to bez korištenja pluginova i mijenjanja WordPress jezgre. Bez brige, opisani koraci nisu prekomplicirani, ali istovremeno nisu za totalne početnike. Pa krenimo.
Kako dodati personalizirani tekst iznad WP login boxa ?
Na slici je defaultni izgled login stranice, odnosno login box u koji se upisiju login podaci. Ne izgleda baš atraktivno i originalno, zar ne?
Ok,sad ćemo dodati traku s personaliziranim pozdravom/porukom za vaše korisnike.
Klikni na sliku za uvećani prikaz
Prije ikakvog dodavanja koda, nadamo se da ste usvojili praksu korištenja tzv. Child thema. U slučaju da ne znate što su i čemu iste služe , pročitajte ovaj članak iz WordPress codexa (na engleskom jeziku) o tome kako napraviti child temu.
Najjači argument za korištenje child tema je činjenica da sve promjene u funkcionalnostima i izgledu korištene teme budu odrađene upravo u child temi te se eventualnom nadogradnjom teme ne gube promjene u kodu.
Nakon što ste napravili svoju Child temu, otvorite functions.php datoteku u editoru teksta poput Notepad++ i u njega zalijepite slijedeći kod:
function wps_login_message( $message ) {
if ( empty($message) ){
return "
Dobro došli! Ovdje upišite svoju poruku.
";
} else {
return $message;
}
}
add_filter( 'login_message', 'wps_login_message' );
}
[clear]
Vaš bi login box sada trebao izgledati otprilike ovako.
Naravno, za svoju, personaliziranu poruku, zamjenite Dobro došli! Ovdje upišite svoju poruku. s tekstom po želji.
Ova traka može sadržavati riječi dobrodošlice ili bitne informacije prije logiranja u web stranicu. Kako god, budite kreativni. Svi se volimo osjećati dobrodošli, zar ne?
Klikni na sliku za uvećani prikaz
Kako promjeniti logo iznad WP login boxa ?
Uz dužno poštovanje WordPressu, vrlo ćete vjerojatno ćete htjeti dodati svoj logo te ga linkati na svoju stranicu (umjesto defaultnog linka prema WordPress.org-u). Kako biste promjenili zadani WordPress logo dodajte slijedeći kod u functions.php kod child teme:
[clear]
[clear]
function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/login_logo.png);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
[clear]
Dakle, u images folder vaše teme dodajte željeni logo i nazovite ga login_logo.png. Preporučujemo korištenje loga u png formatu jer on podržava prozirnost.
Sada još treba promjeniti kamo je vaš logo linkan. Pretpostavljam da će to biti link na Naslovnicu vaše web stranice. Ponovno u functions.php child teme dodajemo slijedeće:
function my_login_logo_url_title() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
[clear]
Eto, sada imamo personalizirani tekst u traci iznad login boxa, svoj logo i custom link za isti. Ukoliko ste dodali logo manjih dimenzija (defaultni WP logo je dimenzija 80x80px) onda ste u principu gotovi. No, ukoliko želite koristiti logo većih dimenzija od zadane, ili pravokutni logo, na primjer dimenzija 300×80, onda ćete morati izvršiti minimalne promjene i dodati nekoliko CSS pravila.
Kako dodati CSS pravila za izgled WP login boxa (ili cijele stranice) ?
Još jednom ponavljam, ne želimo mjenjati datoteke koje se mjenjaju redovitim nadogradnjama (WordPress jezgra i parent tema). Zato ćemo u functions.php child teme dodati kod pomoću kojeg ćemo moći koristiti custom CSS pravila. Možemo koristiti custom CSS datoteku (npr. naziva style-login.css) ili potrebna pravila dodati direktno u style.css datoteku child teme. U ovom slučaju, koristimo kod za korištenje CSS pravila dodanih u style-login.css (nalazi se unutar foldera child teme). U functions.php dodajemo:
function my_login_stylesheet() { ?>
<link rel="stylesheet" id="custom_wp_admin_css" href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/style-login.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
[clear]
Sada vam preostaje kreirati CSS pravila za izgled vaše login stranice. Za potrebe ovog članka promjenio sam pozadinsku boju login stranice u crno.
U style-login.css sam dodao slijedeće:
body.login {
background: #000 !important;
}
Klikni na sliku za uvećani prikaz
[clear]
HTML struktura WordPress login stranice
Nadam se da će vam slijedeća ilustracija dobro doći prilikom kreiranja CSS pravila za personaliziranje izgleda login stranice.
Slika: ostraining.com
