Share
Det här är del 2 i en serie som tittar på hur din plugin och tema kan ge den bästa användarupplevelsen genom att "passa in" med WordPress 'inbyggda användargränssnitt. Det betyder mer än bara ser en del av WordPress (som vi täckte i del ett), men där det är lämpligt, efterliknar samma arbetsflöde som (förhoppningsvis) skulle vara bekant för WordPress-användare. En del av detta är hur du strukturerar sidor och presenterar informationen slutanvändaren. Ett otroligt användbart verktyg från både ett användargränssnitt och utvecklarperspektiv är metaboxen. I denna handledning tittar vi på hur du kan lägga till metakasser på din egen anpassade admin sida.
Användning av metakassor är vanligt i WordPress. Den används på sidorna Widgets, Menyer och Dashboard - och naturligtvis postredigeringsskärmen. De kan vara ett fantastiskt verktyg för att förbättra användarupplevelsen:
En sista punkt som inte bör gå obemärkt: När korrekt genomförda metakassetter tillåter även tredje part att lägga till eller ta bort innehåll från din administratörssida, så att plugin eller tema lätt kan förlängas.
Observera att jag inte förespråkar användningen av metakassor för allt - bara där det är vettigt att göra det. Som diskuteras i del ett finns det tillfällen där WordPress befintliga användargränssnitt inte är tillräckligt eller lämpligt för vad din plugin försöker göra. I dessa fall, du borde inte begränsa dig till admin-användargränssnittet - men du bör inte heller ignorera det.
WordPress är mycket bra på att vara utökat och meta boxar är inget undantag. Skript och stilar som WordPress använder för att placera, stil och "animera" metakasser är också tillgängliga för oss. Med hjälp av dem menas att metakassor (tillsammans med alla deras "funktioner") kan läggas till med relativt liten kod.
Men för att dra nytta av detta måste vi efterlikna layouten på en WordPress-administratörssida så att selektorerna som används i skript och format, gäller på vår sida. Nu är det naturligtvis olika sidor som implementerar metakassetter annorlunda. Dashboard har till exempel upp till 4 jämnt stora kolumner med metakasser, medan postredigeringssidan endast tillåter 1 eller 2, med en som ett sidobar. Beroende på hur du vill att din sida ska visas måste du strukturera din sida i enlighet med detta. I denna handledning går jag igenom postredigeringsskärmens 1/2-meta box layout. Så kan vi ta en titt på grundläggande wireframe på en admin sida.
Accentsconagua
.slå inDetta element omsluter hela din administratorsida. Det lägger till en marginal till toppen och höger sida för att hålla administratörssidan borta från sidorna på skärmen. Detta ska användas på alla dina administratorsidor.
Nästa är skärmikonen. Detta ska återkomma på alla dina administratorsidor. Markeringen för skärmikonen kan genereras genom att använda funktionen screen_icon (). Vi täckte dess användning i del en av denna serie. screen_icon ( 'my-id') producerar HTML:
Nästa är sidtiteln. Titeln ska vikas inuti taggar. Om det är lämpligt kan en länk "Lägg till ny" läggas till i dessa taggar:
% s% s ', esc_html __ (' Sidotitel ',' plugin_domain '), esc_url (admin_url (admin.php? sida = min länk-till-lägg till)), esc_html __ (' Add New ',' plugin_domain ')); ?> Vanligtvis med meta-boxar accepterar du någon form av inmatning från användaren. För att göra detta måste du lägga hela sidan i en form. I vilket fall som helst är det nödvändigt att lagra meta-boxens preferenser (vilka metakasser är stängda och meta-boxarnas placering).
#poststuffDetta element omsluter metakasshållaren. Det är ett viktigt element som WordPress använder det här för att rikta in sina stilar och skript.
# Post-kroppDetta element fungerar som meta box hållare. Den har två viktiga klasser:
Metabox-hållare och columns- *. Den andra av dessa anger sidans layout (om den har 1 eller 2 kolumner). Det användardefinierade layoutalternativet kan erhållas med get_current_screen () -> get_columns (). I det följande använder vi detta för att lägga till klassen kolumner-1 eller kolumner-2 lämpligt (med den senare som standard).
# Post-kropp Det finns två meta box behållare, som fungerar som "kolumner" av meta lådor. Den första, .Postbox-behållare-1, fungerar som sidofältet i 2-kolonnlayouten och i layouten 1-kolumnen ligger strax ovanför den andra meta-boxbehållaren. Då finns det # Post-body-innehåll. Det här (frivilliga) elementet innehåller inga metakasser, men innehåller innehåll som du vill sitta högst upp på sidan och inte vara rörliga. I postredigeringsskärmen innehåller den till exempel posttiteln och TinyMCE-redigeraren.
För att skriva ut metakassorna i den relevanta behållaren använder vi do_meta_boxes funktion som tar tre argument:
$ skärm - Skärm ID (eller vi kan använda en tom sträng för att använda det aktuella skärm-ID).$ sammanhang - Detta en strängidentifierare som används vid registrering av metaboxen. Detta kan vara något, men ska vara beskrivande (till exempel "sida" och "normalt"). Detta låter dig definiera standardposition och ordning med metakassor.$ object - Detta överförs till metakassens återuppringning som det första argumentet, och vanligtvis ändras objektet (till exempel ett inläggsobjekt, på skärmen för postredigering). Om detta inte är relevant för din administratörs sida kan du skicka null.Nu har vi den sidestruktur som vi nu vill ha oss (eller någon tredje part) för att kunna lägga till metakasser på sidan. Vi skulle också vilja ladda upp nödvändiga JavaScript som gör att dessa metakasser kan minimeras, döljas eller flyttas.
För att meta-lådor ska kunna läggas måste vi skjuta två krokar. Den första:
add_meta_box_ screen_id
Skickar objektet som redigeras (eller null). Den andra:
add_meta_box
Passerar två variabler: skärm-ID och objekt som redigeras. Användare kan sedan koppla på dessa åtgärder och lägga till sina metakasser på sidan.
Nästa vill vi ladda WordPress-skriptet postbox.js. Detta skript låter användaren flytta, minimera eller stänga metakassor (och sparar deras inställningar). Skriptet måste initialiseras så vi måste skriva ut en rad javascript i sidfoten för att göra detta.
Slutligen lägger vi till ett skärmalternativ som gör det möjligt för användaren att byta mellan en och två kolumnlayout. Skärmalternativ som gör att användaren kan dölja metakasser läggs automatiskt till. Vi använder last - $ pagenow krok för att avfyra vår återuppringning endast på lämplig sida. För anpassade admin sidor, $ pagenow är skärm ID.
2, "standard" => 2)); / * Skriver ut skript i sidfot. Detta initialiserar metakassorna * / funktionen wptuts_print_script_in_footer () ?>
Allt som återstår är att lägga till metakassorna.
Normalt kan metakassor läggas till med hjälp av add_meta_boxes Eller, ännu bättre, add_meta_boxes_ post_type krokar. Mer allmänt posttyp kan betraktas som skärm-ID. Vi har utlöst dessa krokar inuti wptuts_add_screen_meta_boxes () funktion ovan. Allt som återstår är att haka på dessa åtgärder och använda add_meta_box () fungera.
/ * Över hela $ screen_id antas att hålla skärm ID * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); funktion wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // Meta box ID __ ('My Meta Box', 'plugin_domain'), // Meta box Titel 'wptuts_my_meta_box_callback', // Återuppringning definierar pluginens innards $ screen_id, // Skärm för att lägga till meta-rutan "normal" // Context); Du kan ladda ner en enkel admin sidklass baserat på denna handledning från GitHub.
