Slik tilpasser du WordPress Admin Dashboard

Tilpassede biler. De vil ta deg fra punkt A til B akkurat som enhver annen bil. De er laget av de samme materialene og brenner liter gass akkurat som alle andre motorvogner. Likevel har vi (eller i det minste bilens elskere blant oss) en dyp forkjærlighet for den skreddersydde bilen. Hvorfor?


  • De ser bedre ut enn kollegene rett utenfor samlebåndet
  • De er optimalisert for bedre ytelse

WordPress er en av de største kjøretøyene du kan bruke for å oppnå dine online drømmer. Det kommer med et flott instrumentpanel, og ut av boksen vil WordPress hjelpe deg og / eller kundene dine med å bygge gode nettsteder på kort tid.

Men WordPress admin-dashbordet er for “mainstream” når det gjelder følelse og utseende. Jeg mener, selv om det er vakkert, oser det ikke akkurat personlig stil. Det er litt generisk og vil sannsynligvis ikke imponere en klient som har brukt plattformen før. Pokker, det vil ikke imponere en klient som setter pris på personlig styling eller likhet med merkevarebygging.

På den annen side er tilpassede WordPress-dashboards personlige og vil gi dine kunder den ekstra følelsesmessige faktoren som gjør at de lengter etter mer. Du kan bygge merkevaren din eller stille inn WordPress-instrumentbordet til kundenes behov, og gi deg et flott produkt som kommer i flott emballasje – din egen tilpassede emballasje. I dagens innlegg vil vi:

  • Fjern unødvendige widgeter og menyer for å lage et renere og lettere tilpasset dashbord
  • Tilpass bunntekstkoblingen til dashbordet
  • Bli kvitt generiske elementer som WordPress-logoen
  • Berør alternativer på skjermen
  • Trykk på noen få plugins du kan bruke til å tilpasse dashbordet

Mot slutten av dette innlegget, bør du være i stand til å lage vakre og personlige WordPress admin-dashboards som resonerer med dine klienter eller forsterker din tilstedeværelse på nettet. Kos deg til slutten og wow oss med tankene dine i kommentarfeltet nedenfor!

Vente! Lag et barn-tema før vi begynner

Du kan redigere kjernetemafilene dine, eller bruke Editoren under Utseende i temadashbordet, men det vil bety at du aldri oppdaterer WordPress-temaet igjen. Før du gjør endringer i temafiler, bør du gjøre det lage et barn-tema. På denne måten når du oppdaterer kjernetemaet, vil alle endringene dine forbli i takt. Her er noen raske trinn for å få deg til å konfigurere bare for denne opplæringen, men vi har også en fullstendig guide for opprettelse av temaer for barn, eller du kan referere til WordPress codex for mer hjelp.

  1. Lag din temamappe for barnet ditt: Logg på WordPress-installasjonen din og finn wp-content / themes / yourthemename mappe. I denne mappen kan du legge til en ny mappe og gi den navnet “barn-tema” eller “ditt navn-barn” (du får ideen).
  2. Lag CSS-filen for barnet ditt: Nå som du har en ny mappe med tema-tema, kan du legge til nye filer for å finjustere eller overstyre stilen og funksjonen til det nåværende temaet. Lag først en ny style.css-fil i mappen for temaet ditt for barn, og rediger deretter den nye filen for å legge til litt grunnleggende overskriftsinfo (bare slik at du eller påfølgende utviklere vet hva som skjer):
    / *---------------------------------------------------
    Tema Navn: Ditt barn Tema-mappenavn her
    Beskrivelse: Barnetema for Foreldertema Navn her
    Forfatter: Navnet ditt her
    Mal: Navn på overordnet tema her
    ----------------------------------------------------* /

    Etter overskriften kan du legge til alle de fantastiske CSS-ene dine for å endre utseendet på foreldertemaet ditt ved å bruke ditt tema.

  3. Lag PHP-filen for barnet ditt: Inne i den nye mappen med tema for barn oppretter du en features.php-fil. Neste rediger den nye funksjonsfilen for å legge til kode som vil laste det originale “overordnede” temaets styling:

    Bare sørg for å legge til funksjonen din.php-justeringer etter den siste åpne PHP-koden.

