Tutoriale WP
  • Prima pagină
  • Tutoriale WordPres
    • Administrare WordPress
    • Module (plugins)
    • Tips & Tricks
    • Setări de server
  • Baze de date
  • Pentru programatori
  • Glosar
Selectează o Pagină
Cum poți schimba logo-ul WordPress din formularul de logare

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!

 

 

Personalizarea formularului de logare – Custom Login Page Customizer

Personalizarea formularului de logare – Custom Login Page Customizer

de Marius Bradu | Module (plugins) | 0 comentarii

Personalizarea formularului de logare aduce un plus de calitate site-ului dvs. Această personalizare poate include schimbarea imaginii din fundal, a logo-ului implicit WordPress cu cel al site-ului, schimbarea culorilor, ba chiar și a mesajelor. Modificările pot fi făcute folosind diverse metode sau se poate utiliza un modul. Dintre diversele module ce vă pot ajuta în personalizarea formularului de logare l-am ales pe Custom Login Page Customizer de la WPBrigade.

Descrierea modulului

Modulul Custom Login Page Customizer are o mulțime de câmpuri de personalizare pentru a schimba aspectul paginii de conectare, logare, a WordPress-ului. Prin intermediu lui se poate modifica aspectul paginii de autentificare complet respectiv se pot modifica mesajele de eroare la conectare, de uitare a parolei sau de înregistrare.

Modulul are o versiune gratuită și mai multe profesionale. Costurile sunt destul de ridicate.

Versiunea Pro aduce în plus:

  • Social Login
  • Login Widget
  • Login Redirects
  • Limit Login Attempts
  • Hide Login
  • Auto Login

Instalarea și activarea modulului

1. Te autentifici ca administrator pe site

2. Caută în meniul din stânga Module sau Plugins (dacă site-ul este setat în engleză), de acolo accesează Adaugă Modul (Add Plugin).

schedule-maintenance-mode-wordpress-1

3. În câmpul de căutare scrie: Custom Login Page Customizer

custom-login-page-customizer-wordpress-1

4. Instalează apoi activează

custom-login-page-customizer-wordpress-2

5. După activare nodulul poate fi vizibil în meniul din stânga, ca mai jos:

custom-login-page-customizer-wordpress-4

Setarea modulului

După instalare, la prima accesare a meniului Setting veți fi întrebați dacă doriți să trimiteți informații producătorului sau nu:

custom-login-page-customizer-wordpress-5

Din următoarea fereastră veți putea seta câteva caracteristici ale formularului de logare:

custom-login-page-customizer-wordpress-6

Opțiunile sunt destul de clare.

Personalizarea formularului de logare

Chiar și în varianta sa gratuită modulul are o mulțime de opțiuni de personalizare. Le voi prezenta pe cele principale:

Personalizarea se face vizual și la prima deschidere arată ca mai jos:

custom-login-page-customizer-wordpress-7

Din meniul principal se poate schimba: logo, fundalul, câmpurile formularului, culorile și mesajele de eroare.

1. Personalizarea logo-ului

O primă opțiune este ascunderea logoului. După care avem: încărcarea unui logo nou, dimensionarea lui, respectic setarea spațiunui de sub logo. Logoul poate fi urcat pe server sau poate fi încărcat dintr-o sursă externă.

Tutoriale WordPress

2. Personalizarea fundalului

la fel ca la logo puteți ascunde backgroundul sau puteți să-l schimbați cu o imagine sau un video. Dacă alegeți să nu aveți o imagine sau video ca background, puteți seta culoarea.

Puteți alege fundalul dintr-o mică biblioteacă de imagini pusă la dispoziție de producător sau puteți alege o altă imagine de pe calculator sau dintr-o sursă externă.

custom-login-page-customizer-wordpress-10

3. Personalizarea formularului de logare

Personalizarea formularului are mai multe opțiuni:

Customize Login Form: puteți schimba dimensiunile formularului și forma lui.

Customize Forget Form: schimbă imaginea de fundal a miniformularului ce apare atunci când faceți clic pe: Ați uitat parola?

reCAPTCHA: adaugă formularului un câmp captcha. Disponibil doar în versiunea Pro.

Button Beauty: modificați și personalizați butonul de autentificare, font, text, culoare, dimensiuni.

Error Messages: puteți schimba și personaliza mesajele de eroare.

Welcome Messages: personalizați mesajele de întâmpinare.

Form Footer: personalizați textele din partea de jos a formularului și a paginii de autentificare. Puteți dezactiva aceste texte.

Google Fonts: vă permite să alegeți fonturi google. Doar în versiunea Pro.

Custom CSS/JS: pentru avansați, se pot schimba stiluri, se pot adăuga diverse alte îmbunătățiri folosind CSS și Java Script.

4. Alte opțiuni, doar în Pro

Versiunea Pro permite schimbarea template-ului de afișare a formularului de autentificare.

custom-login-page-customizer-wordpress-11

Exemplu:

custom-login-page-customizer-wordpress-3

5. Add-ons

Sunt disponibile mai multe opțiuni suplimentare, majoritatea doar în versiunea Pro:

custom-login-page-customizer-wordpress-12

Dacă activați prima opțiune, veți putea pune în meniu butoane de login / logout. În fereastra de setare a meniurilor, coloana de obiecte, va apărea caseta cu opțiuni de logare:

custom-login-page-customizer-wordpress-13

Așa vor apărea în meniu:

custom-login-page-customizer-wordpress-14

respectiv:

custom-login-page-customizer-wordpress-15

Mult succes!

 

 

Top module WordPress

  • Jetpack (free) – o mulțime de funcționalități
  • Akismet Anti-Spam (STOP spamurilor!)
  • Yoast SEO (free) – optimizare WordPress
  • OneSignal – Web Push Notifications
  • AMP for WP

Tutoriale recente

  • Cum putem limita accesul la biblioteca media?
  • Cum se poate rezolva eroarea: 421 Too many connections (8) from this IP
  • Cum poți schimba URL-ul de administrare a site-ului WordPress?
  • Export personalizat din WP: exemplu cu WP ALL EXPORT
  • Export din WordPress
  • Cum poți limita căutarea în WordPress?
  • Care este diferența dintre is_home () și is_front_page ()?
  • Cum poți adăuga div în containerul html blockquote în wordpress
  • Cum poți șterge PHP Warning și Notice în WordPress

Comentarii recente

  • Steinariu Cristina la Adăugarea unui articol în WordPress
  • Ungureanu Tiberiu la Cum instalez Notepad++
  • Manaras Ion la Adăugarea unui articol în WordPress
  • Florea Stancu la Ce este Divi?
  • Formatie Iasi Nunta la Cum gestionez lista cu Toate articolele

Membru al Ligii de Apărare a Internetului

  • Facebook
  • RSS

Creat de Elegant Themes | Cu sprijinul WordPress

 

Încarc comentariile...