Cum personalizezi loginul de WordPress

Teoretic e simplu. Schimbi imaginea din wp-admin, modifici usor CSS-ul de admin si gata, ti-ai personalizat pagina de logare in Wordpress. Ce te faci la primul update, cand modificarile fisirelor WordPress sunt rescrise de fisierele noi? Exista o solutie:

Solutia se numeste CSS separat, CSS care sa nu fie rescris la primul update de WordPress. Dar imaginea? Si imaginea o schimbam, doar e adaugata prin CSS.

Exista practic doua variante de a face modificarile:

• fie sub forma de plugin
• fie adaugand instructiuni in functions.php din tema activa

Diferenta intre cele doua variante e ca daca transformam mica functie in plugin va trebui sa accesam altfel fisierele imagine folosite (si nu le vom putea adauga in tema – ca nu pot fi accesate dinamic).

O sa prezint varianta cu function.php

Toate modificarile de CSS trebuie rulate in pagina de login. Un hook bun unde se poate adauga functia ce urmeaza sa fie folosita e login_head

ATENTIE: pagina de login nu ruleaza actionul admin_head ca restul interfetei de administrare

Avem instructiunea

add_action( 'login_head', 'dece_custom_login' );

Ce spune codul de mai sus? Pentru login_head ruleaza functia dece_custom_login. Perfect.

Sa scriem si functia

Fisierul pe care-l vrem in locul logo-ului de WordPress pentru pagina de login trebuie urcat undeva online. Eu l-am plasat tot in folderul temei active, in /images. Pe mai departe il putem accesa cu

<?php bloginfo( 'template_directory' ); ?>/images/logo-login.gif

Mai avem ceva de modificat? Nu neaparat.

Eu spre exemplu pe blog am ales sa modific si culoarea butonului de logare din albastru in rosu. CSS-ul defineste si o imagine cu un gradient dragut de albastru, eu mi-am facut una pe rosu pe care am adaugat-o tot in folderul cu imagini ale temei active, imagina accesabila cu

<?php bloginfo( 'template_directory' ); ?>/images/button-grad.png

Deci functia care se ocupa de modificarile de CSS pe care le-am dorit la deceblog arata cam asa:

function dece_custom_login() { ?> 
	<style type="text/css">
		h1 a { background:url(<?php bloginfo( 'template_directory' ); ?>/images/logo-login.gif) no-repeat 70px 10px; height:75px;}
		#login form .submit input { background: #b83939 url(<?php bloginfo( 'template_directory' ); ?>/images/button-grad.png) repeat-x scroll left top; !important border-color:#b83939; !important }
        .submit .button-primary, #login form .submit input {border-color:#b83939 !important}
		#login form .submit input:hover {border-color:#b83939 !important}
 
	 </style>
<?php  
}

Ce zice CSS-ul de mai sus?

Pune imaginea pe care o vreau eu la 70px distanta de marginea stanga si 10px de cea de sus (ca sa arate centrat), dupa care schimba dimensiunea elementului la 75px (default 67px).

Fa butonul de logare rosu #b83939 si adauga-i imaginea mea ca background.

Codul final este

function dece_custom_login() { ?> 
	<style type="text/css">
		h1 a { background:url(<?php bloginfo( 'template_directory' ); ?>/images/logo-login.gif) no-repeat 70px 10px; height:75px;}
		#login form .submit input { background: #b83939 url(<?php bloginfo( 'template_directory' ); ?>/images/button-grad.png) repeat-x scroll left top; !important border-color:#b83939; !important }
        .submit .button-primary, #login form .submit input {border-color:#b83939 !important}
		#login form .submit input:hover {border-color:#b83939 !important}
 
	 </style>
<?php  
}  
 
add_action( 'login_head', 'dece_custom_login' );

Save functions.php :)

Modificarile vor persista si dupa un update/upgrade de Wordpress in caz ca nu schimbi tema.