När vi bygger WordPress-webbplatser för kunder lägger vi ofta till anpassade widgets i instrumentpanelen. Det är ett enkelt sätt att visa hjälpsamma anteckningar, länkar eller instruktioner precis där användaren loggar in.
Standardinstrumentpanelen visar inte alltid den information som folk faktiskt behöver. Det är därför vi gillar att anpassa den – för att göra adminområdet mer användbart och personligt.
Du kanske vill visa ett välkomstmeddelande, visa supportkontaktinformation eller inkludera en snabb handledning. Oavsett anledning är det lätt att göra när du väl vet hur.
I den här guiden visar vi hur du lägger till en anpassad instrumentpanelswidget i WordPress – med kod eller ett plugin, vilket du än föredrar.
Vad är WordPress Admin Dashboard Widgets?
Dashboard-widgets är de små rutorna du ser när du loggar in på din WordPress-webbplats. De visar snabb information, användbara länkar och uppdateringar om din webbplats.
Som standard ger WordPress dig widgets som "Översikt", "Aktivitet", "Webbplatsens hälsa" och "Snabbutkast". Men du kan lägga till egna widgets med anpassat innehåll som passar dina behov.
Snabbtips: Varje användare på din webbplats kan välja vilka widgets de vill se. De kan visa, dölja eller ordna om dem för att matcha deras arbetsflöde.
Varför instrumentpanelswidgets är användbara:
- De visar användbar data i samma ögonblick som du loggar in.
- Du kan snabbt komma åt verktyg eller innehåll utan att behöva leta igenom menyer.
- Anpassade widgets låter dig personifiera instrumentpanelen för dina specifika behov.
Var hittar du dem:
Dessa widgets visas på huvudinstrumentpanelen inuti WordPress adminområde. Du kan flytta runt dem genom att dra och släppa, eller dölja dem med hjälp av fliken Skärmalternativ högst upp.
Varför och hur vi använder anpassade admin-widgetar i WordPress
Anpassade instrumentpanelswidgets är ett utmärkt sätt att personalisera WordPress-administratörsupplevelsen. Vi har använt dem på många klientwebbplatser för att visa hjälpsam information, länka till viktiga verktyg eller förenkla introduktionsprocessen.
Oavsett om du driver din egen webbplats eller hanterar flera för kunder, kan anpassade widgets spara tid och göra administrationsområdet mer användbart.
Verkliga användningsfall:
- Anpassning: Lägg till ett välkomstmeddelande, visa nyckelstatistik eller länka till sidor som ditt team ofta använder.
- Utvecklaranvändning: Utvecklare skapar ofta widgets som guidar kunder med genvägar till vanliga uppgifter som uppdateringar eller säkerhetskopior.
Hur vi använder dem på våra webbplatser:
Vi förlitar oss på en uppsättning måste-ha WordPress-plugins, och många av dem inkluderar inbyggda instrumentpanelswidgets.
En vi ofta använder är All in One SEO Översiktswidget. Den visar TruSEO-poäng för vårt innehåll och ger direkta länkar för att förbättra dem.
Vi använder också widgeten MonsterInsights. Den ger oss en snabb överblick över vår webbplatstrafik och prestanda direkt från instrumentpanelen.
Den är också flexibel – vi kan välja vilken data som ska visas beroende på vem som använder den.
Eftersom varje teammedlem har olika behov kan de visa eller dölja widgets och ordna instrumentpanelen hur de vill. Det är en liten funktion som gör stor skillnad för produktiviteten.
Hur man skapar anpassade WordPress Admin-widgets
Det finns två huvudsakliga sätt att skapa anpassade WordPress-instrumentpanels-widgets. Du kan använda snabblänkarna nedan för att hoppa till den metod du vill använda:
- Metod 1: Skapa anpassade widgetar för instrumentpanelen med anpassad kod (mer anpassningsbar)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
Metod 1: Skapa anpassade widgetar för instrumentpanelen med anpassad kod (mer anpassningsbar)
För den här metoden behöver du lägga till anpassad kod på din WordPress-webbplats för att skapa en instrumentpanelswidget. Det kräver en grundläggande förståelse för WordPress-programmering. Så om du inte vill skriva kod kan du hoppa till nästa metod.
Vi visar den här metoden först eftersom den är mer flexibel och lämnar utrymme för dig att lägga till vilken kod du vill köra inuti din anpassade widget.
Vi visar dig koden du behöver, och sedan kan du anpassa den för att lägga till din kod med PHP, HTML eller JS.
När det gäller att lägga till anpassad kod på din WordPress-webbplats, tänker många användare på temat functions.php-fil. Även om den här metoden fungerar, tror vi att det finns ett bättre och säkrare sätt att hantera anpassade kodavsnitt – att använda WPCode.
Att redigera filen functions.php kan ibland orsaka att din webbplats kraschar om det finns ett fel i koden. Dessutom kommer du att förlora din anpassade kod om du byter eller uppdaterar temat utan att säkerhetskopiera dina ändringar.
WPCode låter dig å andra sidan lägga till anpassad kod säkert utan att krascha din webbplats. Det gör det också enkelt att hantera kodavsnitt och slå på och av dem vid behov.
Obs: En gratisversion som heter WPCode Lite finns också tillgänglig, som du kan använda för den här handledningen. Vi rekommenderar dock att uppgradera till en betald plan för att låsa upp fler funktioner.
Först måste du installera och aktivera WPCode-pluginet. För mer information, se vår artikel om att installera ett WordPress-plugin.
När det har aktiverats måste du gå till sidan Kodavsnitt » +Lägg till kodavsnitt och välja 'Lägg till din anpassade kod (nytt kodavsnitt)' för att skapa ett nytt kodavsnitt.
På nästa skärm behöver du ange ett namn för din anpassade kod och välja 'PHP Snippet' som 'Kodtyp'.
Lägg sedan till följande kod i rutan Kodförhandsgranskning:
//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>';
}
Så här bör det se ut i ditt WPCode-gränssnitt:
Här är en liten förklaring av koden:
Funktionen my_custom_dashboard_widgets() registrerar den anpassade widgeten med hjälp av funktionen wpb_add_dashboard_widget(). Den tar tre argument. Det första är den anpassade widgetens ID, det andra är widgetens titel och det tredje argumentet är callback-funktionen.
custom_dashboard_help() är vår callback-funktion, och inuti den har vi lagt till HTML-koden vi vill visa när widgeten visas.
Vi har kopplat vårmy_custom_dashboard_widgetsfunktion tillwp_dashboard_setuphooken medadd_action. Den här hooken ställer i princip in instrumentpanelsidan för visning.
Efter att ha lagt till den anpassade koden måste du skrolla ner till sektionen 'Infogning' och välja 'Endast admin' från rullgardinsmenyn Plats.
Klicka slutligen på knappen 'Spara kodavsnitt' och växla statusalternativet till 'Aktiv'.
Det var allt. Du kan nu besöka instrumentpanelsidan för att se din anpassade WordPress admin-instrumentpanelswidget i aktion.
Metod 2: Skapa anpassad instrumentpanelswidget med plugin (enklare)
Den här metoden är enklare, men vi placerade den som den andra metoden eftersom den är lite mindre flexibel än att lägga till anpassad kod.
För den här metoden kommer vi att använda Ultimate Dashboard-pluginet. Det är ett av de bästa WordPress admin-dashboard-plugins och hjälper dig att enkelt skapa anpassade admin-widgets.
För mer information, se vår kompletta recension av Ultimate Dashboard.
Först måste du installera och aktivera pluginet Ultimate Dashboard. För mer information, se vår artikel om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan Ultimate Dash…» Lägg till ny. Först måste du ange en titel för din widget och sedan välja en Widgettyp.
Det finns tre typer av widgets du kan skapa:
- Ikonwidget – Visa en stor ikon och peka den mot vilken sida som helst på din webbplats.
- Text Widget – Den använder en visuell redigerare där du kan lägga till vilken text du vill med några grundläggande formateringsalternativ.
- HTML-widget – Lägg till HTML-kod i din anpassade widget.
Låt oss titta på var och en av dem.
1. Skapa anpassad ikonwidget
Välj 'Ikon-widget' som 'Widgettyp' och välj sedan ikonen du vill visa. Som standard kommer den med ett begränsat antal ikoner att välja mellan.
Nedan kan du lägga till lite text under 'Verktygstips' för att förklara för användarna vad som händer när de klickar på ikonen. Till exempel: 'Tar dig till WordPress-inställningssidan.'
Lägg sedan till länken dit du vill skicka användare när de klickar på ikonen.
Klicka slutligen på 'Publicera' för att spara dina ändringar och besök instrumentpanelen för att se widgeten i aktion.
Så här skulle det se ut.
2. Skapa en anpassad textwidget
Om du inte redan är där, gå till sidan Ultimate Dash…» Lägg till ny. Välj ‘Text Widget’ som din Widgettyp.
Pluginet kommer att visa dig en visuell textredigerare (samma som den gamla klassiska redigeraren) där du kan lägga till vilken text du vill visa med grundläggande HTML-formatering.
När du är klar klickar du på 'Publicera' för att spara dina ändringar.
Du kan nu besöka din admin-instrumentpanel för att se den här anpassade admin-widgeten i aktion.
3. Skapa en anpassad HTML-widget
Om du inte redan är där, måste du gå till sidan Ultimate Dash…» Lägg till ny. Välj 'HTML-widget' som din widgettyp.
Pluginet visar dig en HTML-redigerare där du kan lägga till valfri HTML-kod med inbäddad CSS.
När du är klar klickar du på 'Publicera' för att spara dina ändringar.
Du kan nu besöka din admin-instrumentpanel för att se den här anpassade admin-widgeten i aktion.
Med Ultimate Dashboard kan du skapa så många anpassade widgetar du vill och blanda olika widgettyper för att skapa en hjälpsam instrumentpanelsupplevelse.
Ta din WordPress adminpanel till nästa nivå
WordPress adminområde är där de flesta webbplatsägare spenderar mycket tid med att skriva innehåll, skapa sidor, hantera beställningar och mer.
Här är några ytterligare resurser för att optimera WordPress admin-instrumentpanelen:
- Hur man anpassar WordPress Admin Dashboard
- Hur du vitmärker din WordPress-adminpanel
- Hur man skapar automatiserade arbetsflöden i WordPress
- Plugins och tips för att förbättra WordPress adminområde
Vi hoppas att den här artikeln hjälpte dig att lägga till anpassade instrumentpanelswidgets i WordPress admin-området. Du kanske också vill se vår WordPress säkerhetsguide eller titta på den här handledningen om hur man döljer onödiga menyalternativ från admin-området.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Brandon
Mycket användbart. Tack.
WPBeginner Support
Kul att det var användbart!
Admin
Jef Vermeire
Kan du lägga till flera widgets av samma typ på WordPress-instrumentpanelen. Till exempel, kan jag lägga till den anpassade 'custom_help_widget' två gånger på min instrumentpanel?
WPBeginner Support
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!
WPBeginner Support
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Tack för att du delar detta, det här är för fantastiskt, jag älskar det.
WPBeginner Support
Glad you found our guide helpful
Admin
Mike
Är det möjligt att styla widgeten med anpassade attribut via HTML eller CSS?
WPBeginner Support
Du skulle kunna, men det går lite utöver vad vi täcker i våra artiklar.
Admin
daan van middendorp
Hur kan jag använda detta för en anpassad roll?
WPBeginner Support
Om din anpassade roll kan se instrumentpanelswidgetar, bör den kunna se den anpassade widgeten.
Admin
haqem
hur man placerar denna anpassade widget i området "Lägg till nytt inlägg" för att skriva
Ron Sierra
Detta frågades en gång men jag kunde inte hitta svaret eller reply. Hur skapar jag flera instrumentpanelswidgets?
Bjornen
Hur lägger jag till wp_mail-funktionen i den här widgeten?
Betydelse; hur ger jag kunden ett kontaktformulär i den widgeten?
Vishah
Hur lägger jag till en knapp?
Wade
Använde din kod och fick den vita dödsskärmen. WP 4.7.2
Några idéer?
WPBeginner Support
Hej Wade,
Du kan ta bort koden med FTP. Se även vår guide om hur du åtgärdar white screen of death i WordPress
Admin
gobinda das
kan jag ändra rubriken Flowtown-tema till något annat
Javier
Hej, jag försöker skapa anpassade widgetar per användare. Varje användare behöver ha en widget med olika text i sig.
Finns det något sätt att uppnå detta?
David Guerreiro
Det är väldigt enkelt! Med PHP, hämta den aktuella användaren i funktionen du använder för att visa metaboxinnehållet och ändra HTML beroende på den hämtade användaren. Titta på detta:
Lại Đình Cường
Hej Syed Balkhi, hur kan jag lägga till en ny admin-widget med ordning?
shakun
Hur man lägger till flera widgets på instrumentpanelen
Nishant
jag försökte infoga en do_shortcode() med kortkod för ett kontaktformulär för att ge användaren snabb åtkomst att rapportera eventuella buggar eller ge feedback men det fungerar inte... någon idé hur man får CF 7 att fungera med detta?
Tack
Dustin
Det vore bra att veta. Jag försöker också använda en kortkod i en instrumentpanelswidget.
Mike
Detta fungerar inte för mig i 3.5. Finns det några uppdateringar för att få detta att fungera? Tack!
smayzes
Är det möjligt att göra detta med OOP?
t.ex.:
inuti en klass:
wp_add_dashboard_widget(‘custom_help_widget’, ‘Hjälp och support’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>Välkommen till ditt anpassade CMS!’;
}
Nick Powers
Jag vet att ditt meddelande är ganska gammalt, men för andras skull som kommer hit och har samma fråga. Ja, det fungerar med OOP, precis som du har angett.
luxsub
Är det möjligt att lägga en widget med AdSense på instrumentpanelen för en webbplats med flera användare?
y3kgeek
Bra idé. Vad händer om jag vill skapa en anpassad instrumentpanels-widget som bara personer med en viss användarroll, säg bidragande skribent, kan se?
Redaktionell personal
Du kan göra detta genom att använda villkorssatsen if user_can eller till och med användarroller.
Admin
DramaKing
Jag vet att det har gått tre år, men om andra råkar komma hit och leta efter ett svar (som jag), så här gjorde jag. Jag kan inte mycket om kodning så det är förmodligen inte rent, men så här lyckades jag få det att fungera:
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’, ‘Widgetnamn att visa på instrumentpanelen’, ‘custom_dashboard_mail’);
} return true;
}
function custom_dashboard_mail() {
echo ‘Din anpassade text här.’;
}
—
Du kan naturligtvis ersätta 'delete_users' med vilken behörighet du vill.
Martin
Tack för detta! Det fungerar utmärkt.
Bara en snabb fråga:
Om jag vill lägga till 2 eller fler anpassade widgets i functions.php, måste jag ändra namnen på "action" och "function"?
Redaktionell personal
Ja, du skulle behöva lägga till två separata funktioner och åtgärder...
Admin
ACS04
Låter bra, men det borde vara bättre att skapa ett enkelt plugin för att göra det, på så sätt blir denna widget oberoende av teman... Tror du inte?
Redaktionell personal
Tja, det kan du, men i vårt fall innehåller det supportinformation som vi vill att våra kunder ska veta. Detta är mest för anpassade temadesigner, så det är bara bra att ha när vårt tema är aktiverat.
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
Wow! Har aldrig hört talas om det tricket förut… Mycket bra, tack!
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
när man skapar två widgets, hur gör man så att de hamnar sida vid sida istället för en ovanför den andra?
Redaktionell personal
Hej Richard, Du kan få din widget att visas allra högst upp med hjälp av koden i WordPress Codex Dashboard API. Vi vet inte hur man ställer in dem sida vid sida utan att manuellt gå in och spara det för klienten. Kanske skulle det vara en bra idé att skicka ett e-postmeddelande till Jake och fråga honom.
Även om du kommer ihåg, inställningarna du ställer in i functions.php åsidosätter inte de normala inställningarna om användaren tidigare har ändrat inställningarna. Detta fungerar bara om användaren aldrig har organiserat sin instrumentpanel tidigare.
Admin
Ash Blue
Använd display block på det yttersta elementet och float left, se till att sätta en bredd, men det kan bryta det. Detta liknar mycket ett gallerilayout. Detta rekommenderas inte och är inte nödvändigtvis hur WordPress designade widgetar att användas (använd på egen risk).
david
wpmu. Jag har hittat /wp-includes/functions.php men var ska jag infoga koden? Tack för din hjälp
Redaktionell personal
Du inkluderar faktiskt detta i din temas functions.php-fil, inte i kärnfilen.
Admin
cho
vad menar du med themes function.php?
Jag kan inte hitta en sådan fil
Redaktionell personal
Det finns en fil som heter functions.php som ligger i ditt temas mapp.
Ash Blue
Intressant, jag gjorde allt detta med raden nedan. Är den ena bättre, eller är båda lika bra?
if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name'=>'Kontakt', )); }
Redaktionell personal
Din kod är för att registrera sidofältswidgets. Koden vi delar i den här artikeln är för att lägga till en anpassad instrumentpanelswidget. När man loggar in på sin wp-admin ser de inläggsstatistik och annan information. Den här rutan kommer att läggas till där.
Två helt olika ämnen.
Admin
Vivek @ InfoEduTech
tack för handledningen.
snälla ta det inte fel när du ska publicera en artikel, posta den med en lämplig skärmdump så att det blir lättare för nybörjare.
Jim
Det här är fantastiskt, tack för att du delar med dig.