Du kan selvfølgelig legge til mye mer til temaet ditt for å gjøre endringer i maler for topptekst, bunntekst eller noe annet. Men med tanke på denne opplæringen er du klar! Så her går vi …

Eliminering av unødvendige widgeter fra WordPress Dashboard

Når du har logget deg på WordPress-oversikten, vil du legge merke til et par seksjoner (widgeter) som På et øyeblikk, Nettstatistikk, Rask utkast, og WordPress News blant andre. De fleste av disse dashbord-widgetene er lagt til av WordPress, men antallet widgets som vises kan gå opp eller ned, avhengig av tema og / eller plugins. Noen temaer og plugins legger til egne widgets på dashbordet.

Mens noen av disse widgetene er nyttige, trenger kundene dine å se dem? Må du se hver av disse widgetene hver gang du logger deg på? Kanskje du måtte slå opp med widgetene fordi du ikke hadde noen måte å bli kvitt dem. I dag er din heldige dag. Du kan enkelt fjerne så mange instrumentpaneler som du ønsker ved å bruke noen få kodelinjer:

// Fjern instrumentpaneler
funksjon 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'); 

Kopiering av koden over i filen for ditt barntema features.php (funnet på wp-content / themes / yourthemename / barn-tema / functions.php) og lagring av endringene vil eliminere alle dashbord-widgets, med unntak av de som er lagt til av temaet eller plugin-ene. Fra koden over er alle brukere med mindre enn admin evner vil ikke se widgetene takket være denne delen av koden:

if (! current_user_can ('manage_options'))

… som sjekker om brukeren har (‘manage_options’) -funksjon bare tilgjengelig for administratorer. Kanskje du ikke vil kvitte deg med dashbordet for alle widgeter. Du kan bruke følgende kode i stedet:

// Lag funksjonen du vil bruke i handlingen
funksjon wpexplorer_remove_dashboard_widget () {
remove_meta_box ('dashboard_quick_press', 'dashboard', 'side');
}
add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

Kopier ovennevnte kode til funksjonsfilen og lagre endringer for å bli kvitt Rask utkast widget. Hvis du vil fjerne en annen widget, er det bare å bytte ut ‘Dashboard_quick_press’, ‘dashboard’, ‘side’ med tilsvarende snegle for hver widget. Andre standard widget-snegler inkluderer:

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

Men det kan hende at du har flere widgets lagt til av ditt overordnede tema, andre plugins du har installert eller til og med hosting (WP Engine legger til en som heter wpe_dify_news_feed). For å finne slug for disse lagt widgets bruker du en nettleserinspektør (vi liker den i Chrome – det er en del av standardverktøyene for nettutvikler, så alt du trenger å gjøre er å høyreklikke på et element og velge “inspisere”) og deretter kopiere div ID for widgeten du vil fjerne.

Legge til WordPress Dashboard-widgeter

Nå som du kan eliminere dashbord-widgeter når du vil, la oss prøve å legge til egne tilpassede widgeter. Du kan vise hva du vil med widgeten din, så ingenting er å holde deg tilbake fra å lage det tilpassede dashbordet for drømmene dine. Det beste er at det er superduper enkelt å legge til en widget til WordPress-dashbordet. Bare legg til følgende kode i din wp-content / themes / yourthemename / barn-tema / functions.php fil:

/ **
* Legg til en widget på dashbordet.
*
* Denne funksjonen er koblet til 'wp_dashboard_setup' -aksjonen nedenfor.
* /
funksjon wpexplorer_add_dashboard_widgets () {
wp_add_dashboard_widget (
'wpexplorer_dashboard_widget', // Widget-snegl.
'My Custom Dashboard Widget', // Tittel.
'wpexplorer_dashboard_widget_function' // Skjermfunksjon.
);
}
add_action ('wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets');

/ **
* Lag funksjonen for å sende ut innholdet i Dashboard-widgeten.
* /
funksjon wpexplorer_dashboard_widget_function () {
ekko "Hallo der, jeg er en flott Dashboard-widget. Rediger meg!";
}

