Cum poți schimba logo-ul WordPress din formularul de logare

de TutorialeWP | Tips & Tricks | 0 comentarii

Am scris într-un tutorial mai vechi Personalizarea formularului de logare – Custom Login Page Customizer cum se poate schimba întreaga interfață de logare folosind un modul isteț. Însă dacă nu vrei să-ți încarci site-ul cu încă un modul și totuși ai dori o interfață mai personalizată atunci cea mai simplă cale este să înlocuiești logo-ul implicit cu logo-ul site-ului.

Schimbarea logo-ului WordPress

1. Primul pas este să creezi un logo de dimensiune 274 x 63 px, png transparent și să-l urci pe server, fie folosind biblioteca media de pe site, fie direct în directorul image din tema activă.

2. Al doilea pas este să deschizi fișierul functions.php din tema activă. În general acesta este fișierul în care se pot pune metode noi, însă dacă ai o temă premium e posibil să trebuiască să pui codul în alt fișier. De obicei fișierul custom este indicat chiar în fișierul functions.php.

3. Copiezi imediat după <?php codul de mai jos:

function custom_logo() {
    echo '<style type="text/css">
          h1 a {background-image:url('.get_bloginfo('template_directory').'/images/your-logo.png) !important; margin:0 auto;}
    </style>';
}
add_filter('login_head', 'custom_logo');

your-logo.png – imaginea noului logo

4. Dacă logo-ul nu este în images atunci corectează calea cu calea corectă spre logo (și numele fișierul). Cel mai simplu este să urcați noul logo în Biblioteca Media și apoi să copiați url-ul imaginii și să o copiați aici:

Exemplu:

function custom_logo() {
    echo '<style type="text/css">
         .login h1 a {
             background-image:url(https://test.tutorialewp.ro/wp-content/uploads/2020/08/logo-tutwp.png) !important; margin:0 auto;
             background-size: 255px;
             height: 78px;
             width: 255px;
          }
    </style>';
}
add_filter('login_head', 'custom_logo');

Setați corect lățimea și înălțimea logo-ului!

5. Salvează și gata.

Bibliografie:

• Plugin API/Filter Reference/login head
• Plugin API/Action Reference/login head
• ‘.get_bloginfo(‘template_directory’).’ – este calea către tema activă

Mult succes!