Stiu ca pe multi dintre voi va enerveaza pagina clasica de login din wordpress si faptul ca daca dai click pe logo te redictioneaza pe wordpress.org. Mai jos aveti un tutorial simplu despre cum puteti personaliza aceasta pagina fara a folosi un plugin/modul. Aveti nevoie de un program pentru editat fisiere cum ar fi Notepad++ si de un program FTP client pentru transfer fisiere gen FileZilla.
1. Mai intai creati un folder nou numit login in folderul unde se afla fisierele temei. Daca wordpress este instalat in root atunci calea corecta dupa creare va fi /public_html/wp-content/themes/nume-tema/login.
– creati un fisier css cu numele de custom_login_styles.css si adaugati-l in folderul login.
– urcati in acelasi folder imaginea logo.png care doriti sa apara in pagina de logare.
2. Deschideti fisierul temei functions.php si adaugati urmatorul cod:
[php]
function my_loginlogo() {
echo ‘<style type="text/css">
h1 a {
background-image: url(‘ . get_template_directory_uri() . ‘/login/logo.png) !important;
}
</style>’;
}
add_action(‘login_head’, ‘my_loginlogo’);
function my_loginURL() {
return ‘adresa-url-blog’;
}
add_filter(‘login_headerurl’, ‘my_loginURL’);
function my_loginURLtext() {
return ‘text nume blog’;
}
add_filter(‘login_headertitle’, ‘my_loginURLtext’);
function my_logincustomCSSfile() {
wp_enqueue_style(‘login-styles’, get_template_directory_uri() . ‘/login/custom_login_styles.css’);
}
add_action(‘login_enqueue_scripts’, ‘my_logincustomCSSfile’);
[/php]
Nota!
Din codul de mai sus inlocuiti partea adresa-url-blog cu adresa url a blogului vostru si partea text nume blog cu numele blogului.
3 Deschideti fisierul login_styles.css si adaugati urmatorul cod:
[css]
/* Change background color and font family */
body {
background: #f8fafa;
font-family: Arial,Verdana,sans-serif;
}
/* Change Width and Height of Logo Image + Add Custom Image File */
.login h1 a {
background-image: url(logo.png);
width: 213px;
height: 97px;
background-size: 213px 97px;
}
/* Add a few changes to the color and style of form itself */
.login label {
color: #454545;
display: block;
margin-bottom: 1em;
font-weight: bold;
}
.login form .input {
font-weight: normal;
}
.login #backtoblog a, .login #nav a {
color: #4da28f;
}
.wp-core-ui .button-primary {
background: #4da28f;
}
[/css]
Nota!
Daca imaginea cu logo nu este la dimensiunea la care ati dorit, din codul de mai sus puteti sa setati dimensiunea la logo modificand partea cu:
background-image: url(logo.png); width: 213px; height: 97px; background-size: 213px 97px;
Rezultatul:
Daca intampinati greutati lasati un comentariu si va ajut cu instalarea.