Lagre endringer. Selvfølgelig kan du redigere plugin-en slik at den passer dine behov. Plasser din HTML, PHP eller hva du enn har:

ekko "Hallo der, jeg er en flott dashbord-widget. Rediger meg!";

Den nye egendefinerte widgeten din vises helt på bunnen – under alle widgetene – som kan være utenfor visningsområdet hvis du har mange widgeter. Du kan imidlertid dra og slippe widgeten øverst (eller hvor som helst ellers for den saks skyld).

Tilpasset WordPress-oversiktsside

La oss si at du er interessert i å lage et helt annet instrumentpanel. En som følger med din egen tilpassede HTML, PHP og til og med styling. Hvis du vil gå utover bare å legge til / fjerne dashbord-widgeter, kan du sjekke ut hvordan du oppretter en tilpasset WordPress-side fra Remi Corson.

Han har bygget en flott plugin som vil hjelpe deg med å øke hastigheten på å lage din egen tilpassede dashbord-side (custom-dashboard.php). Du må børste opp PHP-utviklingsferdighetene dine for å gaffel plugin-en som passer dine spesifikke behov. Alt i alt prøvde jeg Sweet Custom Dashboard og det er utrolig. Det tilpassede dashbordet ditt kan være en installasjon borte :). Vil du tilpasse velkomstmeldingen, sjekk innlegget vårt om Tilpasse velkomstmeldingen for WordPress Dashboard.

Fjerne WordPress Dashboard-menyer

Vi kan legge til eller eliminere WordPress-dashbord widgets og til og med endre hvordan dashbordet ser helt ut (takket være Remi). La oss nå gå videre til neste del: eliminere uønskede menyelementer.

Hvorfor? Du vil fjerne noen menyer for å gi klienter et slankere instrumentbord og forhindre at de får tilgang til “begrensede” områder. Hvis en klient ikke vet veien rundt WordPress, kan de ende opp med å ødelegge nettstedet hvis de besøker og endrer alternativer på sider som Innstillinger eller plugins. Legg til følgende kode i funksjonsfilen:

funksjon wpexplorer_remove_menus () {
remove_menu_page ('temaer.php'); // Utseende
remove_menu_page ('plugins.php'); // Plugins
remove_menu_page ('brukere.php'); // Brukere
remove_menu_page ('tools.php'); // Verktøy
remove_menu_page ('options-general.php'); // Innstillinger
}
add_action ('admin_menu', 'wpexplorer_remove_menus');

Ovenstående kode fjerner menykoblingene til Innstillinger, plugins, utseende, brukere og verktøy for alle brukere. Du kan fjerne undermenyer også. Her er eksempelkoden som fjerner undermenyen Widgets under Utseende:

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

I eksemplet over vil brukere få tilgang til alle undermenyer under Utseende unntatt Widgets. Du kan fjerne så mange menyer eller undermenyer du vil. Husk at dette ikke hindrer brukere i å gå inn på disse sidene direkte. Jeg mener, hvis en bruker går inn, for eksempel yourdomain.com/wp-admin/options-general.php, vil de få tilgang til Innstillinger-siden. Bra ting de fleste brukere ikke vil bry hvis varen ikke er på menyen.

Hvis du ikke kan eller ikke vil redigerefunksjonene dine.php-filen, kan du alltid installere filen Admin Menu Editor-plugin, som gir deg full kontroll over menyene. Det leveres med et par kule funksjoner, inkludert rollebaserte menybegrensninger, muligheten til å skjule menyer og lage tilpassede menyelementer blant andre kule funksjoner.

Tilpasse bunntekst for WordPress Dashboard

For øyeblikket har vi gjort “betydelig” tilpasning til WordPress admin-dashbordet. Det er bare riktig å ta noe av æren for alt det strålende arbeidet du gjør. Tilpasse bunnteksten (“Takk for at du opprettet med WordPress.”) Kan ytterligere bidra til å styrke ditt (eller kundens) merke. La oss endre bunnteksten til “Bygget med kjærlighet etter ditt navn.” Bare legg til følgende kodebit i funksjonsfilen og lagre endringene:

