Hur du anpassar din WordPress Admin Dashboard

Hur du anpassar din WordPress Admin Dashboard

Anpassade bilar. De tar dig från punkt A till B precis som alla andra bilar. De är tillverkade av samma material och bränner gallon gas precis som alla andra motorfordon. Ändå har vi (eller åtminstone bilaficionados bland oss) en djup kärlek till den specialtillverkade bilen. Varför?


  • De ser bättre ut än motsvarigheterna direkt från monteringslinjen
  • De är optimerade för bättre prestanda

WordPress är ett av de största fordonen du kan använda för att uppnå dina drömmar online. Det kommer med en fantastisk instrumentbräda, och ut ur lådan hjälper WordPress dig och / eller dina kunder att bygga fantastiska webbplatser på nolltid.

Men WordPress admin-instrumentpanelen är för “mainstream” i känsla och utseende. Jag menar, även om det är vackert, utstrålar det inte exakt personlig stil. Det är lite generiskt och kommer förmodligen inte att imponera på en klient som har använt plattformen tidigare. Heck, det kommer inte att imponera på en klient som uppskattar personlig styling eller någon likhet med varumärke.

Å andra sidan är anpassade WordPress-instrumentpaneler personliga och kommer att ge dina kunder den extra måttfaktorn som gör att de längtar efter mer. Du kan bygga ditt varumärke eller ställa in WordPress-instrumentpanelen efter dina kunders behov, vilket ger dig en fantastisk produkt som levereras i bra förpackningar – dina egna anpassade förpackningar. I dagens inlägg kommer vi att:

  • Eliminera onödiga widgetar och menyer för att skapa en renare och lättare anpassad instrumentpanel
  • Anpassa länken till instrumentpanelen
  • Bli av med generiska element som WordPress-logotypen
  • Peka på skärmalternativ
  • Tryck på några plugins som du kan använda för att anpassa din instrumentpanel

I slutet av detta inlägg borde du kunna skapa vackra och personliga WordPress admin-instrumentpaneler som resonerar med dina kunder eller förstärker din närvaro på nätet. Njut till slutet och wow oss med dina tankar i kommentaravsnittet nedan!

Vänta! Skapa ett barn-tema innan vi börjar

Du kan redigera dina kärntema-filer eller använda redigeraren under Utseende i din temadashboard, men det skulle innebära att du aldrig uppdaterar ditt WordPress-tema igen. Innan du gör några ändringar i temafiler bör du göra det skapa ett barntema. På det här sättet när du uppdaterar kärntema kommer alla dina ändringar att förbli i takt. Här är några snabba steg för att få dig att konfigurera just för den här självstudien, men vi har också en fullständig guide för skapande av tematecken eller så kan du referera till WordPress codex för mer hjälp.

  1. Skapa din temamapp för barn: Logga in på din WordPress-installation och leta efter wp-innehåll / teman / yourthemename mapp. Lägg till en ny mapp i den här mappen och namnge det “barn-tema” eller “ditt namn-barn” (du får idén).
  2. Skapa ditt barns temas CSS-fil: Nu när du har en ny mapp med barntema kan du lägga till nya filer för att justera eller åsidosätta stilen och funktionen för ditt nuvarande tema. Skapa först en ny stil.css-fil i din underordnade mapp, redigera sedan den nya filen för att lägga till lite grundläggande rubrikinfo (bara så att du eller efterföljande utvecklare vet vad som händer):
    / *---------------------------------------------------
    Teman namn: ditt barns temmappnamn här
    Beskrivning: Barntema för föräldertemanamn här
    Författare: Ditt namn här
    Mall: överordnatema här
    ----------------------------------------------------* /

    Efter rubriken kan du lägga till alla dina fantastiska CSS för att ändra utseendet på ditt föräldertema med ditt barntema.

  3. Skapa ditt barn-temas PHP-fil: Inuti din nya mapp med barntema skapar du en features.php-fil. Redigera sedan den nya funktionsfilen för att lägga till kod som kommer att ladda ditt ursprungliga “moder” -tema:

    Se bara till att lägga till dina function.php-justeringar efter den senaste öppna PHP-taggen.

Du kan naturligtvis lägga till mycket mer till ditt barntema för att göra ändringar i mallar för din sidhuvud, sidfot eller något annat verkligen. Men i syftet med denna självstudie är du klar! Nu kör vi…

