Există ceva ciudat de satisfăcător în a face ca zona de administrare WordPress să se simtă mai mult ca a dvs. Când lucrăm la site-uri ale clienților sau la proiecte pe termen lung, chiar și schimbări mici, cum ar fi pictogramele personalizate, pot face ca tabloul de bord să se simtă mai rafinat și personal.
Pictogramele implicite WordPress își fac treaba, dar sunt generice. Dacă ai adăugat tipuri de postări personalizate sau ai creat o experiență de administrare adaptată, aceleași pictograme probabil nu reflectă brandul sau scopul site-ului tău.
Am folosit diferite metode de-a lungul anilor pentru a schimba pictogramele de administrator – unele simple, altele puțin mai avansate. Indiferent dacă doriți o soluție rapidă cu un plugin sau o modalitate de a schimba pictogramele cu puțin cod, vă vom arăta ambele opțiuni pas cu pas.
Acest tutorial este perfect pentru proprietarii de site-uri, dezvoltatori și freelanceri care doresc ca tabloul de bord WordPress să arate la fel de personalizat ca și partea frontală a site-ului.
Ce sunt pictogramele de administrator în WordPress?
Pictogramele de administrare sunt imaginile mici care apar lângă fiecare element din meniul tabloului de bord WordPress. Acestea vă ajută să recunoașteți rapid diferite zone ale site-ului dvs., cum ar fi Postări, Pagini, Pluginuri și Setări.
Implicit, WordPress folosește un font de pictograme numit Dashicons. Acesta există din 2013 și nu a avut multe actualizări de atunci. Deși funcționează bine, poate părea puțin învechit sau generic, mai ales dacă construiți un site personalizat.
Personalizarea acestor pictograme oferă zonei de administrare un aspect nou. Le puteți schimba pentru a se potrivi mărcii dvs., pentru a simplifica meniul pentru clienți sau pur și simplu pentru a adăuga puțină personalitate site-ului dvs.
Dacă construiți un site pentru cineva nou pe WordPress, schimbarea pictogramelor poate chiar să-l ajute să găsească lucrurile mai repede. Este o mică ajustare care face o mare diferență în modul în care se simte tabloul de bord.
Acum să analizăm două moduri ușoare de a schimba pictogramele de administrare — una cu un plugin și una cu puțin cod.
- Metoda 1: Schimbarea pictogramelor de administrare în panoul de administrare WordPress folosind un plugin
- Metoda 2: Schimbă manual pictogramele meniului de administrare folosind un fragment de cod
- Bonus: Adăugați iconițe pentru tipurile de postări personalizate în WordPress
- Mai multe modalități de a personaliza zona de administrare WordPress 🎁
Metoda 1: Schimbarea pictogramelor de administrare în panoul de administrare WordPress folosind un plugin
Pentru această metodă, vom folosi pluginul Admin Menu Editor. După cum sugerează și numele, acesta vă permite să personalizați ușor meniurile de administrare WordPress.
Mai întâi, trebuie să instalați și să activați pluginul Admin Menu Editor. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.
După ce ați activat pluginul, accesați pagina Setări » Editor Meniu. Aici, veți vedea meniul de administrare WordPress într-o interfață de utilizator (UI) ordonată, unde îl puteți personaliza.
Interfața de utilizare are o bară de instrumente în partea de sus, care vă permite să adăugați sau să ștergeți elemente de meniu, să adăugați separatoare, să copiați și să lipiți elemente și multe altele.
Mai jos, puteți face clic pe un element de meniu pentru a-l extinde și a-i vizualiza setările. Aici, am extins elementul de meniu Postări.
Când extindeți orice element de meniu, veți vedea mai multe opțiuni. Dacă este un meniu părinte, veți vedea și elementele de meniu copil în coloana din dreapta.
Pentru a adăuga, înlocui sau șterge o pictogramă de meniu, faceți clic pe linkul „Afișați opțiunile avansate” din partea de jos.
Acum, faceți clic pe butonul de lângă câmpul „URL pictogramă”.
Aceasta va dezvălui o fereastră pop-up unde puteți vedea toate pictogramele Dashicons disponibile. Alternativ, puteți face clic pe butonul „Bibliotecă media” pentru a încărca propria pictogramă imagine.
Dacă doriți să încărcați propria pictogramă imagine, recomandăm utilizarea unei imagini de 32×32, de preferință în format PNG transparent.
După ce ați ales pictograma, faceți clic pe butonul „Salvați modificările” pentru a stoca setările.
Vei vedea acum pictograma personalizată a meniului utilizată în meniul de administrare.
Metoda 2: Schimbă manual pictogramele meniului de administrare folosind un fragment de cod
Această metodă necesită adăugarea unui cod personalizat pentru a schimba pictogramele.
Dacă nu ați mai făcut acest lucru înainte, vă recomandăm să consultați rapid tutorialul nostru despre adăugarea de cod personalizat în WordPress.
Cel mai ușor și mai sigur mod de a adăuga cod personalizat în WordPress este utilizând WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress. Permite adăugarea sigură de cod personalizat, CSS și HTML pe site-ul dvs. WordPress fără a rupe accidental ceva.
Notă: Pluginul are și o versiune gratuită numită WPCode Lite, care va face treaba. Cu toate acestea, versiunea pro oferă funcționalități suplimentare care ar putea fi utile.
Exemplu 1. Înlocuirea unei pictograme folosind Dashicons implicite
Pentru acest exemplu, vom folosi Dashicons implicite pentru a înlocui o pictogramă din setul existent de pictograme.
Este important de menționat că WordPress încarcă deja Dashicons, care sunt optimizate pentru performanță. Prin urmare, utilizarea lor nu va afecta viteza de încărcare a paginii.
Acestea fiind spuse, înainte de a rula codul, trebuie să notați următoarele:
- URL-ul pentru elementul de meniu pe care doriți să îl schimbați
- Numele iconiței pe care doriți să o utilizați
Mai întâi, trebuie să găsiți URL-ul paginii pentru elementul de meniu pe care doriți să îl personalizați. De exemplu, să spunem că doriți să schimbați pictograma pentru meniul „Postări”.
Mutați cursorul mouse-ului peste meniul Postări și veți vedea URL-ul la care se leagă în bara de stare a browserului dvs. din partea de jos a paginii. Aveți nevoie doar de ultima parte a URL-ului, care în acest caz ar fi edit.php.
Apoi, accesați site-ul Dashicons și faceți clic pe pictograma pe care doriți să o utilizați.
Făcând clic pe orice iconiță, i se va afișa numele și slug-ul în partea de sus. În acest moment, trebuie să copiați slug-ul, deoarece veți avea nevoie de el în pasul următor.
Odată ce ați făcut acest lucru, accesați pagina Fragmente de cod » + Adăugați fragment și plasați mouse-ul peste caseta „Adăugați propriul cod personalizat (Fragment nou)”.
Apoi, pur și simplu faceți clic pe butonul „+ Adăugați fragment personalizat” care apare.
Pe ecranul următor, furnizați un titlu pentru fragmentul dvs. și selectați Fragment PHP sub opțiunea Tip cod.
După aceea, puteți copia și lipi următorul cod în caseta editorului de cod:
function change_post_menu_icon() {
global $menu;
// Loop through the menu items
foreach ($menu as $key => $menu_item) {
// Find the "Posts" menu item (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a different Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Nu uitați să schimbați dashicons-format-aside cu slug-ul pe care l-ați copiat anterior.
Codul dvs. va apărea astfel în editor:
Apoi, trebuie să spuneți WordPress-ului unde să ruleze acest cod.
Pictogramele meniului de administrare apar în zona de administrare WordPress. Pe aceeași pagină, derulează la secțiunea Inserare și selectează „Doar pentru administrare” sub opțiunea Locație.
În cele din urmă, comută fragmentul tău la Activ și apasă butonul „Salvează fragmentul” pentru a salva modificările.
WordPress va începe acum să folosească pictograma pe care ați selectat-o pentru pagina Postări.
Exemplu 2. Utilizați pictograma Font Awesome pentru un element de meniu în zona de administrator WordPress
Biblioteca implicită Dashicon are un set limitat de pictograme. Vestea bună este că poți folosi o bibliotecă de fonturi și pictograme precum Font Awesome, care are un set mult mai mare de pictograme.
Cu toate acestea, acest lucru înseamnă că va trebui să încărcați Font Awesome, ceea ce ar putea încetini ușor zona de administrare WordPress (doar câteva milisecunde).
Înainte de a adăuga orice cod, mai întâi trebuie să găsiți pictograma pe care doriți să o utilizați. Accesați site-ul Font Awesome și comutați la Biblioteca Gratuită.
Vei vedea toate pictogramele disponibile gratuit.
Faceți clic pe pictograma pe care doriți să o utilizați și aceasta se va deschide într-o fereastră pop-up. De aici, trebuie să copiați valoarea Unicode a pictogramei.
După aceea, accesați pagina Snippets de cod » + Adăugați snippet din tabloul de bord WordPress.
Continuați și faceți clic pe butonul „+ Adăugați un fragment personalizat” din caseta „Adăugați codul dvs. personalizat (Fragment nou)”.
Pe ecranul următor, furnizați un titlu pentru fragmentul dvs. și selectați Fragment PHP ca opțiune Tip cod.
După aceea, puteți copia și lipi următorul cod în caseta editorului de cod:
// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
echo '<style>
.custom-post-menu-class .wp-menu-image:before {
font-family: "Font Awesome 5 Free" !important;
content: "\f015"; /* Unicode for the Font Awesome icon */
font-weight: 900; /* Needed for solid icons */
}
</style>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Nu uitați să înlocuiți \f015 cu valoarea Unicode pe care ați copiat-o anterior.
Codul dvs. va apărea astfel în editor:
Apoi, trebuie să spuneți WordPress-ului unde să ruleze acest cod.
Pictogramele meniului de administrare apar în interiorul zonei de administrare WordPress, astfel încât puteți derula la secțiunea Inserare și selectați „Doar pentru administrare” ca opțiune Locație.
În cele din urmă, comutați fragmentul dvs. la Activ și faceți clic pe butonul „Salvați fragmentul” pentru a vă salva modificările.
WordPress va începe acum să folosească pictograma pe care ați selectat-o pentru pagina Postări.
Bonus: Adăugați iconițe pentru tipurile de postări personalizate în WordPress
Tipurile de postări personalizate vă permit să creați tipuri unice de conținut pentru site-ul dvs. WordPress. Acestea nu sunt postări sau pagini implicite, ci ceva complet original pentru site-ul dvs.
Dacă utilizați un tip de postare personalizat pe site-ul dvs. WordPress, s-ar putea să doriți să îi schimbați pictograma pentru a-l putea identifica cu ușurință.
În acest caz, consultați tutorialul nostru detaliat pe această temă, care arată multiple modalități de a modifica sau adăuga pictograme pentru tipurile de postări personalizate.
Mai multe modalități de a personaliza zona de administrare WordPress 🎁
Schimbarea pictogramelor de administrare este doar o modalitate de a face ca tabloul de bord WordPress să se simtă mai adaptat site-ului sau clienților dvs. Dacă doriți să mergeți și mai departe, iată câteva alte tutoriale care vă pot ajuta să personalizați și să îmbunătățiți experiența de administrare:
- Cum să adăugați și să personalizați coloane de administrator în WordPress
- Cum să personalizezi tabloul de bord de administrare WordPress (Sfaturi)
- Cele mai bune pluginuri pentru tabloul de bord de administrare WordPress (comparate)
- Pluginuri și sfaturi pentru îmbunătățirea zonei de administrare WordPress
- Cum să schimbați subsolul în panoul de administrare WordPress
Sperăm că acest articol v-a ajutat să schimbați sau să adăugați pictograme de administrare în WordPress. De asemenea, ați putea dori să consultați cum să marcați tabloul de bord de administrare WordPress sau să vizualizați aceste sfaturi experte pentru personalizarea zonei de administrare WordPress pentru fluxuri de lucru mai bune.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Ai o întrebare sau o sugestie? Te rugăm să lași un comentariu pentru a începe discuția.