Share
Dit is deel 2 van een serie waarin wordt bekeken hoe je plug-in en thema de beste gebruikerservaring kunnen bieden door je aan te passen aan de native UI van WordPress. Dit betekent meer dan alleen op zoek een onderdeel van WordPress (dat we in deel een hebben besproken), maar waar van toepassing, dezelfde workflow nabootsen die (hopelijk) bekend zou zijn bij gebruikers van WordPress. Een onderdeel hiervan is hoe u pagina's structureert en de eindgebruiker informatie geeft. Een ongelooflijk handig hulpmiddel van beide een UI en ontwikkelaarsperspectief is de metabox. In deze zelfstudie bekijken we hoe u metaboxen aan uw eigen aangepaste beheerderspagina kunt toevoegen.
Het gebruik van metaboxen is gebruikelijk in WordPress. Het wordt gebruikt op de pagina's Widgets, Menu's en Dashboard - en natuurlijk het scherm voor het bewerken van posts. Ze kunnen een fantastische tool zijn om de gebruikerservaring te verbeteren:
Een laatste punt dat niet onopgemerkt mag blijven: wanneer het op de juiste manier wordt geïmplementeerd, kunnen meta-vakken ook inhoud van uw beheerderspagina toevoegen of verwijderen, waardoor uw plug-in of thema gemakkelijk uitbreidbaar is.
Let op, ik pleit niet voor het gebruik van metaboxen voor alles - alleen als dat zinvol is. Zoals besproken in deel een, zijn er momenten waarop de bestaande gebruikersinterface van WordPress niet voldoende of geschikt is voor wat uw plug-in probeert te doen. In deze gevallen, jij moet niet beperk jezelf tot de admin UI - maar je moet het ook niet negeren.
WordPress is erg goed in uitbreiding en meta-vakken zijn geen uitzondering. De scripts en stijlen die WordPress gebruikt voor het positioneren, opmaken en 'animeren' van metaboxen, zijn ook voor ons beschikbaar. Door ze te gebruiken, kunnen metaboxen (samen met al hun 'kenmerken') met relatief weinig code worden toegevoegd.
Om hiervan te profiteren, moeten we de lay-out van een WordPress-beheerpagina nabootsen, zodat de selectors die in de scripts en stijlen worden gebruikt, van toepassing zijn op onze pagina. Natuurlijk implementeren verschillende pagina's verschillende metaboxen op een andere manier. Het Dashboard heeft bijvoorbeeld maximaal 4 kolommen van metaboxen met gelijke afmetingen, terwijl de pagina voor het bewerken van berichten slechts 1 of 2 toestaat, met eentje als zijbalk. Afhankelijk van hoe u wilt dat uw pagina wordt weergegeven, moet u uw pagina overeenkomstig structureren. In deze tutorial doorloop ik de 1/2-meta boxlayout van het berichtbewerkingsscherm. Laten we eens een kijkje nemen bij het standaard draadframe van een beheerderspagina.
Accentsconagua
.wikkelenDit element wikkelt je hele admin-pagina in. Het voegt een marge toe aan de boven- en rechterkant om de beheerderspagina weg te houden van de zijkanten van het scherm. Dit moet worden gebruikt op al uw beheerderspagina's.
Volgende is het schermpictogram. Dit zou opnieuw op al uw admin-pagina's moeten verschijnen. De mark-up voor het schermpictogram kan worden gegenereerd met behulp van de functie screen_icon (). We hebben het gebruik ervan in deel een van deze serie behandeld. screen_icon ( 'mijn-id') produceert de HTML:
Volgende is de paginatitel. De titel moet binnenin worden ingepakt -tags. Indien van toepassing kan een 'voeg nieuw' link toegevoegd worden binnen deze tags:
% s% s ', esc_html __ (' Paginatitel ',' plugin_domain '), esc_url (admin_url (admin.php? page = my-link-to-add-new)), esc_html __ (' Nieuw toevoegen ',' plugin_domain ')); ?> Meestal accepteer je met metaboxen een vorm van input van de gebruiker. Om dit te doen, moet je de hele pagina in een formulier omsluiten. In ieder geval is het nodig om de metabox-voorkeuren op te slaan (welke metakaders zijn gesloten, en de locatie van de metaboxen).
#poststuffDit element wikkelt de metakasthouder. Het is een belangrijk element omdat WordPress dit gebruikt bij het richten van zijn stijlen en scripts.
# Post-bodyDit element fungeert als de metabox-houder. Het heeft twee belangrijke klassen:
Metabox-houder en columns- *. De tweede hiervan geeft de lay-out van de pagina aan (of deze 1 of 2 kolommen heeft). De door de gebruiker opgegeven lay-outoptie kan worden verkregen met get_current_screen () -> get_columns (). In het volgende gebruiken we dit om de klasse toe te voegen columns-1 of columns-2 adequaat (met de laatste als standaard).
# Post-body Er zijn twee metaboxcontainers, die fungeren als de 'kolommen' van metaboxen. De eerste, .Postbus-container-1, fungeert als de zijbalk in de lay-out met 2 kolommen en in de lay-out met 1 kolom zit net boven de tweede metabox-container. Dan is er # Post-body-inhoud. Dit (optionele) element bevat geen metaboxen, maar bevat alle inhoud die u bovenaan de pagina wilt plaatsen en die niet verplaatsbaar is. In het berichtbewerkingsscherm bevat het bijvoorbeeld de berichttitel en de TinyMCE-editor.
Als u de metaboxen in de betreffende container wilt afdrukken, gebruiken we de do_meta_boxes functie die drie argumenten vereist:
$ screen - De scherm-ID (of we kunnen een lege string gebruiken om de huidige scherm-ID te gebruiken).$ context - Dit is een tekenreeks-id die wordt gebruikt bij het registreren van de metabox. Dit kan van alles zijn, maar moet beschrijvend zijn (bijvoorbeeld 'zijkant' en 'normaal'). Hiermee kunt u de standaardpositie en -volgorde van metaboxen definiëren.$ object - Dit wordt doorgegeven aan de callback van de meta-box als het eerste argument, en is meestal het object dat wordt bewerkt (bijvoorbeeld een post-object, op het berichtbewerkingsscherm). Als dit niet relevant is voor uw beheerderspagina, kunt u slagen nul.Nu hebben we de paginastructuur waarvan we nu willen dat wij (of een derde partij) metaboxen aan de pagina kunnen toevoegen. We willen ook het benodigde JavaScript laden zodat deze metaboxen geminimaliseerd, verborgen of verplaatst kunnen worden.
Om toe te staan dat metaboxen worden toegevoegd, moeten we twee haken afvuren. De eerste:
add_meta_box_ screen_id
Geeft het te bewerken object door (of null). De seconde:
add_meta_box
Gaat over twee variabelen: de scherm-ID en het object dat wordt bewerkt. Gebruikers kunnen vervolgens deze acties inhaken en hun metaboxen aan de pagina toevoegen.
Vervolgens willen we het WordPress-script laden postbox.js. Met dit script kan de gebruiker metaboxen verplaatsen, minimaliseren of sluiten (en zijn voorkeuren opslaan). Het script moet worden geïnitialiseerd, daarom moeten we een regel JavaScript in de voettekst afdrukken om dit te doen.
Ten slotte voegen we een schermoptie toe waarmee de gebruiker kan schakelen tussen de indeling met één en twee kolommen. Schermopties waarmee de gebruiker meta-vakken kan verbergen, worden automatisch toegevoegd. We zullen de gebruiken load - $ pagenow haak om ons terugbellen alleen op de juiste pagina in te schakelen. Voor aangepaste beheerderspagina's, $ pagenow is de scherm-ID.
2, 'standaard' => 2)); / * Drukt script in voettekst af. Dit 'initialiseert' de metakaders * / functie wptuts_print_script_in_footer () ?>
Het enige wat overblijft is om de metaboxen toe te voegen.
Normaal kunnen metaboxen worden toegevoegd met behulp van de add_meta_boxes of, beter nog, de add_meta_boxes_ post_type haken. Meer in het algemeen kan het post-type worden gezien als de scherm-ID. We hebben deze haken geactiveerd in de wptuts_add_screen_meta_boxes () functie hierboven. Het enige wat overblijft is om aan deze acties vast te houden en de add_meta_box () functie.
/ * Doorheen $ screen_id wordt verondersteld dat het scherm ID * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); functie wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // Metabox-ID __ ('Mijn Meta Box', 'plugin_domain'), // Metakastitel 'wptuts_my_meta_box_callback', // Terugbellen definieert de inbreng van de invoegtoepassing $ screen_id, // Scherm waaraan de metabox 'normaal' // Context) wordt toegevoegd; Je kunt een eenvoudige admin-paginaclass downloaden op basis van deze tutorial van GitHub.
