Share
De geruchten zijn waar! Het WordPress Admin Panel gebruikt nu Underscore en Backbone! Dit betekent dat we met minimale inspanningen deze fantastische JavaScript-bibliotheken in onze eigen plug-ins kunnen gebruiken. Deze tutorial zal je precies laten zien hoe je dat kunt doen. We zullen het Admin-gedeelte van een Quiz-plug-in maken. We zullen een eenvoudig Aangepast berichttype gebruiken om vragen op te slaan, en binnen elke vraag zullen we een metabox toevoegen waarmee we maximaal 4 antwoorden kunnen invoeren en selecteren welke de juiste is. We zullen doorgaan met het gebruik van sjablonen, hoe u kunt inhaken op click- en key-up-events, hoe u gegevens kunt opslaan in de WordPress-database en, nog belangrijker, hoe u uw waarheid uit de Dom kunt halen, als de maker Jeremy Ashkenas zegt het graag.
Ik zal van tevoren zeggen dat de plug-in die we aan het bouwen zijn in deze tutorial misschien overdreven uitgebreid lijkt voor wat het oplevert. Het geeft u echter een uitstekende kijk in de wereld van het gebruik van Backbone en als u in de toekomst een project tegenkomt dat een complexe gebruikersinterface met veel JavaScript vereist, bent u goed gewapend en klaar om de broodnodige organisatie te brengen. het feest.
In dit eerste deel zullen we de achterkant van onze plug-in instellen. Dit omvat het instellen van de bestanden en mappen en het implementeren van alle functies die onze plug-in nodig heeft in PHP. We moeten het volgende doen:
Zodra we onze back-end hebben ingesteld, gaan we door met het uitvoeren van de vereiste HTML voor onze metabox samen met de gegevens voor elk antwoord in JSON-indeling. We zullen ook het JavaScript schrijven dat alles met elkaar verbindt. We behandelen:
Ik hoop dat deze kleine serie interessant voor je klinkt, en ik kijk er naar uit om je te helpen aan de slag te gaan met het gebruik van Backbone.js in een WordPress-plug-in.
Deze kleine plug-in gebruikt een aangepast berichttype om vragen op te slaan. Vervolgens maken we in een metabox vier ingangen waarmee gebruikers mogelijke antwoorden op de huidige vraag kunnen invoeren en selecteren welke daarvan het juiste antwoord is. Wanneer een antwoord wordt gewijzigd, wordt de bijbehorende knop Opslaan actief. Wanneer er op wordt geklikt, gebruiken we Backbone's ingebouwd model.save () methode om de gegevens terug op te slaan in de WordPress-database. Wanneer de antwoorden in de ingangen worden geschreven, zal het selectievak eronder automatisch de waarden ervan bijwerken, omdat het zal letten op wijzigingen in de modellen. Al deze dingen zijn relatief triviaal te doen met Backbone en na het lezen van deze tutorial, kun je beginnen met het naar een hoger niveau brengen van je plug-ins door ze te gebruiken in WordPress.
Er valt veel te bedekken, dus laten we beginnen!
We moeten alle gebruikelijke eerste stappen doen die met elke plug-in te maken hebben - maak de mappen met bestanden aan.
Uw mappenstructuur zou er als volgt uit moeten zien.
Binnenkant van wp_quiz.php.
/ * Naam van de plug-in: WP Quiz-plug-in URI: http://wp.tutsplus.com/author/shaneosbourne/ Beschrijving: Een voorbeeld van het gebruik van Backbone in een plug-in. Auteur: Shane Osbourne Versie: 0.1 Auteur URI: http://wp.tutsplus.com/author/shaneosbourne/ * /
Nog steeds binnen van wp_quiz.php, we moeten de volgende dingen doen:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Klassebestand // Maak een instantie van de functie Plugin Class call_wp_quiz () return new WpQuiz ('admin'); // Alleen als de huidige gebruiker een Admin is als (is_admin) add_action ('init', 'call_wp_quiz'); // Helper-functie if (! Function_exists ('pp')) function pp () return plugin_dir_url (__FILE__); De hulpfunctie instellen pp () in dit bestand kunnen we verwijzen naar andere bestanden ten opzichte van de hoofdmap van de map voor plug-ins (u ziet dat binnenkort in actie).
Binnenkant van de src map, maak een bestand aan met de naam WpQuiz.php.
In deze plugin-klasse hebben we een aantal verschillende methoden nodig om het volgende te bereiken:
Maar voordat we de methoden schrijven, zullen we wat informatie opslaan als klasse-eigenschappen. We slaan deze informatie bovenaan in ons klassenbestand op, zodat wijzigingen later gemakkelijker kunnen worden aangebracht. De answerIds array bevat de sleutels die we in deze hele plugin zullen gebruiken om data op te slaan met behulp van de ingebouwde add_post_meta ().
/ ** src / WpQuiz.php ** / class WpQuiz // Namen van aangepast berichttype public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Questions'; // Meta Box Stuff public $ metaBoxTitle = 'Antwoorden'; public $ metaBoxTempl = 'templates / metabox.templ.php'; // Vraag Id's public $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript public $ jsAdmin = '/js/admin.js'; / ** src / WpQuiz.php ** / public function __construct ($ type) switch ($ type) case 'admin': // Registreer het berichttype $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Voeg de Meta Box add_action toe ('add_meta_boxes', array ($ this, 'addMetaBox')); // Accepteer een Ajax Verzoek add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Kijk of Post wordt opgeslagen add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / public function addMetaBox () // Laad de Javascript nodig op deze beheerderspagina. $ This-> addScripts (); // Maak een ID op basis van post-type naam $ id = $ this-> postTypeNameSingle. '_Metabox'; // Voeg de metabox add_meta_box toe ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Haal de opmaak op $ this-> postTypeNameSingle);
Hier lopen we door onze antwoord-ID's en maken we een array die post-meta bevat die is opgehaald met onze hulpmethode getOneAnswer. We maken deze nieuwe array zodat we deze kunnen coderen en naar onze sjabloon in JSON-formaat kunnen verzenden - precies zoals Backbone het graag ziet. Wij sturen gegevens naar onze sjabloon met behulp van de $ Viewdata array hieronder weergegeven. Dit houdt alle HTML's buiten de deur en stelt ons in staat om er in een apart bestand aan te werken. We zullen het snel bekijken getTemplatePart methode later, maar als je een diepgaande uitleg wilt over waarom ik het gebruik, kijk dan eens naar Verbeter je workflow - scheid je score van je logica!
/ ** src / WpQuiz.php ** / openbare functie getMetaBox ($ post) // Verkrijg de huidige waarden voor de vragen $ json = array (); foreach ($ this-> answerIds als $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Stel gegevens in die nodig zijn in de template $ viewData = array ('post' => $ post, 'antwoorden' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_antwoord '))); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData); We geven zojuist een reeks gegevens terug die we nodig hebben in onze sjabloon. Je kunt dit zien als het creëren van een enkel model dat nodig is aan de voorkant.
/ ** src / WpQuiz.php ** / openbare functie getOneAnswer ($ post_id, $ answer_id) return array ('answer_id' => $ answer_id, 'answer' => get_post_meta ($ post_id, $ answer_id, true)); Wanneer een gebruiker klikt om een bericht op te slaan dat onze metabox momenteel bevat, moeten we een aantal controles uitvoeren om ervoor te zorgen dat we ons aangepaste berichttype opslaan en dat de huidige gebruiker de juiste machtigingen heeft. Als beide controles goed zijn, kunnen we bewaar de vier antwoorden uit de metabox en het juiste antwoord.
/ ** src / WpQuiz.php ** / public function savePost ($ post_id) // Controleer of we ons aangepaste berichttype opslaan als ($ _POST ['post_type']! == strtolower ($ this-> postTypeNameSingle) ) terug; // Controleer of de gebruiker de juiste machtigingen heeft als (! $ This-> canSaveData ($ post_id)) return; // Open de gegevens van de globale $ _POST en maak een nieuwe array met // de benodigde info om de save $ fields = array () te maken; foreach ($ this-> answerIds als $ id) $ fields [$ id] = $ _POST [$ id]; // Loop door de nieuwe array en sla / update ze elk voor elke ($ velden als $ id => $ veld) add_post_meta ($ post_id, $ id, $ field, true); // of update_post_meta ($ post_id, $ id, $ field); // Bewaar / update het juiste antwoord add_post_meta ($ post_id, 'correct_antwoord', $ _POST ['correct_antwoord'], waar); // of update_post_meta ($ post_id, 'correct_antwoord', $ _POST ['correct_antwoord']);
Dit is waar we gegevens ontvangen die door Backbone aan de server zijn doorgegeven. We moeten:
/ ** src / WpQuiz.php ** / public function saveAnswers () // Krijg PUT-gegevens en decodeer het $ model = json_decode (file_get_contents ("php: // input")); // Zorg ervoor dat deze gebruiker de juiste machtigingen heeft als (! $ This-> canSaveData ($ model-> post_id)) return; // Poging tot invoeging / update $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> antwoord, waar); // or $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> antwoord); // Als een opslag of update succesvol was, retourneer het model in JSON-indeling als ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); else echo 0; dood gaan(); Hier zijn de vier helpers die in de bovenstaande fragmenten worden genoemd.
canSaveData () - Dit zorgt er alleen voor dat de huidige gebruiker over de relevante rechten beschikt om dit bericht te bewerken / bijwerken.addScripts () - Merk op dat we er hier voor zorgen dat we de 5e param doorgeven aan de wp_register_script () functie. Dit laadt onze aangepaste JavaScript in het voettekst en zorgt ervoor dat onze JSON-gegevens beschikbaar zijn. Als u de WordPress-editor in uw plug-in gebruikt, hoeft u Backbone niet op te geven als een afhankelijkheid omdat deze al beschikbaar voor u is. Ik neem het hier echter op omwille van het voorbeeld.registerPostType () - Dit gebruik ik vaak in plug-ins. Het maakt het leven gewoon eenvoudiger wanneer u een nieuw aangepast berichttype toevoegt. Het accepteert zowel enkelvoudige als meervoudige versies van de naam omdat het niet altijd even eenvoudig is als alleen maar het toevoegen van een 's'.getTemplatePart () - Ik ben er nooit dol op om op te tellen in mijn methoden. Deze kleine helper maakt het gebruik van een afzonderlijk sjabloonbestand mogelijk. / ** src / WpQuiz.php ** / / ** * Bepaal of de huidige gebruiker de relevante rechten heeft * * @param $ post_id * @return bool * / private function canSaveData ($ post_id) if (defined ('DOING_AUTOSAVE ') && DOING_AUTOSAVE) return false; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return false; else if (! current_user_can ('edit_post', $ post_id)) return false; return true; private functie addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Registreer een aangepast berichttype * * @param $ single * @param $ plural * @param null $ ondersteunt * / private function registerPostType ($ single, $ plural, $ supports = null) $ labels = array ( 'name' => _x ($ meervoud, 'post type algemene naam'), 'singular_name' => _x ("$ single", 'post type singular name'), 'add_new' => _x ("Voeg nieuwe $ single toe "," $ single "), 'add_new_item' => __ (" Voeg nieuwe $ single toe "), 'edit_item' => __ ('Bewerk $ single'), 'new_item' => __ (" Nieuwe $ single ") , 'all_items' => __ ("All $ plural"), 'view_item' => __ ("View $ single"), 'search_items' => __ ("Search $ plural"), 'not_found' => __ ( "Geen $ meervoud gevonden"), 'not_found_in_trash' => __ ("Geen $ single gevonden in Trash"), 'parent_item_colon' => ", 'menu_name' => $ meervoud); $ args = array ('labels' = > $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' = > 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => nul l, 'ondersteunt' => ($ ondersteunt)? $ ondersteunt: array ('title', 'editor', 'page-attributes')); register_post_type ($ single, $ args); / ** * Render een sjabloonbestand * * @param $ filePath * @param null $ viewData * @return string * / openbare functie getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? extract ($ viewData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); return $ template; Op dit punt hebben we alles ingesteld wat nodig is voor onze back-end. Het is tijd om een pauze in te lassen en ons voor te bereiden op het volgende deel waar we vies zullen worden met sjablonen voor client-side, JavaScript en Backbone.js. Ik hoop je daar te zien - het wordt een goeie.
