Share
Dette er del 2 i en serie som ser på hvordan plugin og tema kan gi den beste brukeropplevelsen ved å "passe inn" med WordPress 'native brukergrensesnitt. Dette betyr mer enn bare ser en del av WordPress (som vi dekket i del ett), men der det er hensiktsmessig, etterligner den samme arbeidsflyten som (forhåpentligvis) er kjent for WordPress-brukere. En del av dette er hvordan du strukturerer sider og presenterer sluttbrukeren. Et utrolig nyttig verktøy fra både et brukergrensesnitt og utviklerperspektiv er meta-boksen. I denne opplæringen ser vi på hvordan du kan legge til metakasser til din egen tilpassede admin side.
Bruk av metakasser er vanlig i WordPress. Den brukes på Widgets, Menyer og Dashboard-sider - og selvfølgelig postredigeringsskjermen. De kan være et fantastisk verktøy for å forbedre brukeropplevelsen:
Et siste punkt som ikke bør gå ubemerket: Når du implementerer riktig metakasser, tillater også tredjeparter å legge til eller fjerne innhold fra admin siden, slik at plugin eller tema lett kan forlenges.
Vær oppmerksom på at jeg ikke fortaler bruk av metakasser for alt - bare hvor det er fornuftig å gjøre det. Som diskutert i del ett, er det tider hvor WordPress 'eksisterende brukergrensesnitt ikke er tilstrekkelig eller passende for hva pluginet ditt prøver å gjøre. I disse tilfellene, du bør ikke begrense deg til admin-brukergrensesnittet - men du bør heller ikke ignorere det.
WordPress er veldig bra på å bli utvidet og meta bokser er ikke noe unntak. Skriptene og stilene som WordPress bruker til plassering, stil og "animere" metakasser er også tilgjengelig for oss. Ved å bruke dem betyr at metakasser (sammen med alle sine "funksjoner") kan legges til med relativt liten kode.
Men for å dra nytte av dette, må vi etterligne layouten på en WordPress 'admin side, slik at seleksjonene som brukes i skript og stiler, gjelder på vår side. Nå, selvfølgelig, implementerer forskjellige sider meta-bokser annerledes. Dashbordet har for eksempel opptil 4 jevnt store kolonner med metakasser, mens postredigeringssiden bare tillater 1 eller 2, med en som et sidefelt. Avhengig av hvordan du vil at siden din skal vises, må du strukturere siden din i samsvar med dette. I denne opplæringen skal jeg gå gjennom postredigeringsskjermens 1/2-meta-boksoppsett. Så kan vi ta en titt på grunnleggende wireframe på en admin side.
Accentsconagua
.pakke innDette elementet bryter hele admin siden din. Det legger til en margin til toppen og høyre side for å holde administrasjonssiden vekk fra sidene på skjermen. Dette bør brukes på alle admin sidene dine.
Neste er skjermikonet. Dette igjen skal vises på alle admin sidene dine. Markeringen for skjermikonet kan genereres ved å bruke funksjonen screen_icon (). Vi dekket bruk i del en av denne serien. screen_icon ( 'min-id') produserer HTML:
Neste er siden tittelen. Tittelen skal pakkes innvendig tags. Hvis det er hensiktsmessig, kan en "legg til ny" -link bli lagt inn i disse kodene:
% s% s ', esc_html __ (' Sidetittel ',' plugin_domain '), esc_url (admin_url (admin.php? side = min-link-to-add-new)), esc_html __ (' Add New ',' plugin_domain ')); ?> Vanligvis, med metakasser, aksepterer du noen form for innspilling fra brukeren. For å gjøre dette må du pakke hele siden inn i et skjema. I alle fall er det nødvendig å lagre meta-boksinnstillingene (hvilke metakasser er stengt og plasseringen av metakassene).
#poststuffDette elementet bryter meta-bokholderen. Det er et viktig element som WordPress bruker dette til å målrette stiler og skript.
# Post-kroppenDette elementet fungerer som meta-bokholderen. Den har to viktige klasser:
Metabox-holder og columns- *. Den andre av disse angir sideoppsettet (om det har 1 eller 2 kolonner). Det brukerdefinerte layoutalternativet kan fås med get_current_screen () -> get_columns (). I det følgende bruker vi dette til å legge til klassen kolonnene-1 eller kolonnene 2- passende (med sistnevnte som standard).
# Post-kroppen Det er to meta-boksbeholdere, som fungerer som "kolonner" av metakasser. Den første, .Postboks-beholder-1, Fungerer som sidebjelke i 2-kolonne-oppsettet, og i 1-kolonne-oppsettet ligger like over den andre meta-boksbeholderen. Så er det # Post-body-innhold. Dette elementet (valgfritt) inneholder ikke noen metakasser, men inneholder innhold som du vil sitte øverst på siden, og ikke være flyttbart. I postredigeringsskjermen inneholder den for eksempel posttittelen og TinyMCE-editoren.
For å skrive ut metakassene i den aktuelle beholderen bruker vi do_meta_boxes funksjon som tar tre argumenter:
$ skjermen - Skjerm ID (eller vi kan bruke en tom streng for å bruke gjeldende skjerm-ID).$ sammenheng - Dette en strengidentifikator som brukes når du registrerer meta-boksen. Dette kan være noe, men bør være beskrivende (for eksempel 'side' og 'normal'). Dette lar deg definere standardposisjon og rekkefølge av metakasser.$ objekt - Dette sendes til meta-bokens tilbakering som det første argumentet, og vanligvis blir objektet redigert (for eksempel et innleggsobjekt, på postredigeringsskjermen). Hvis dette ikke er relevant for admin siden, kan du passere null.Nå har vi sidestrukturen vi nå vil ha oss (eller noen tredjepart) for å kunne legge til metakasser på siden. Vi vil også gjerne laste opp det nødvendige JavaScript som gjør at disse metakassene kan minimeres, skjules eller flyttes.
For å tillate meta bokser å bli lagt til, må vi skyte to kroker. Den første:
add_meta_box_ screen_id
Passerer objektet som redigeres (eller null). Den andre:
add_meta_box
Passerer to variabler: skjerm-ID og objektet blir redigert. Brukere kan deretter koble til disse handlingene og legge til meta-boksene på siden.
Neste vil vi laste inn WordPress-skriptet postbox.js. Dette skriptet lar brukeren flytte, minimere eller lukke metakasser (og lagrer preferanser). Skriptet må initialiseres, så vi må skrive ut en linje av javascript i bunnteksten for å gjøre dette.
Til slutt legger vi til et skjermalternativ som lar brukeren bytte mellom en og to kolonneoppsett. Skjermalternativer som lar brukeren skjule metakasser, blir automatisk lagt til. Vi bruker belastning - $ pagenow Kryss for å brann vår tilbakeringing bare på riktig side. For tilpassede admin sider, $ pagenow er skjerm-IDen.
2, 'standard' => 2)); / * Skriver ut skript i bunntekst. Dette initialiserer metakassene * / funksjon wptuts_print_script_in_footer () ?>
Alt som gjenstår er å legge til meta boksene.
Normalt kan metakasser legges til ved hjelp av add_meta_boxes eller, enda bedre, det add_meta_boxes_ post_type kroker. Mer generelt posttype kan betraktes som skjerm-ID. Vi har utløst disse krokene inne i wptuts_add_screen_meta_boxes () funksjonen ovenfor. Alt som gjenstår er å koble til disse handlingene og bruke add_meta_box () funksjon.
/ * Over hele $ screen_id antas å holde skjerm-ID * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); funksjon wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // Meta box ID __ ('Min Meta Box', 'plugin_domain'), // Meta Box Tittel 'wptuts_my_meta_box_callback', // Tilbakering definerer plugins innards $ screen_id, // Skjerm som du skal legge til meta-boksen 'normal' // Kontekst); Du kan laste ned en enkel admin side klasse basert på denne opplæringen fra GitHub.
