Share
Zvonurile sunt adevărate! Panoul de administrare WordPress utilizează acum Underscore și Backbone! Aceasta înseamnă că, cu un efort minim, putem începe să folosim aceste biblioteci fantastice JavaScript în pluginurile proprii. Acest tutorial vă va arăta exact cum puteți face acest lucru. Vom crea partea Admin a unui plugin Quiz. Vom folosi un simplu tip de post particularizat pentru a salva Întrebări, iar în cadrul fiecărei întrebări vom adăuga o casetă meta care ne va permite să introducem până la 4 răspunsuri și să selectăm una care este cea corectă. Vom trece prin modul de utilizare a șabloanelor, cum să cârlig în evenimente de tip clic și cheie, cum să salvați datele în baza de date WordPress și, cel mai important, cum să "scoateți adevărul dvs. din Dom", ca creator Jeremy Ashkenas îi place să o pună.
Voi spune in fata, ca plugin-ul pe care il construim in acest tutorial poate parea extrem de verbos pentru ceea ce realizeaza. Cu toate acestea, vă va oferi o privire excelentă în lumea utilizării Backbone și ar trebui să întâlniți un proiect în viitor care necesită o interfață complexă de utilizare cu o mulțime de JavaScript, veți fi bine înarmați și gata să aducă o organizație mult mai necesară petrecerea.
În această primă parte, vom configura partea din spate a pluginului nostru. Aceasta va implica configurarea fișierelor și a folderelor, precum și implementarea tuturor funcțiilor pe care plugin-ul nostru le cere în PHP. Va trebui să:
Odată ce ne-am înființat capătul din spate, vom trece apoi la ieșirea codului HTML necesar pentru căsuța noastră meta împreună cu datele pentru fiecare răspuns în format JSON. De asemenea, vom scrie JavaScript care leagă totul împreună. Vom acoperi:
Sper că această serie mică va fi interesantă pentru dvs. și aștept cu nerăbdare să vă ajut să începeți să rulați folosind Backbone.js într-un plugin WordPress.
Acest plugin mic va folosi un tip de post particularizat pentru a salva întrebările. Apoi, într-o casetă meta, vom crea patru intrări care vor permite utilizatorilor să introducă răspunsuri posibile la întrebarea curentă și să selecteze care dintre acestea este răspunsul corect. Când se schimbă un răspuns, butonul de salvare corespunzător va deveni activ. Când se face clic, vom folosi built-in-ul Backbone model.save () pentru salvarea datelor în baza de date WordPress. De asemenea, atunci când răspunsurile sunt scrise în intrări, caseta de selectare de mai jos va actualiza automat valorile sale, deoarece va căuta modificări ale modelelor. Toate aceste lucruri sunt relativ triviale pentru a face cu Backbone și după ce ați citit acest tutorial, veți putea să începeți să luați plugin-urile dvs. la următorul nivel, folosind-le în WordPress.
Trebuie să ne acopere multe, deci să începem!
Trebuie să facem toți primii pași obișnuiți implicați în orice plugin - să creați dosarele fișierelor.
Structura dosarului trebuie să arate așa.
Interior de wp_quiz.php.
/ * Plugin Name: WP Quiz Plugin URI: http://wp.tutsplus.com/author/shaneosbourne/ Descriere: Un exemplu de utilizare a Backbone în cadrul unui plugin. Autor: Shane Osbourne Versiune: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /
Încă înăuntru wp_quiz.php, trebuie să facem următoarele lucruri:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // File Class // Creați o instanță a funcției Clasa Plugin call_wp_quiz () returnă noua WpQuiz ('admin'); // Numai atunci când utilizatorul curent este un admin dacă (is_admin) add_action ('init', 'call_wp_quiz'); // funcția Helper dacă (! Function_exists ('pp')) funcția pp () return plugin_dir_url (__FILE__); Punerea funcției de ajutor pp () în acest fișier ne vom permite să facem referire la alte fișiere referitoare la rădăcina dosarului plugin (veți vedea că în acțiune în scurt timp).
În interiorul src folder, creați un fișier numit WpQuiz.php.
În această clasă de pluginuri, vom avea nevoie de câteva metode diferite pentru a realiza toate următoarele:
Înainte de a scrie metode deși, vom fi stocarea unor informații ca proprietăți de clasă. Stocăm aceste informații în partea de sus a fișierului de clasă, astfel încât modificările să fie mai ușor de făcut ulterior. answerIds array conține cheile pe care le vom folosi în acest plugin pentru a salva date utilizând built-in-ul add_post_meta ().
/ ** src / WpQuiz.php ** / clasa WpQuiz // Numele personalizat Post Type public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Întrebări'; // Meta Box Stuff public $ metaBoxTitle = 'Răspunsuri'; public $ metaBoxTempl = 'template-uri / metabox.templ.php'; // ID-ul întrebării este public $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript public $ jsAdmin = '/js/admin.js'; / ** src / WpQuiz.php ** / funcția publică __construct ($ type) comutator ($ type) case 'admin': // Înregistrează postul $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Adăugați Meta Box add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // acceptați o solicitare Ajax add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Uitați-vă că mesajul este salvat add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / funcția publică addMetaBox () // Încarcă Javascriptul necesar în această pagină de administrare. $ This-> addScripts (); // Creați un id bazat pe numele post-tip $ id = $ this-> postTypeNameSingle. '_Metabox'; // Adăugați căsuța meta add_meta_box ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Obțineți marcajul necesar $ this-> postTypeNameSingle);
Aici ne întoarcem prin ID-urile noastre de răspuns și construim un matrice care conține post meta preluat cu ajutorul metodei noastre de ajutor getOneAnswer. Facem această matrice nouă, astfel încât să o putem codifica și să o trimitem șablonului nostru în format JSON - așa cum îi place Backbone-ul. Noi trimite datele în șablonul nostru folosind $ videotex array văzut mai jos. Acest lucru păstrează tot HTML-ul din calea răului și ne permite să lucrăm la acesta într-un fișier separat. Vom arunca o privire rapidă la getTemplatePart mai târziu, dar dacă doriți o explicație în profunzime despre motivul pentru care o folosesc, vă rugăm să verificați Îmbunătățirea fluxului de lucru - separarea marcajului de logica dvs.!
/ ** src / WpQuiz.php ** / funcția publică getMetaBox ($ post) // Obțineți valorile curente pentru întrebări $ json = array (); foreach ($ this-> answerIds ca $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Setați datele necesare în șablon $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'corect' => json_encode (get_post_meta ($ post-> '))); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ vizualizareData); Noi întoarcem doar o serie de date necesare în șablonul nostru. Vă puteți gândi la acest lucru creând un model unic care este necesar la capătul din față.
/ ** src / WpQuiz.php ** / funcția publică getOneAnswer ($ post_id, $ answer_id) retur array ('answer_id' => $ answer_id, 'answer' => get_post_meta ($ post_id, $ answer_id, true)); Când un utilizator dă clic pentru a salva o postare pe care se află în prezent caseta noastră meta, trebuie să facem câteva verificări pentru a ne asigura că salvăm tipul particularizat de postare și că utilizatorul curent are permisiunile corecte - dacă ambele verificări sunt în regulă, atunci salvați cele patru răspunsuri din caseta meta și răspunsul corect.
/ ** src / WpQuiz.php ** / funcția publică savePost ($ post_id) // Verificați dacă salvăm tipul personalizat de postare dacă ($ _POST ['post_type']! == strtolower ($ this-> postTypeNameSingle) ) întoarcere; // Verificați dacă utilizatorul are permisiuni corecte dacă (! $ This-> canSaveData ($ post_id)) retur; // Accesați datele de la $ _POST global și creați un nou matrice care conține // informațiile necesare pentru a face salvarea $ fields = array (); foreach ($ this-> answerIds ca $ id) câmpuri $ [$ id] = $ _POST [$ id]; // Reactiva prin noua matrice și salvați / actualizați fiecare foreach (câmpuri $ ca $ id => câmp $) add_post_meta ($ post_id, $ id, $ field, true); // sau update_post_meta ($ post_id, $ id, $ field); // Salvați / actualizați răspunsul corect add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // sau update_post_meta ($ post_id, 'corect_answer', $ _POST ['correct_answer']);
Aici vom primi datele transmise serverului de la Backbone. Avem nevoie să:
/ ** src / WpQuiz.php ** / funcția publică saveAnswers () // Obținerea datelor PUT și decodarea acestora $ model = json_decode (file_get_contents ("php: // input")); // Asigurați-vă că acest utilizator are permisiunile corecte dacă (! $ This-> canSaveData ($ model-> post_id)) return; // Încercați o inserare / actualizare $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> răspuns, adevărat); // sau $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> răspuns); // Dacă o salvare sau o actualizare a avut succes, returnați modelul în format JSON dacă ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); altceva echo 0; a muri(); Iată patru ajutoare menționate în fragmentele de mai sus.
canSaveData () - Acest lucru asigură doar că utilizatorul curent are permisiunile relevante pentru a edita / actualiza această postare.addScripts () - Rețineți că aici ne asigurăm că trecem paramul 5 la wp_register_script () funcţie. Aceasta va încărca JavaScript personalizat în subsolul și va asigura că datele noastre JSON sunt disponibile. De asemenea, dacă utilizați editorul WordPress în plugin-ul dvs., nu este necesar să specificați Backbone ca dependență, deoarece acesta va fi deja disponibil pentru dvs. Am inclus-o aici de dragul exemplului.registerPostType () - Acesta este un lucru pe care îl folosesc adesea în plugin-uri. Aceasta face ca viata sa fie mai usoara atunci cand adaugati un nou tip de Post Custom. Acceptă atât versiuni singulare cât și pluraliste ale numelui, deoarece nu este întotdeauna la fel de ușor ca adăugarea unui "e".getTemplatePart () - N-am fost niciodată îndrăgostit de faptul că am încadrat-o în metodele mele. Acest ajutor mic va permite utilizarea unui fișier șablon separat. / ** src / WpQuiz.php ** / / ** ** Determină dacă utilizatorul curent are permisiunile relevante * * @param $ post_id * @return bool * / funcția privată canSaveData ($ post_id) if (definit ('DOING_AUTOSAVE ') && DOING_AUTOSAVE) return false; dacă ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return false; altceva if (! current_user_can ('edit_post', $ post_id)) return false; return true; funcția privată addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Inregistreaza un tip de mesaj personalizat * * @param $ single * @param $ plural * @param null $ suporta * / functionale private registerPostType ($ single, $ plural, $ supports = null) $ labels = 'nume' => _x ($ plural, 'post type general name'), 'singular_name' => _x ("$ single", "add_new" "," add_new_item "=> __ (" Add New $ unic ")," edit_item "=> __ (" Editați $ unică " , "all_items" => __ ("Toate $ plural"), 'view_item' => __ ("View $ single"), 'search_items' => "Nu a fost gasit $ plural"), 'not_found_in_trash' => __ ("No $ single found in Trash"), "parent_item_colon" => ", nume_menu = $ $ plural $ args = > etichete $, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, > 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => nul l, "suportă" => (suportă $)? $ suportă: array ('title', 'editor', 'page-attributes')); register_post_type ($ singură, $ args); / ** * Render un fișier șablon * * @param $ filePath * @param null $ vizualizareData * @return string * / funcția publică getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? extract ($ dateData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); returnați șablonul $; În acest moment, am stabilit tot ce ne-a fost necesar pentru sfârșitul nostru. Este timpul să luați o pauză și să vă pregătiți pentru următoarea parte în care vom fi în jos și murdari cu șabloane de pe partea clientului, JavaScript și Backbone.js. Sper să te văd acolo - va fi unul bun.