// Tilpasset bunntekst for tilpasset administrator
funksjon wpexplorer_remove_footer_admin () {
ekko 'Bygget med kjærlighet av WPExplorer';
}
add_filter ('admin_footer_text', 'wpexplorer_remove_footer_admin');

Bytt ut “Ditt Navn” med ditt navn, nettsted, e-postadresse osv. Og ditt domene.com med ditt faktiske domenenavn. Går videre…

Tilpasse påloggingsskjemaet

Så langt har du alt som trengs for å tilpasse ditt WordPress admin-dashbord. La oss gå et skritt videre og tilpasse påloggingssiden, slik at brukerne dine kan få en virkelig personlig opplevelse fra farten. Tross alt, hvorfor bry deg om å tilpasse WordPress-dashbordet ditt bare for å bli gitt bort av innloggingssiden?

Med denne siden må vi tilpasse to elementer: standard WordPress-logoen og wordpress.org-koblingen som følger med. Men før jeg viser deg koden ��, kan du tilpasse påloggingssiden din enkelt ved å bruke hvilken som helst av disse 15 beste tilpassede påloggingssiden-plugins for WordPress. Nå, for den varme uklare følelsen som kommer av å spille med koden, kopier du følgende til funksjonene dine.php:

funksjon wpexplorer_login_logo () {?>

Erstatt logo.png med ditt tilpassede logofilnavn, som du først skal laste opp til wp-content / themes / yourtheme / bilder. Hold din tilpassede logo under 80 x 80 piksler, selv om du kan endre denne med noen tilpassede CSS. Med den tilpassede påloggingslogoen på plass, er det på tide å endre lenken som følger med den opprinnelige WordPress-logoen. La oss koble den nye logoen til nettstedet ditt. Kopier denne koden til funksjonsfilen og lagre endringene:

funksjon wpexplorer_login_logo_url () {
return esc_url (home_url ('/'));
}
add_filter ('login_headerurl', 'wpexplorer_login_logo_url');

funksjon wpexplorer_login_logo_url_title () {
returner 'Ditt nettstednavn og info';
}
add_filter ('login_headertitle', 'wpexplorer_login_logo_url_title');

Husk at du alltid kan gjøre det style innloggingssiden din slik du ønsker ved å bruke CSS. Eller du kan ganske enkelt starte med et fantastisk tema som Total Multi-purpose & Responsive WordPress-tema, som kommer med innebygde alternativer for en tilpasset påloggingsside og merkevarebygging.

Tilpass WordPress Dashboard: Skjermalternativer

Hvis du ikke vil dykke i kode eller installere plugins, kan du dra nytte av Skjermalternativer for å lage et tilpasset WordPress-dashbord. Bare logg inn på WordPress-oversikten og øverst på skjermen til høyre vil du se en rullegardinmeny for skjermalternativer. Klikk på dette for å utvide og merke / fjerne merkingen for å aktivere / deaktivere widgets. Du kan deretter dra og slippe widgets for å ordne dem slik du ønsker.

Den eneste ulempen er at denne metoden lagrer innstillingene dine per bruker, noe som betyr at den ikke vil gjøre deg så bra hvis du har en blogg med flere forfattere. Du kan heller ikke forhindre brukere i å aktivere widgets på nytt.

Bonus: Bruk et plugin

Vi har brukt mesteparten av tiden vår på å dekke kodealternativer. Men hvis du har klemt på tid, kan en plugin være nyttig.

Alternativ 1: Ultimate Tweaker Plugin for WordPress

Ultimate Tweaker for WordPress

Først opp, noe litt annerledes: Ultimate Tweaker for WordPress, tilgjengelig fra CodeCanyon. Det virkelig ultimate plugin-alternativet for redigering av WordPress-administratoren din (annonse noen få andre WordPress-funksjoner).

De fleste plugins støtter funksjonalitet for ett bestemt formål, men ikke Ultimate Tweaker; denne pluginen er en allsidig allrounder, som jeg aldri har sett før. I hovedsak støtter Ultimate Tweaker 240+ forskjellige WordPress-hacks, triks og verktøy for å gjøre livet ditt enklere. Dette gjør det nyttig på flere måter: å forbedre effektiviteten, fjerne de delene av WordPress som irriterer deg og utvide WordPress-kjernefunksjonaliteten utover det du trodde var mulig.

Disse 240 hakkene er veldig forskjellige, og kan deles inn i 35 forskjellige kategorier. For å gi deg en ide om hva Ultimate Tweaker kan gjøre, her er bare noen av dens "hacks:"

  • Legg til en logo over en sidelinjemeny
  • Rebrand WordPress-oversikten og påloggingssiden
  • Deaktiver høyreklikk eller Skriv ut skjerm-knappen på nettstedet ditt
  • Øk sikkerheten ved å legge reCaptcha 2 til påloggingsskjermen
  • Angi JPEG-kvalitet for å redusere filstørrelsen på bilder
  • Aktiver snarveier i tekstwidgets
  • Opprett et minimum antall ord for innlegg
  • Deaktiver feil passord “riste” på påloggingsskjermen
  • Legg til Google Analytics-koden på nettstedet ditt
  • 19 nye hurtigtaster for WordPress
  • Lag en tilpasset 404-side
  • Deaktiver automatiske WordPress-oppdateringer

Mange av disse WordPress-hakkene er ting vi alle har henvist til Google for på et eller annet tidspunkt. De fleste av dem er relativt små av seg selv, men med en omfattende liste på flere hundre, kan samlet plugin tilby mye verdi. WordPress-samfunnet er vanligvis veldig sprek om hva de vil se fra WordPress-kjernen, så jeg håper virkelig utviklerne lytter til fellesskapet og implementerer noen av forslagene deres i fremtidige oppdateringer av denne plugin.

Alternativ 2: Forest - Revolution WordPress Admin Theme

Forest WordPress admin tema

Vil du bare endre merkevaren til backend på nettstedet ditt? Selv om vi vanligvis vil anbefale å bruke litt kode, kan du også bruke en plugin. Hvis du kjeder deg over standardutstyrets utseende, kan Forest WordPress admin-tema gi deg litt av en ansiktsløftning. Og for bare 9 dollar. Forest vil ikke endre hvordan du gjør kjente oppgaver i WordPress, som å legge til innlegg / sider, det vil bare gjøre WordPress se bedre når du gjør dem! Plugin-enheten lar deg også endre standard innloggingsside for WordPress.

Forest admin tema skjermbilde

Forest lar deg legge til ditt eget bakgrunnsbilde til WordPress-dashbordet - eller du kan bruke et av de seks bildene som er gitt gratis, inkludert det på skjermdumpen over. Du kan tilpasse dashbordet ved å bruke din egen kreativitet (ved hjelp av ubegrensede farger), eller ved å bruke et av standard WordPress-fargeskjemaene. Du kan tilpasse dashbordet ytterligere ved å velge din egen typografi fra over 600 Google-skrifter. Plugin støtter en lys og mørk hud, og du kan konfigurere opacitetsnivåene til hvert element. Hvis det er noen knapper i dashbordet du ikke bruker, kan du til og med skjule dem - dette er flott for klientnettsteder der for mange alternativer kan overbelaste dem.

Merk: Forest vil ikke endre utseendet på ditt live nettsted på noen måte, det er bare for back-end.

Ressurser for å tilpasse WordPress Dashboard

Ønsker du å lære mer om å tilpasse WordPress-dashbordet? Her er noen ekstra ressurser for din profesjonelle verktøysett:

Over til deg…

Å lage et tilpasset WordPress admin-dashbord er en av de beste måtene å styrke merkevarebildet og gi personlig tilpasset erfaring til kundene dine. Det er enkelt og tar ikke mye tid. Så hva venter du på? Få tilpassing.

Annet enn det, hva lærte du her i dag? Har du noen gang laget et tilpasset WordPress admin-dashbord? Del med vårt ivrige samfunn i kommentarene nedenfor. Jubel!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me