Eliminera onödiga WordPress-instrumentpanelerwidgets

När du loggar in på din WordPress-instrumentpanel kommer du att märka ett par avsnitt (widgetar) som Överblick, Webbstatistik, Snabbt utkast, och WordPress News bland andra. De flesta av dessa instrumentpaneler läggs till av WordPress, men antalet visade widgetar kan gå upp eller ner beroende på ditt tema och / eller plugins. Vissa teman och plugins lägger till sina egna widgetar i instrumentpanelen.

Medan vissa av dessa widgetar är användbara, behöver dina kunder se var och en? Behöver du se var och en av dessa widgetar varje gång du loggar in? Kanske var du tvungen att klara med widgets eftersom du inte hade något sätt att bli av med dem. Idag är din lyckadag. Du kan enkelt ta bort så många instrumentpaneler som du vill använda med några kodrader:

// Ta bort instrumentpaneler
funktion remove_dashboard_meta () {
if (! current_user_can ('manage_options')) {
remove_meta_box ('dashboard_incoming_links', 'dashboard', 'normal');
remove_meta_box ('dashboard_plugins', 'dashboard', 'normal');
remove_meta_box ('dashboard_primary', 'dashboard', 'normal');
remove_meta_box ('dashboard_secondary', 'dashboard', 'normal');
remove_meta_box ('dashboard_quick_press', 'dashboard', 'side');
remove_meta_box ('dashboard_recent_drafts', 'dashboard', 'side');
remove_meta_box ('dashboard_recent_comments', 'dashboard', 'normal');
remove_meta_box ('dashboard_right_now', 'dashboard', 'normal');
remove_meta_box ('dashboard_aktivitet', 'dashboard', 'normal');
}
}
add_action ('admin_init', 'remove_dashboard_meta'); 

Kopiera ovanstående kod i ditt barntema: s funktioner.php-fil (finns på wp-content / themes / yourthemename / Barn tema / functions.php) och spara ändringarna kommer att eliminera alla instrumentpanelerwidgets med undantag för de som läggs till av ditt tema eller plugins. Från koden ovan, alla användare med mindre än admin funktioner kommer inte att se widgets tack vare den här delen av koden:

if (! current_user_can ('manage_options'))

… som kontrollerar om användaren har (‘hantera_optioner’) kapacitet endast tillgänglig för administratörer. Du kanske inte vill bli av med din instrumentpanel för alla widgetar. Du kan använda följande kod istället:

// Skapa den funktion som ska användas i actionkroken
funktion wpexplorer_remove_dashboard_widget () {
remove_meta_box ('dashboard_quick_press', 'dashboard', 'side');
}
add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

Kopiera ovanstående kod till din features.php-fil och spara ändringar för att bli av med Snabbt utkast widget. För att ta bort någon annan widget, byt bara ut ‘Dashboard_quick_press’, ‘dashboard’, ‘side’ med motsvarande snigel för varje widget. Andra standard widget-sniglar inkluderar:

  • dashboard_incoming_links
  • dashboard_plugins
  • dashboard_primary
  • dashboard_secondary
  • dashboard_quick_press
  • dashboard_recent_drafts
  • dashboard_recent_comments
  • dashboard_right_now
  • dashboard_activity

Men du kan ha ytterligare widgetar tillagda av ditt överordnade tema, andra plugins som du har installerat eller till och med din värd (WP Engine lägger till en som heter wpe_dify_news_feed). För att hitta snigeln för dessa tillagda widgetar använder du en webbläsarinspektör (vi gillar den i Chrome – det är en del av deras standardverktyg för webbutvecklare, så allt du behöver göra är att högerklicka på ett element och välja “inspektera”) och kopiera sedan div ID för widgeten du vill ta bort.

Lägga till WordPress Dashboard Widgets

Nu när du kan eliminera instrumentpanelerna som du vill, låt oss försöka lägga till våra egna anpassade widgetar. Du kan visa vad du vill med din widget, så ingenting är att hålla dig tillbaka från att skapa din anpassade instrumentbräda för dina drömmar. Det bästa är att det är superduper enkelt att lägga till en widget till din WordPress-instrumentbräda. Lägg bara till följande kod i din wp-content / themes / yourthemename / Barn tema / functions.php fil:

