Când construim site-uri WordPress pentru clienți, adăugăm adesea widgeturi personalizate la tabloul de bord. Este o modalitate simplă de a afișa note utile, linkuri sau instrucțiuni chiar acolo unde utilizatorul se autentifică.
Tabloul de bord implicit nu afișează întotdeauna informațiile de care oamenii au nevoie. De aceea ne place să îl personalizăm — pentru a face zona de administrare mai utilă și personală.
Ați putea dori să afișați un mesaj de bun venit, informații de contact pentru suport sau să includeți un tutorial rapid. Oricare ar fi motivul, este ușor de făcut odată ce știți cum.
În acest ghid, vă vom arăta cum să adăugați un widget personalizat pe tabloul de bord în WordPress — folosind cod sau un plugin, oricare preferați.
Ce sunt widget-urile pentru tabloul de bord al administratorului WordPress?
Widgeturile din panoul de administrare sunt căsuțele mici pe care le vezi când te conectezi pe site-ul tău WordPress. Ele afișează informații rapide, linkuri utile și actualizări despre site-ul tău.
Implicit, WordPress îți oferă widgeturi precum „Pe scurt”, „Activitate”, „Starea de sănătate a site-ului” și „Schiță rapidă”. Dar poți adăuga propriile widgeturi cu conținut personalizat care se potrivește nevoilor tale.
Sfat rapid: Fiecare utilizator de pe site-ul dvs. poate alege ce widget-uri dorește să vadă. Aceștia le pot afișa, ascunde sau rearanja pentru a se potrivi fluxului lor de lucru.
De ce sunt utile widgeturile de pe tabloul de bord:
- Acestea afișează date utile în momentul în care te conectezi.
- Poți accesa rapid instrumente sau conținut fără a căuta prin meniuri.
- Widgeturile personalizate vă permit să personalizați tabloul de bord pentru nevoile dvs. specifice.
Unde să le găsești:
Aceste widget-uri apar pe ecranul principal al tabloului de bord, în interiorul zonei de administrare WordPress. Le puteți muta prin glisare și fixare sau le puteți ascunde folosind fila Screen Options din partea de sus.
De ce și cum folosim widgeturi personalizate pentru administrator în WordPress
Widget-urile personalizate de tabloul de bord sunt o modalitate excelentă de a personaliza experiența de administrare WordPress. Le-am folosit pe multe site-uri ale clienților pentru a afișa informații utile, a lega instrumente importante sau a simplifica procesul de onboarding.
Indiferent dacă vă gestionați propriul site sau mai multe pentru clienți, widgeturile personalizate pot economisi timp și pot face zona de administrare mai utilă.
Studii de caz din viața reală:
- Personalizare: Adaugă un mesaj de bun venit, afișează statistici cheie sau creează legături către pagini pe care echipa ta le folosește frecvent.
- Utilizare pentru dezvoltatori: Dezvoltatorii creează adesea widget-uri care ghidează clienții cu scurtături către sarcini comune, cum ar fi actualizări sau backup-uri.
Cum le folosim pe site-urile noastre:
Ne bazăm pe un set de plugin-uri WordPress indispensabile, iar multe dintre ele includ widget-uri de tabloul de bord integrate.
Unul pe care îl folosim frecvent este widgetul All in One SEO Overview. Acesta afișează scorurile TruSEO pentru conținutul nostru și oferă linkuri directe pentru a le îmbunătăți.
Folosim, de asemenea, widgetul MonsterInsights. Acesta ne oferă o imagine rapidă a traficului site-ului și a performanței direct din tabloul de bord.
Este, de asemenea, flexibil - putem alege ce date să afișăm în funcție de cine îl folosește.
Deoarece fiecare membru al echipei are nevoi diferite, aceștia pot afișa sau ascunde widget-uri și pot rearanja tabloul de bord așa cum doresc. Este o funcție mică, dar care face o mare diferență în productivitate.
Cum să creați widget-uri personalizate pentru administratorul WordPress
Există două modalități principale de a crea widget-uri personalizate pentru tabloul de bord WordPress. Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda pe care doriți să o utilizați:
- Metoda 1: Crearea de widgeturi pentru tabloul de bord folosind cod personalizat (mai personalizabil)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
Metoda 1: Crearea de widgeturi pentru tabloul de bord folosind cod personalizat (mai personalizabil)
Pentru această metodă, va trebui să adăugați cod personalizat pe site-ul dvs. WordPress pentru a crea un widget de tabloul de bord. Necesită o înțelegere de bază a programării WordPress. Deci, dacă nu doriți să scrieți cod, puteți sări la următoarea metodă.
Afișăm această metodă mai întâi deoarece este mai flexibilă și lasă loc pentru a adăuga orice cod doriți să executați în interiorul widget-ului dvs. personalizat.
Vă vom arăta codul de care aveți nevoie, apoi îl puteți personaliza pentru a adăuga codul dvs. folosind PHP, HTML sau JS.
Când vine vorba de adăugarea de cod personalizat pe site-ul dvs. WordPress, mulți utilizatori se gândesc la fișierul functions.php al temei. Deși această metodă funcționează, credem că există o modalitate mai bună și mai sigură de a gestiona fragmentele de cod personalizat - folosind WPCode.
Editarea fișierului functions.php poate uneori să blocheze site-ul dacă există o greșeală în cod. În plus, vei pierde codul personalizat dacă schimbi sau actualizezi tema fără a face backup modificărilor tale.
WPCode, pe de altă parte, vă permite să adăugați cod personalizat în siguranță, fără a vă bloca site-ul. De asemenea, facilitează gestionarea fragmentelor de cod și activarea/dezactivarea lor, după cum este necesar.
Notă: Există și o versiune gratuită numită WPCode Lite, pe care o puteți folosi pentru acest tutorial. Cu toate acestea, recomandăm upgrade-ul la un plan plătit pentru a debloca mai multe funcționalități.
Mai întâi, trebuie să instalezi și să activezi pluginul WPCode. Pentru mai multe detalii, vezi articolul nostru despre instalarea unui plugin WordPress.
Odată activat, trebuie să accesați pagina Code Snippets » +Add Snippet și să selectați „Add Your Custom Code (New Snippet)” pentru a crea un nou fragment de cod.
Pe ecranul următor, trebuie să introduceți un nume pentru codul dvs. personalizat și să alegeți „Fragment PHP” ca „Tip de cod”.
După aceea, adăugați următorul cod în caseta de previzualizare a codului:
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
Așa ar trebui să arate în interfața dvs. WPCode:
Iată o mică explicație a codului:
Funcția my_custom_dashboard_widgets() înregistrează widgetul personalizat folosind funcția wpb_add_dashboard_widget(). Aceasta ia trei argumente. Primul este ID-ul widgetului personalizat, al doilea este titlul widgetului, iar al treilea argument este funcția de apel.
custom_dashboard_help() este funcția noastră de apel, iar în interiorul ei am adăugat codul HTML pe care dorim să-l afișăm atunci când widgetul este afișat.
Am conectat funcția noastrămy_custom_dashboard_widgetsla hook-ulwp_dashboard_setupfolosindadd_action. Acest hook practic configurează pagina tabloului de bord pentru afișare.
După adăugarea codului personalizat, trebuie să derulați în jos la secțiunea „Insertion” și să selectați „Admin Only” din meniul derulant Location.
În final, faceți clic pe butonul „Salvează fragment” și comutați opțiunea de stare la „Activ”.
Atât. Acum puteți vizita pagina Dashboard pentru a vedea widget-ul personalizat al tabloului de bord de administrare WordPress în acțiune.
Metoda 2: Crearea unui widget personalizat pentru tabloul de bord folosind un plugin (mai ușor)
Această metodă este mai ușoară, dar am plasat-o ca a doua metodă deoarece este puțin mai puțin flexibilă decât adăugarea de cod personalizat.
Pentru această metodă, vom folosi pluginul Ultimate Dashboard. Este unul dintre cele mai bune pluginuri pentru tabloul de bord de administrare WordPress și te ajută să creezi cu ușurință widgeturi personalizate pentru administrare.
Pentru mai multe detalii, consultați recenzia noastră completă Ultimate Dashboard.
Mai întâi, trebuie să instalezi și să activezi pluginul Ultimate Dashboard. Pentru mai multe detalii, consultă articolul nostru despre instalarea unui plugin WordPress.
După activare, trebuie să vizitați pagina Ultimate Dash…» Add New. Mai întâi, trebuie să furnizați un titlu pentru widget-ul dvs. și apoi să selectați un Tip de widget.
Există trei tipuri de widget-uri pe care le puteți crea:
- Widget Icon – Afișează o pictogramă mare și direcționează-o către orice pagină de pe site-ul tău.
- Widget Text – Folosește un editor vizual unde puteți adăuga orice text doriți cu câteva opțiuni de formatare de bază.
- Widget HTML – Adăugați cod HTML la widget-ul dvs. personalizat.
Să le analizăm pe fiecare în parte.
1. Creați un widget cu pictogramă personalizată
Selectați „Widget Icon” ca „Tip widget” și apoi alegeți pictograma pe care doriți să o afișați. Implicit, acesta vine cu un număr limitat de pictograme din care puteți alege.
Mai jos, puteți adăuga un text sub „Tooltip” pentru a explica utilizatorilor ce se întâmplă când fac clic pe pictogramă. De exemplu: „Te duce la pagina de setări WordPress.”
După aceea, adăugați linkul unde doriți să trimiteți utilizatorii atunci când aceștia fac clic pe pictogramă.
În final, faceți clic pe „Publicare” pentru a salva modificările și vizitați tabloul de bord pentru a vedea widgetul în acțiune.
Așa ar arăta.
2. Creați un widget text personalizat
Dacă nu sunteți deja acolo, accesați pagina Ultimate Dash…» Adăugare Nouă. Selectați „Widget Text” ca Tip de Widget.
Plugin-ul îți va afișa un editor vizual de text (același ca vechiul editor clasic) unde poți adăuga orice text dorești să afișezi cu formatare HTML de bază.
Când ați terminat, faceți clic pe „Publică” pentru a salva modificările.
Acum poți vizita dashboard-ul de administrator pentru a vedea acest widget personalizat de administrator în acțiune.
3. Creați un widget HTML personalizat
Dacă nu sunteți deja acolo, trebuie să accesați pagina Ultimate Dash…» Adaugă nou. Selectați „Widget HTML” ca Tip de widget.
Pluginul vă va afișa un editor HTML unde puteți adăuga orice cod HTML cu CSS inline.
Când ați terminat, faceți clic pe „Publică” pentru a salva modificările.
Acum poți vizita dashboard-ul de administrator pentru a vedea acest widget personalizat de administrator în acțiune.
Folosind Ultimate Dashboard, puteți crea oricâte widgeturi personalizate doriți și puteți combina diferite tipuri de widgeturi pentru a crea o experiență utilă a tabloului de bord de administrare.
Duceți tabloul de bord de administrare WordPress la nivelul următor
Zona de administrare WordPress este locul unde majoritatea proprietarilor de site-uri petrec mult timp scriind conținut, creând pagini, gestionând comenzi și multe altele.
Iată câteva resurse suplimentare pentru optimizarea tabloului de bord de administrare WordPress:
- Cum să personalizați tabloul de bord de administrare WordPress
- Cum să marcați alb tabloul de bord de administrare WordPress
- Cum să creați fluxuri de lucru automate în WordPress
- Pluginuri și sfaturi pentru îmbunătățirea zonei de administrare WordPress
Sperăm că acest articol v-a ajutat să adăugați widgeturi personalizate pe tabloul de bord în zona de administrare WordPress. De asemenea, ați putea dori să consultați ghidul nostru de securitate WordPress sau să aruncați o privire la acest tutorial despre ascunderea elementelor inutile din meniul zonei de administrare.
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.
Brandon
Foarte util. Mulțumesc.
Suport WPBeginner
Mă bucur că a fost util!
Admin
Jef Vermeire
Puteți adăuga mai multe widget-uri de același tip pe tabloul de bord WordPress. De exemplu, pot adăuga de două ori widget-ul personalizat 'custom_help_widget' pe tabloul meu de bord?
Suport WPBeginner
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Admin
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
Suport WPBeginner
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Mulțumesc pentru distribuire, este prea grozav, îmi place.
Suport WPBeginner
Glad you found our guide helpful
Admin
Mike
Este posibil să stilizezi widgetul cu atribute personalizate prin HTML sau CSS?
Suport WPBeginner
Ați putea, dar asta depășește puțin ceea ce acoperim în articolele noastre.
Admin
daan van middendorp
Cum pot folosi acest lucru cu un rol personalizat?
Suport WPBeginner
Dacă rolul dvs. personalizat poate vedea widgeturile tabloului de bord, ar trebui să poată vedea widgetul personalizat.
Admin
haqem
cum să plasez acest widget personalizat în zona „Adăugare postare nouă” pentru scriere
Ron Sierra
Acest lucru a fost întrebat odată, dar nu am putut găsi răspunsul. Cum creez mai multe widget-uri pe tabloul de bord?
Bjornen
Cum adaug funcția wp_mail la acest widget?
Înțeles; cum ofer clientului un formular de contact în acel widget?
Vishah
Cum pot adăuga un buton?
Wade
Am folosit codul dvs. și am obținut ecranul alb al morții. WP 4.7.2
Aveți idei?
Suport WPBeginner
Salut Wade,
Puteți elimina codul folosind FTP. Vă rugăm să consultați și ghidul nostru despre cum să remediați ecranul alb al morții în WordPress
Admin
gobinda das
pot schimba titlul temei Flowtown cu altceva
Javier
Salut, încerc să creez widget-uri personalizate pe bază de utilizator. Fiecare utilizator are nevoie de un widget cu text diferit în el.
Există vreo modalitate de a realiza acest lucru?
David Guerreiro
Este foarte ușor! Cu PHP, obțineți utilizatorul curent în funcția pe care o folosiți pentru afișarea conținutului metabox și schimbați HTML în funcție de utilizatorul preluat. Aruncați o privire aici:
Lại Đình Cường
Salut Syed Balkhi, cum pot adăuga un nou widget de administrator cu ordine?
shakun
Cum să adăugați mai multe widget-uri pe tabloul de bord
Nishant
Am încercat să inserez un do_shortcode() cu un shortcode pentru un formular de contact pentru a oferi utilizatorului acces rapid pentru a raporta orice eroare sau pentru a oferi feedback, dar nu funcționează... Aveți vreo idee cum să fac CF 7 să funcționeze cu asta?
Mulțumesc
Dustin
Ar fi grozav să știu asta. Încerc și eu să folosesc un shortcode într-un widget de tabloul de bord.
Mike
Nu funcționează pentru mine în 3.5. Există actualizări pentru a face acest lucru să funcționeze? Mulțumesc!
smayzes
Este posibil să faceți acest lucru folosind OOP?
de ex.:
într-o clasă:
wp_add_dashboard_widget(‘custom_help_widget’, ‘Ajutor și Suport’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>Bine ați venit la CMS-ul dvs. personalizat!’;
}
Nick Powers
Știu că mesajul tău este destul de vechi, dar de dragul altora care ajung aici și au aceeași întrebare. Da, funcționează cu OOP, exact așa cum ai indicat.
luxsub
Este posibil să plasezi un widget cu adsense în tabloul tău de bord pentru un site cu mai mulți utilizatori?
y3kgeek
Idee grozavă. Ce se întâmplă dacă vreau să creez un widget personalizat pentru dashboard pe care doar persoanele cu un anumit rol de utilizator, să zicem Scriitor Colaborator, îl pot vedea?
Personal editorial
Puteți face acest lucru folosind instrucțiunea condițională if user_can sau chiar roluri de utilizator.
Admin
DramaKing
Știu că au trecut trei ani, dar dacă alții ajung aici căutând un răspuns (ca mine), așa am făcut eu. Nu știu multe despre codificare, așa că probabil nu este curat, dar așa am reușit să-l fac să funcționeze:
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { global $wp_meta_boxes;
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Nume widget care va apărea pe tabloul de bord’, ‘custom_dashboard_mail’);
} return true;
}
function custom_dashboard_mail() {
echo ‘Your custom text here.’;
—
Puteți înlocui „delete_users” cu orice altă permisiune doriți, desigur.
Martin
Mulțumesc pentru asta! Funcționează excelent.
Doar o întrebare rapidă:
Dacă vreau să adaug 2 sau mai multe widget-uri personalizate în functions.php, trebuie să schimb numele „action” și „function”?
Personal editorial
Da, ar trebui să adaugi două funcții și acțiuni separate…
Admin
ACS04
Sună bine, dar ar trebui să fie mai bine să creezi un plugin simplu pentru a face acest lucru, astfel încât acest widget să fie independent de teme... Nu crezi?
Personal editorial
Ei bine, poți, dar în cazul nostru conține informații de suport pe care dorim ca clienții noștri să le cunoască. Acest lucru este în principal pentru design-uri de teme personalizate, deci este util doar atunci când tema noastră este activată.
Admin
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
Uau! Nu am mai auzit niciodată de acest truc… Foarte frumos, mulțumesc!
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
Când creezi două widgeturi, cum le faci să fie unul lângă altul, în loc de unul deasupra celuilalt?
Personal editorial
Salut Richard, Poți face ca widgetul tău să fie afișat în partea de sus folosind codul din WordPress Codex Dashboard API. Nu știm cum să le așezăm una lângă alta fără a intra manual și a salva pentru client. Poate că trimiterea unui e-mail lui Jake și întrebarea lui ar fi o idee bună.
Deși rețineți, setările pe care le stabiliți în functions.php nu suprascriu setările normale dacă utilizatorul a modificat anterior setările. Acest lucru funcționează doar dacă utilizatorul nu și-a organizat niciodată tabloul de bord.
Admin
Ash Blue
Folosiți display block pe cel mai exterior element și float left, asigurați-vă că setați o lățime, dar asta ar putea să-l strice. Acest lucru este foarte asemănător cu un layout de galerie. Acest lucru nu este recomandat și nu este neapărat modul în care WordPress a conceput widgeturile să fie utilizate (utilizați pe propriul risc).
david
wpmu. Am găsit /wp-includes/functions.php, dar unde ar trebui să inserez codul? Mulțumesc pentru ajutor
Personal editorial
De fapt, includeți acest lucru în fișierul themes functions.php, nu în fișierul de bază.
Admin
cho
ce vrei să spui prin themes function.php?
nu pot găsi un astfel de fișier
Personal editorial
Există un fișier functions.php situat în folderul temei tale.
Ash Blue
Interesant, am făcut tot asta cu linia de mai jos. Este una mai bună sau ambele sunt la fel de bune?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Contact',
));
}
Personal editorial
Codul dvs. este pentru înregistrarea widgeturilor din bara laterală. Codul pe care îl împărtășim în acest articol este pentru a adăuga un widget personalizat pentru tabloul de bord. Când cineva se conectează la wp-admin, vede statisticile postărilor și alte informații. Această casetă va fi adăugată acolo.
Două subiecte complet diferite.
Admin
Vivek @ InfoEduTech
mulțumesc pentru tutorial.
te rog să nu o iei în nume de rău, ori de câte ori vei posta un articol, postează-l cu captura de ecran corespunzătoare, astfel încât să fie ușor pentru începători.
Jim
Este grozav, mulțumesc pentru distribuire.