Cum să Schimbați Logo-ul de Autentificare WordPress: Metode prin Plugin, Cod și CSS

Pagina de autentificare WordPress afișează implicit logo-ul implicit WordPress — un element de branding generic care nu își are locul pe un site profesional sau orientat către clienți. Înlocuirea acestuia cu propriul logo durează mai puțin de cinci minute și nu necesită cunoștințe tehnice avansate, însă impactul asupra coerenței brandului este imediat. Acest ghid acoperă trei metode pregătite pentru producție: o abordare bazată pe plugin cu interfață grafică, injectare directă de cod functions.php și un plugin CSS personalizat de sine stătător — fiecare cu codul exact, căile de fișiere și cazurile limită de care aveți nevoie pentru a-l implementa corect de prima dată.

De ce logo-ul implicit de autentificare contează mai mult decât crezi

De fiecare dată când un membru al echipei, un client sau un administrator navighează la /wp-login.php, aceștia văd un logo WordPress. Pe un proiect de agenție white-label, o platformă SaaS sau o instalare WordPress multi-tenant, acel branding implicit subminează activ imaginea profesională pe care ați construit-o în toate celelalte locuri de pe site.

Dincolo de estetică, un logo de autentificare personalizat îndeplinește o funcție de securitate subtilă, dar reală: le semnalează utilizatorilor că se află într-un mediu legitim și controlat — nu o clonă de phishing a ecranului standard de autentificare WordPress. Când găzduiți WordPress pe un mediu de VPS Hosting cu acces root, aveți control deplin asupra fiecărui nivel al acestei personalizări, de la permisiunile fișierelor până la implementarea temei, fără restricțiile impuse de mediile de găzduire partajată.

Compararea celor trei metode de personalizare

Distincția arhitecturală cheie: metodele care se bazează pe fișierul functions.php al temei părinte vor fi suprascrise la fiecare actualizare a temei. Utilizați întotdeauna o temă copil pentru orice modificare directă a fișierelor.

Metoda 1: Utilizarea unui plugin

Aceasta este calea cea mai sigură pentru non-dezvoltatori și cea mai rapidă pentru oricine are nevoie de un rezultat funcțional în mai puțin de trei minute.

Pasul 1: Instalați și activați LoginPress

1. Conectați-vă la panoul de control WordPress.
2. Navigați la Plugins > Add New.
3. Căutați LoginPress sau Custom Login Page Customizer.
4. Faceți clic pe Install Now, apoi pe Activate.

Ambele plugin-uri sunt menținute activ, au baze mari de instalare și expun setările prin WordPress Customizer nativ — ceea ce înseamnă că nu există o interfață necunoscută de învățat.

Pasul 2: Încărcați și configurați logo-ul dvs.

1. Mergeți la LoginPress > Customizer (sau Appearance > Login Customizer în funcție de plugin).
2. Localizați secțiunea Logo în panoul din stânga.
3. Faceți clic pe Select Image și încărcați logo-ul din Biblioteca Media sau de pe calculatorul local.
4. Ajustați lățimea, înălțimea și spațierea folosind controalele de previzualizare live ale plugin-ului.
5. Faceți clic pe Publish.

Caz limită: Dacă logo-ul apare neclar pe ecranele cu DPI ridicat (Retina), încărcați o imagine de exact 2x dimensiunea de afișare dorită și constrângeți-o prin CSS width în loc să vă bazați pe dimensiunile în pixeli ale plugin-ului. De exemplu, dacă doriți un logo de 250px lățime, încărcați un PNG de 500px lățime și setați lățimea de afișare la 250px.

Metoda 2: Cod manual în functions.php (Avansat)

Această metodă vă oferă control precis asupra fiecărei proprietăți CSS — poziționare, comportamentul linkului, stări hover — fără a instala un plugin suplimentar. Este abordarea preferată pentru dezvoltatorii care construiesc teme personalizate sau mențin un număr redus de plugin-uri.

Pasul 1: Creați sau accesați o temă copil

Nu editați niciodată direct fișierul functions.php al temei părinte. Dacă nu ați creat deja o temă copil, faceți acest lucru înainte de a continua. Pe un VPS cu cPanel sau orice server cu acces SSH, puteți crea manual directorul temei copil și fișierele necesare.

Din panoul de control WordPress, navigați la Appearance > Theme File Editor și selectați fișierul functions.php al temei copil.

Pasul 2: Adăugați hook-ul pentru logo-ul de autentificare

Adăugați următorul bloc de cod în fișierul functions.php al temei copil:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Detaliu critic: Codul sursă original din multe tutoriale vizează doar #login h1 a. Începând cu WordPress 5.x, containerul paginii de autentificare include și clasa .login, astfel că vizarea ambelor selectoare asigură compatibilitatea cu toate versiunile WordPress și orice modificări structurale viitoare.

Pasul 3: Încărcați fișierul logo