/ **
* Lägg till en widget i instrumentpanelen.
*
* Denna funktion är ansluten till åtgärden 'wp_dashboard_setup' nedan.
* /
funktion wpexplorer_add_dashboard_widgets () {
wp_add_dashboard_widget (
'wpexplorer_dashboard_widget', // Widget-snigel.
'My Custom Dashboard Widget', // Titel.
'wpexplorer_dashboard_widget_function' // Displayfunktion.
);
}
add_action ('wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets');

/ **
* Skapa funktionen för att mata ut innehållet i din Dashboard-widget.
* /
funktion wpexplorer_dashboard_widget_function () {
echo "Hej där, jag är en stor Dashboard-widget. Redigera mig!";
}

Spara ändringar. Naturligtvis kan du redigera insticksprogrammet så att det passar dina behov. Lägg din HTML, PHP eller vad du än har:

echo "Hej där, jag är en stor instrumentbräda-widget. Redigera mig!";

Din nya anpassade widget kommer att visas längst ner – under alla widgetar – som kan vara utanför visningsområdet om du har många widgetar. Du kan dock dra och släppa widgeten överst (eller någon annanstans för den delen).

Anpassad WordPress Dashboard-sida

Låt oss säga att du är intresserad av att skapa en helt annan instrumentpanel. En som levereras med din egen HTML, PHP och till och med styling. Om du vill gå utöver att bara lägga till / ta bort instrumentpaneler, kontrollera gärna hur du skapar en WordPress anpassad instrumentpanelsida av Remi Corson.

Han har byggt ett fantastiskt plugin som hjälper dig att påskynda din egen anpassade instrumentpanelsida (custom-dashboard.php). Du måste förstärka dina PHP-utvecklingsfärdigheter för att gaffla plugin som passar dina specifika behov. Sammantaget försökte jag Sweet Custom Dashboard och det är fantastiskt. Din anpassade instrumentpanel kan vara en installation bort :). Vill du anpassa ditt välkomstmeddelande, kolla in vårt inlägg om Anpassa ditt WordPress Dashboard välkomstmeddelande.

Ta bort WordPress Dashboard-menyer

Vi kan lägga till eller eliminera WordPress-instrumentpanelerwidgets och till och med ändra hur instrumentpanelen ser helt ut (tack vare Remi). Låt oss nu gå vidare till nästa del: eliminera oönskade menyalternativ.

Varför? Du vill ta bort vissa menyer för att ge kunder en smalare instrumentbräda och hindra dem från att få åtkomst till ”begränsade” områden. Om en klient inte vet sin väg runt WordPress, kan de hamna på webbplatsen om de besöker och ändrar alternativ på sidor som Inställningar eller Plugins. Lägg till följande kod i din features.php-fil:

funktion wpexplorer_remove_menus () {
remove_menu_page ('teman.php'); // Utseende
remove_menu_page ('plugins.php'); // Plugins
remove_menu_page ('users.php'); // Användare
remove_menu_page ('tools.php'); // Verktyg
remove_menu_page ('options-general.php'); // Inställningar
}
add_action ('admin_menu', 'wpexplorer_remove_menus');

Ovanstående kod tar bort menylänkar till Inställningar, Plugins, Utseende, Användare och Verktyg för alla användare. Du kan också ta bort undermenyer. Här är exempelkoden som tar bort undermenyn Widgets under Utseende:

funktion wpexplorer_adjust_the_wp_menu () {
$ page = remove_submenu_page ('teman.php', 'widgets.php');
}
add_action ('admin_menu', 'wpexplorer_adjust_the_wp_menu', 999);

I exemplet ovan kommer användare att komma åt alla undermenyer under Utseende utom Widgets. Du kan ta bort så många menyer eller undermenyer du vill. Kom ihåg att detta inte hindrar användare från att komma direkt till dessa sidor. Jag menar, om en användare skriver in, till exempel yourdomain.com/wp-admin/options-general.php, kommer de att komma åt sidan Inställningar. Bra att de flesta användare inte bry sig om objektet inte finns på menyn.

