Share
Ryktene er sanne! WordPress Admin Panel bruker nå Underscore og Backbone! Dette betyr at med minimal innsats kan vi begynne å bruke disse fantastiske JavaScript-bibliotekene i våre egne plugins. Denne opplæringen vil vise deg nøyaktig hvordan du kan gjøre det. Vi oppretter Admin-delen av et quiz-plugin. Vi bruker en enkel tilpasset posttype for å lagre spørsmål, og i hvert spørsmål legger vi til en metakasse som lar oss legge inn opptil 4 svar og velge hvilken som er den riktige. Vi skal gå gjennom hvordan du bruker maler, hvordan du knytter til klikk og tastaturhendelser, hvordan du lagrer data tilbake til WordPress-databasen og viktigst, hvordan du får sannheten din ut av Dom, som skaperen Jeremy Ashkenas liker å si det.
Jeg vil si opp foran, at pluginet vi bygger i denne opplæringen kan virke altfor omfattende for hva den oppnår. Det vil imidlertid gi deg et glimrende innblikk i verden med å bruke Backbone, og hvis du kommer over et prosjekt i fremtiden som krever et komplekst brukergrensesnitt med mye JavaScript, vil du være godt bevæpnet og klar til å bringe mye nødvendig organisasjon til festen.
I denne første delen vil vi sette opp bakenden av pluginet vårt. Dette vil innebære å sette opp filene og mappene, samt implementere alle funksjonene våre plugin krever i PHP. Vi må:
Når vi har satt vår bakside, vil vi fortsette å sende ut nødvendig HTML for meta-boksen sammen med dataene for hvert svar i JSON-format. Vi vil også skrive JavaScript som knytter alt sammen. Vi vil dekke:
Jeg håper denne lille serien høres interessant ut for deg, og jeg gleder meg til å hjelpe deg med å komme i gang med å bruke Backbone.js i et WordPress-plugin.
Denne lille plugin vil bruke en egendefinert innleggstype for å lagre spørsmål. Deretter i en meta-boks oppretter vi fire innganger som gjør det mulig for brukerne å legge inn mulige svar på det aktuelle spørsmålet, og velg hvilket av disse er det riktige svaret. Når et svar endres, blir den tilsvarende lagringsknappen aktiv. Når du klikker, bruker vi Backbone er innebygd model.save () metode for å lagre dataene tilbake til WordPress-databasen. Også når svarene skrives i inngangene, vil valgfeltet under det automatisk oppdatere verdiene som det vil se ut for endringer i modellene. Alle disse tingene er relativt trivielle å gjøre med Backbone, og etter å ha lest denne opplæringen, kan du begynne å ta pluginene dine til neste nivå ved å bruke dem i WordPress.
Det er mye å dekke, så la oss komme i gang!
Vi må gjøre alle de vanlige første trinnene som er involvert med et plugin - lag filmappene.
Din mappestruktur skal se slik ut.
Inni wp_quiz.php.
/ * Plugin Name: WP Quiz Plugin URI: http://wp.tutsplus.com/author/shaneosbourne/ Beskrivelse: Et eksempel på å bruke Backbone i et plugin. Forfatter: Shane Osbourne Versjon: 0.1 Forfatter URI: http://wp.tutsplus.com/author/shaneosbourne/ * /
Fortsatt innsiden av wp_quiz.php, vi må gjøre følgende ting:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Class File // Opprett en forekomst av Plugin Class-funksjonen call_wp_quiz () returner ny WpQuiz ('admin'); // Bare når den nåværende brukeren er en Admin hvis (is_admin) add_action ('init', 'call_wp_quiz'); // Hjelperfunksjon hvis (! Function_exists ('pp')) funksjon pp () return plugin_dir_url (__FILE__); Setter hjelperfunksjonen pp () I denne filen kan vi referere til andre filer i forhold til roten til plugin-mappen (du ser det snart i gang).
Innsiden av src mappe, opprett en fil som heter WpQuiz.php.
I denne plugin-klassen trenger vi noen få forskjellige metoder for å utføre alle de følgende:
Før vi skriver metodene skjønt, skal vi lagre litt informasjon som klasseegenskaper. Vi lagrer denne informasjonen på toppen av vår klassefil, slik at endringer er enklere å gjøre senere. De answerIds array inneholder nøklene som vi skal bruke gjennom dette pluginet for å lagre data ved hjelp av den innebygde add_post_meta ().
/ ** src / WpQuiz.php ** / class WpQuiz // Navn på egendefinert posttype offentlig $ postTypeNameSingle = 'Question'; offentlig $ postTypeNamePlural = 'Spørsmål'; // Meta Box Stuff public $ metaBoxTitle = 'Svar'; offentlig $ metaBoxTempl = 'maler / metabox.templ.php'; // Spørsmål Id's offentlige $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript offentlig $ jsAdmin = '/js/admin.js'; / ** src / WpQuiz.php ** / offentlig funksjon __construct ($ type) switch ($ type) case 'admin': // Registrer posttype $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Legg til Meta Box add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // Godta en Ajax-forespørsel add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Se for Post blir lagret add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / public function addMetaBox () // Legg inn Javascript på denne admin siden. $ Dette-> addScripts (); // Opprett et id basert på Posttype navn $ id = $ this-> postTypeNameSingle. '_Metabox'; // Legg til metakassen add_meta_box ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Få markeringen som trengs $ this-> postTypeNameSingle);
Her løper vi gjennom våre svar-IDer og bygger en matrise som inneholder postmeta hentet med vår hjelpemetode getOneAnswer. Vi lager dette nye systemet slik at vi kan kode det og sende det til vår mal i JSON-format - akkurat som Backbone liker det. Vi sende data til vår mal ved hjelp av $ teledata array sett nedenfor. Dette holder alt HTML-formatet ut av skade, og lar oss jobbe med det i en egen fil. Vi tar en rask titt på getTemplatePart metode senere, men hvis du vil ha en grundig forklaring på hvorfor jeg bruker den, vennligst sjekk ut Forbedre arbeidsflyten din - skilt ditt merke fra logikken din!
/ ** src / WpQuiz.php ** / offentlig funksjon getMetaBox ($ post) // Få de nåværende verdiene for spørsmålene $ json = array (); foreach ($ this-> answerIds as $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Sett data som trengs i malen $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_answer '))); ekko $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData); Vi returnerer bare en rekke data som trengs i vår mal. Du kan tenke på dette som å skape en enkelt modell som er nødvendig på forsiden.
/ ** src / WpQuiz.php ** / offentlig funksjon getOneAnswer ($ post_id, $ answer_id) return array ('answer_id' => $ answer_id, 'answer' => get_post_meta ($ post_id, $ answer_id, true)); Når en bruker klikker for å lagre et innlegg som vår meta-boks er for øyeblikket, må vi gjøre et par sjekker for å sikre at vi lagrer vår egendefinerte innleggstype, og at den nåværende brukeren har de riktige tillatelsene - hvis begge kontrollene er ok så lagre de fire svarene fra meta-boksen og det riktige svaret.
/ ** src / WpQuiz.php ** / offentlig funksjon savePost ($ post_id) // Sjekk at vi lagrer vår egendefinerte innleggstype hvis ($ _POST ['post_type']! == strtolower ($ this-> postTypeNameSingle) ) komme tilbake; // Sjekk at brukeren har riktige tillatelser hvis (! $ This-> canSaveData ($ post_id)) return; // Få tilgang til dataene fra $ _POST global og opprett en ny matrise som inneholder // info som trengs for å lagre $ $ fields = array (); foreach ($ this-> answerIds as $ id) $ felt [$ id] = $ _POST [$ id]; // Gå gjennom den nye gruppen og lagre / oppdater hver foreach ($ felt som $ id => $ felt) add_post_meta ($ post_id, $ id, $ field, true); // eller update_post_meta ($ post_id, $ id, $ felt); // / Lagre / oppdater riktig svar add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // eller update_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer']);
Her mottar vi data som sendes til serveren fra Backbone. Vi må:
/ ** src / WpQuiz.php ** / offentlig funksjon saveAnswers () // Hent PUT data og avkod det $ model = json_decode (file_get_contents ("php: // input")); // Sørg for at denne brukeren har de riktige tillatelsene hvis (! $ This-> canSaveData ($ model-> post_id)) return; // Forsøk en innsats / oppdatering $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer, true); // eller $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer); // Hvis en lagring eller oppdatering var vellykket, returner du modellen i JSON-format hvis ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); ellers echo 0; dø (); Her er de fire hjelperne nevnt i de ovennevnte utdragene.
canSaveData () - Dette sikrer bare at den nåværende brukeren har de relevante tillatelsene til å redigere / oppdatere dette innlegget.addScripts () - Vær oppmerksom på at vi her sørger for at vi passerer 5. parametre til wp_register_script () funksjon. Dette vil laste vår tilpassede JavaScript inn i footer og sørge for at våre JSON data er tilgjengelige. Også, hvis du bruker WordPress-editoren i pluginet ditt, trenger du ikke å spesifisere Backbone som en avhengighet, da den allerede er tilgjengelig for deg. Jeg inkluderer det her for eksemplets skyld.registerPostType () - Dette er noe jeg ofte bruker i plugins. Det gjør livet enklere når du legger til en ny tilpasset posttype. Den aksepterer både singular og flertallversjoner av navnet fordi det ikke alltid er så enkelt som bare å legge til en 's'.getTemplatePart () - Jeg har aldri vært glad i å ha mark-up innsiden av metodene mine. Denne lille hjelperen tillater bruk av en egen malfil. / ** src / WpQuiz.php ** / / ** * Bestem om den aktuelle brukeren har de relevante tillatelsene * * @param $ post_id * @return bool * / privat funksjon canSaveData ($ post_id) if (definert ('DOING_AUTOSAVE ') && DOING_AUTOSAVE) returnerer false; hvis ('side' == $ _POST ['post_type']) hvis (! current_user_can ('edit_page', $ post_id)) returnere false; ellers hvis (! current_user_can ('edit_post', $ post_id)) returnere false; returnere sann; privat funksjon addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('ryggraden'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Registrer en egendefinert innleggstype * * @param $ single * @param $ plural * @param null $ supports * / privatfunksjonsregisterPostType ($ single, $ plural, $ supports = null) $ labels = array 'navn' => _x ($ plural, 'posttype generell navn'), 'singular_name' => _x ("$ single", "posttype entallnavn"), 'add_new' => _x "," $ single "), 'add_new_item' => __ (" Legg til ny $ single "), 'edit_item' => __ (" Rediger $ single "), 'new_item' => __ (" Ny $ single ") , 'all_items' => __ ("Alle $ flertall"), 'view_item' => __ ("Vis $ enkelt"), 'search_items' => __ ("Søk $ flertall"), 'not_found' => __ "No $ plural found"), 'not_found_in_trash' => __ ('Ingen $ enkelt funnet i Papirkurv'), 'parent_item_colon' => ", 'menu_name' => $ flertall); $ args = array > $ label, 'public' => sant, 'publicly_queryable' => sant, 'show_ui' => sant, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' = > 'innlegg', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null l, 'støtter' => ($ støtter)? $ støtter: array ('title', 'editor', 'side attributter')); register_post_type ($ single, $ args); / ** * Gir en malfil * * @param $ filePath * @param null $ viewData * @returnstreng * / offentlig funksjon getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? ekstrakt ($ viewData): null; ob_start (); inkludere ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); returner $ template; På dette tidspunktet har vi satt opp alt som trengs for vår bakside. Det er på tide å ta en pause og forberede seg på neste del der vi kommer ned og skitne med klientsiden, JavaScript og Backbone.js. Jeg håper å se deg der - det kommer til å være en god en.