Folosind un client FTP, managerul de fișiere al găzduirii sau SSH, încărcați logo-ul în directorul images/ al temei copil:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

Calea fișierului din funcția PHP folosește get_stylesheet_directory_uri(), care se rezolvă întotdeauna la URI-ul rădăcină al temei active — confirmând de ce tema copil este obligatorie aici. Dacă folosiți din greșeală funcția directorului temei părinte get_template_directory_uri(), calea se va întrerupe ori de câte ori schimbați sau actualizați tema părinte.

Pasul 4: Personalizați linkul și tooltip-ul logo-ului

În mod implicit, logo-ul de autentificare trimite înapoi la wordpress.org. Cu siguranță doriți să indice spre propria pagină de start. Adăugați acești doi hook-uri suplimentari în același fișier functions.php:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

Acesta este un detaliu pe care majoritatea tutorialelor îl omit complet. Dacă clientul dvs. face clic pe logo de pe pagina de autentificare și ajunge pe wordpress.org, aceasta reprezintă un eșec profesional. Aceste două filtre închid acest decalaj.

Pasul 5: Salvați și verificați

Faceți clic pe Update File în Theme File Editor sau salvați prin editorul de text dacă lucrați prin SSH/SFTP. Navigați la yourdomain.com/wp-login.php într-o fereastră de browser privată pentru a verifica rezultatul fără interferența activelor din cache.

Metoda 3: Plugin CSS personalizat (fără functions.php)

Dacă lucrați pe un site de client unde editarea fișierelor temei este riscantă, sau utilizați o temă terță parte pe care nu o puteți extinde în siguranță cu o temă copil, un plugin CSS dedicat este soluția cea mai curată.

Pasul 1: Instalați Simple Custom CSS and JS

1. Mergeți la Plugins > Add New.
2. Căutați Simple Custom CSS and JS (sau mai ușorul Simple Custom CSS).
3. Instalați și activați.

Pasul 2: Adăugați CSS-ul paginii de autentificare

Navigați la Custom CSS and JS > Add Custom CSS și introduceți următoarele:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Înlocuiți URL-ul cu calea directă către logo-ul încărcat. Cea mai fiabilă sursă este Biblioteca Media: deschideți logo-ul în Biblioteca Media, copiați URL-ul fișierului din panoul de detalii al atașamentului și lipiți-l direct în regula CSS.

Capcană de evitat: Nu folosiți un URL relativ aici (de ex., /wp-content/uploads/logo.png). Dacă WordPress este instalat într-un subdirector, căile relative se vor întrerupe silențios. Utilizați întotdeauna URL-ul absolut din Biblioteca Media.

Setați opțiunea Where la Frontend sau Login Page dacă plugin-ul suportă direcționarea specifică paginii, pentru a evita încărcarea CSS-ului inutil pe fiecare pagină publică.

Specificații și bune practici pentru imaginea logo-ului

Format fișier: Utilizați PNG cu fundal transparent. Artefactele de compresie JPEG sunt vizibile pe fundalul gri deschis al paginii de autentificare. SVG este suportat în browserele moderne, dar necesită CSS suplimentar (background-size: auto se comportă diferit pentru SVG-uri) și poate cauza inconsistențe de randare pe configurații mai vechi.

Dimensiuni: Containerul formularului de autentificare WordPress are 320px lățime. Un logo de 250 x 80px se încadrează perfect în această constrângere. Pentru ecranele Retina/HiDPI, exportați la 500 x 160px și constrângeți dimensiunea de afișare prin CSS width: 250px; height: 80px.

Dimensiunea fișierului: Păstrați logo-ul sub 50KB. Pagina de autentificare este un punct de acces cu frecvență ridicată — fiecare administrator, editor și colaborator o încarcă. Un fișier imagine supradimensionat adaugă latență inutilă, în special pe servere cu lățime de bandă I/O limitată.

Contrast de culoare: Fundalul implicit al paginii de autentificare este #f0f0f1. Testați logo-ul față de această valoare hex exactă înainte de implementare. Un logo alb pe un fundal alb este invizibil — o greșeală jenantă de comună în implementările grăbite.

Comportament responsiv: Adăugați max-width: 100% la ancora logo-ului pentru a preveni depășirea pe ecranele mobile mai înguste de 320px. Pagina de autentificare WordPress nu este complet responsivă în mod implicit, dar această singură regulă previne derularea orizontală pe viewport-uri mici.

Considerații privind mediul de găzduire

Metoda pe care o alegeți este determinată parțial de mediul dvs. de găzduire. Pe un Server Dedicat, aveți acces SSH nerestricționat și puteți implementa teme copil, gestiona permisiunile fișierelor și automatiza actualizările logo-ului prin scripturi de implementare. Pe Găzduire Web Partajată, sunteți de obicei limitat la managerul de fișiere și panoul de control WordPress — făcând metoda plugin sau plugin-ul Custom CSS singurele opțiuni practice.