Om du inte kan eller inte vill redigera din features.php-fil kan du alltid installera Admin Menu Editor plugin, vilket ger dig full kontroll över dina menyer. Det levereras med ett par coola funktioner inklusive rollbaserade menybegränsningar, möjlighet att dölja menyer och skapa anpassade menyalternativ bland andra coola funktioner.

Anpassa sidfoten för WordPress Dashboard

För tillfället har vi gjort “betydelsefull” anpassning till din WordPress admin-instrumentpanel. Det är bara rätt att ta lite kredit för allt det lysande arbetet du gör. Anpassa sidfoten (“Tack för att du skapade med WordPress.”) Kan ytterligare hjälpa till att stärka ditt (eller kundens) varumärke. Låt oss ändra sidfot till “Byggt med kärlek av ditt namn.” Lägg bara till följande kodavsnitt i din features.php-fil och spara ändringar:

// Anpassad sidfot
funktion wpexplorer_remove_footer_admin () {
echo 'Byggt med kärlek av WPExplorer';
}
add_filter ('admin_footer_text', 'wpexplorer_remove_footer_admin');

Ersätt “ditt namn” med ditt namn, webbplats, e-postadress etc och yourdomain.com med ditt faktiska domännamn. Gå vidare…

Anpassa inloggningsformuläret

Hittills har du allt som krävs för att anpassa din WordPress admin-instrumentpanel. Låt oss gå ett steg längre och anpassa inloggningssidan så att dina användare kan få en riktigt personlig upplevelse från början. När allt kommer omkring, varför bry sig om att anpassa din WordPress-instrumentpanel bara för att ges bort av inloggningssidan?

Med den här sidan måste vi anpassa två element: standard WordPress-logotypen och länken wordpress.org som medföljer. Men innan jag visar dig koden ��, kan du anpassa din inloggningssida enkelt med någon av dessa 15 bästa anpassade inloggningssidor för WordPress. Nu, för den varma fuzzy känsla som kommer från att spela med koden, kopiera följande till dina funktioner.php:

funktion wpexplorer_login_logo () {?>

Byt ut logo.png med ditt anpassade filnamn som du först ska ladda upp till wp-content / themes / yourtheme / bilder. Håll din anpassade logotyp under 80 x 80 pixlar även om du kan ändra den med vissa anpassade CSS. Med den anpassade inloggningslogotypen på plats är det dags att ändra länken som kommer med den ursprungliga WordPress-logotypen. Låt oss länka din nya logotyp till din webbplats. Kopiera den här koden till din features.php-fil och spara ändringar:

funktion wpexplorer_login_logo_url () {
returnera esc_url (home_url ('/'));
}
add_filter ('login_headerurl', 'wpexplorer_login_logo_url');

funktion wpexplorer_login_logo_url_title () {
returnera "Your Site Name and Info";
}
add_filter ('login_headertitle', 'wpexplorer_login_logo_url_title');

Kom ihåg att du kan alltid utforma din inloggningssida som du vill använda CSS. Eller så kan du helt enkelt börja med ett fantastiskt tema som Total Multi-purpose & Responsive WordPress-tema som kommer med inbyggda alternativ för en anpassad inloggningssida och webbplatsmärke.

Anpassa WordPress Dashboard: Skärmalternativ

Om du inte vill dyka in i kod eller installera plugins kan du dra nytta av Skärmalternativ för att skapa en anpassad WordPress-instrumentpanel. Logga bara in på din WordPress-instrumentpanel och längst upp på skärmen till höger ser du en rullgardinsmeny för skärmalternativ. Klicka på detta för att utvidga och markera / avmarkera för att aktivera / inaktivera widgetar. Du kan sedan dra och släppa dina widgetar för att ordna dem som du vill.

Den enda nackdelen är att den här metoden sparar dina inställningar per användare, vilket innebär att det inte kommer att göra dig mycket bra om du har en blogg med flera författare. Du kan inte heller hindra användare från att återaktivera widgetsna när som helst.

Bonus: Använd ett plugin

Vi har använt större delen av vår tid på att täcka kodalternativ. Men om du är klämd i tid, kan ett plugin vara till hjälp.

Alternativ 1: Ultimate Tweaker Plugin för WordPress

Ultimate Tweaker för WordPress

Först upp, något lite annorlunda: Ultimate Tweaker för WordPress, tillgänglig från CodeCanyon. Det verkligt ultimata plugin-alternativet för att redigera din WordPress-admin (ad några andra WordPress-funktioner).

De flesta plugins stöder funktionalitet för ett specifikt syfte, men inte Ultimate Tweaker; detta plugin är en mångsidig allroundare, som jag aldrig sett förut. I grund och botten stöder Ultimate Tweaker 240+ olika WordPress-hack, tricks och verktyg för att göra ditt liv enklare. Detta gör det användbart på flera sätt: förbättra effektiviteten, ta bort de delar av WordPress som irriterar dig och utöka WordPress-kärnfunktionen utöver vad du trodde var möjligt.

Dessa 240 hacks är verkligen olika och kan delas upp i 35 olika kategorier. För att ge dig en uppfattning om vad Ultimate Tweaker kan göra, här är bara några av dess "hacks:"

  • Lägg till en logotyp ovanför en sidofältmeny
  • Rebrandera WordPress-instrumentpanelen och inloggningssidan
  • Inaktivera högerklicka eller knappen Skriv ut skärm på din webbplats
  • Öka säkerheten genom att lägga till reCaptcha 2 till din inloggningsskärm
  • Ställ in JPEG-kvalitet för att minska filstorleken på bilder
  • Aktivera kortkoder i textwidgets
  • Skapa ett minimalt antal ord för inlägg
  • Inaktivera fel lösenord "skaka" på inloggningsskärmen
  • Lägg till Google Analytics-kod på din webbplats
  • 19 nya kortkommandon för WordPress
  • Skapa en anpassad 404-sida
  • Inaktivera automatiska WordPress-uppdateringar

Många av dessa WordPress-hackar är saker som vi alla har vänt oss till Google vid någon tidpunkt. De flesta av dem är relativt små av sig själva, men med en omfattande lista på flera hundra kan kollektivet kollektivt erbjuda mycket värde. WordPress-communityn är vanligtvis mycket stämma om vad de vill se från WordPress-kärnan, så jag hoppas verkligen att utvecklarna lyssnar på gemenskapen och implementerar några av sina förslag i framtida uppdateringar av detta plugin.

Alternativ 2: Skog - Revolution WordPress Admin Theme

Forest WordPress admin tema

Vill du bara ändra branding på backend på din webbplats? Vi rekommenderar vanligtvis att använda lite kod, men du kan också använda ett plugin. Om du är uttråkad av standardpanelets utseende, låter Forest WordPress administratortema ge dig det lite av en ansiktslyftning. Och för bara 9 dollar. Forest kommer inte att ändra hur du gör bekanta uppgifter i WordPress, som att lägga till inlägg / sidor, det kommer bara att göra WordPress se bättre när du gör dem! Plugin låter dig också ändra WordPress-inloggningssidan.

Forest admin tema skärmdump

Med Forest kan du lägga till din egen bakgrundsbild till WordPress-instrumentpanelen - eller så kan du använda en av de sex bilder som finns gratis, inklusive den i skärmdumpen ovan. Du kan anpassa instrumentpanelen med din egen kreativitet (med obegränsade färger) eller med ett av WordPress-standardscheman. Du kan ytterligare anpassa instrumentpanelen genom att välja din egen typografi från över 600 Google-teckensnitt. Plugin stöder en ljus och mörk hud, och du kan konfigurera opacitetsnivåerna för varje element. Om det finns några knappar i instrumentpanelen som du inte använder kan du till och med dölja dem - det här är bra för klientwebbplatser där för många alternativ kan överbelasta dem.

Obs: Forest kommer inte att ändra utseendet på din live-webbplats på något sätt, det är bara för back-end.

Resurser för att anpassa WordPress Dashboard

Vill du lära dig mer om anpassning av WordPress-instrumentpanelen? Här är några extra resurser för din professionella verktygssats:

Över till dig…

Att skapa en anpassad WordPress admin-instrumentbräda är ett av de bästa sätten att stärka varumärkesimage och tillhandahålla personlig erfarenhet till dina kunder. Det är enkelt och tar inte mycket av din tid. Så vad väntar du på? Få anpassning.

Annat än det, vad lärde du dig här idag? Har du någonsin skapat en anpassad WordPress admin-instrumentpanel? Dela med vår ivriga gemenskap i kommentarerna nedan. Skål!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map