Pentru echipele care gestionează mai multe instalări WordPress, luați în considerare utilizarea WP-CLI pentru a automatiza actualizările logo-ului pe mai multe site-uri:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Dacă site-ul dvs. WordPress gestionează înregistrări de utilizatori, portaluri pentru clienți sau autentificări pentru e-commerce, asocierea unei pagini de autentificare cu branding cu un Certificat SSL valid este obligatorie. Pagina de autentificare transmite credențiale — HTTPS este standardul de bază, nu o îmbunătățire opțională.

Matrice de decizie: Ce metodă ar trebui să utilizați

Utilizați această listă de verificare pentru a selecta abordarea potrivită pentru situația dvs. specifică:

• Sunteți un non-dezvoltator sau construiți pentru un client non-tehnic — utilizați Metoda 1 (plugin LoginPress). Este reversibilă, nu necesită cod și plugin-ul gestionează automat comportamentul responsiv.
• Sunteți un dezvoltator care menține o temă copil personalizată — utilizați Metoda 2 (functions.php). Nu adaugă niciun overhead de plugin și vă oferă control CSS complet, inclusiv remedierea URL-ului linkului logo-ului.
• Trebuie să personalizați o temă terță parte fără o temă copil — utilizați Metoda 3 (plugin Custom CSS). Este izolată de actualizările temei și ușor de eliminat.
• Gestionați mai multe site-uri — combinați Metoda 2 cu o temă copil specifică site-ului per client, implementată prin Git sau WP-CLI pentru consistență.
• Logo-ul apare neclar pe ecranele Retina — indiferent de metodă, încărcați o imagine la rezoluție 2x și constrângeți dimensiunea de afișare prin proprietățile CSS width și height.
• Linkul logo-ului indică în continuare spre wordpress.org după personalizare — adăugați filtrele login_headerurl și login_headertext din Metoda 2, chiar dacă ați folosit un plugin pentru imagine.

Întrebări frecvente

Schimbarea logo-ului de autentificare afectează securitatea WordPress?

Nu, înlocuirea imaginii logo-ului nu are niciun impact asupra securității autentificării. Cu toate acestea, un logo de autentificare personalizat poate reduce eficacitatea vizuală a paginilor generice de phishing WordPress care vizează utilizatorii dvs., deoarece atacatorii clonează de obicei aspectul implicit al paginii de autentificare WordPress. Pentru întărirea reală a securității, combinați aceasta cu autentificarea cu doi factori, limitarea tentativelor de autentificare și aplicarea HTTPS.

Logo-ul de autentificare personalizat se va întrerupe după o actualizare a nucleului WordPress?

Actualizările nucleului nu ating fișierele temei sau datele plugin-urilor. Dacă ați folosit Metoda 2 cu o temă copil, modificările dvs. sunt complet izolate atât de actualizările nucleului, cât și de actualizările temei părinte. Dacă ați editat direct fișierul functions.php al temei părinte, o actualizare a temei va suprascrie codul dvs. — motiv pentru care cerința temei copil este obligatorie.

Care este hook-ul corect pentru injectarea CSS pe pagina de autentificare WordPress?

Utilizați login_enqueue_scripts. Această acțiune se declanșează specific pe pagina de autentificare înainte ca stilurile să fie randate, făcând-o hook-ul corect și documentat oficial pentru acest scop. Utilizarea wp_enqueue_scripts nu va funcționa pe pagina de autentificare — se declanșează doar pe front-end.

Pot folosi un fișier SVG ca logo de autentificare?

Da, dar cu rezerve. WordPress blochează implicit încărcările SVG din motive de securitate (SVG-urile pot conține JavaScript executabil). Trebuie fie să utilizați un plugin precum Safe SVG pentru a activa încărcările SVG, fie să referențiați SVG-ul printr-un URL absolut hardcodat în CSS. În plus, setați background-size: auto sau dimensiuni explicite în pixeli, deoarece comportamentul de scalare SVG diferă de imaginile raster.

Logo-ul meu nu apare după urmarea acestor pași — ce ar trebui să verific?

În primul rând, reîncărcați forțat pagina de autentificare cu Ctrl+Shift+R (Windows/Linux) sau Cmd+Shift+R (Mac) pentru a ocoli cache-ul browserului. În al doilea rând, verificați că URL-ul imaginii este accesibil public lipindu-l direct într-o filă de browser. În al treilea rând, deschideți DevTools în browser pe pagina de autentificare, inspectați elementul #login h1 a și verificați dacă regula CSS este aplicată sau suprascrisă de o altă foaie de stil. În al patrulea rând, confirmați că fișierul a fost încărcat în directorul corect și că numele fișierului din cod corespunde exact cu numele fișierului încărcat, inclusiv sensibilitatea la majuscule — serverele Linux tratează Logo.png și logo.png ca fișiere diferite.