Share
Les rumeurs sont vraies! Le panneau d’administration de WordPress utilise maintenant Underscore and Backbone! Cela signifie qu'avec un effort minimal, nous pouvons commencer à utiliser ces fantastiques bibliothèques JavaScript dans nos propres plugins. Ce tutoriel va vous montrer exactement comment vous pouvez le faire. Nous allons créer la partie Admin d'un plugin Quiz. Nous allons utiliser un type de message personnalisé simple pour enregistrer des questions, puis à chaque question, nous ajouterons une boîte à méta qui nous permettra de saisir jusqu'à 4 réponses et de sélectionner celle qui convient. Nous verrons comment utiliser des modèles, comment intégrer des événements liés au clic et au clavier, comment enregistrer des données dans la base de données WordPress et, plus important encore, comment "extraire votre vérité du Dom", en tant que créateur Jeremy Ashkenas aime le dire.
Je dirai d'emblée, que le plugin que nous construisons dans ce tutoriel peut sembler excessivement détaillé pour ce qu'il accomplit. Cependant, il vous donnera un excellent aperçu du monde de l’utilisation de Backbone et si vous rencontriez un projet dans le futur qui nécessite une interface utilisateur complexe avec beaucoup de JavaScript, vous serez bien armé et prêt à apporter à votre organisation la fête.
Dans cette première partie, nous allons installer la fin de notre plugin. Cela impliquera la configuration des fichiers et des dossiers, ainsi que la mise en œuvre de toutes les fonctionnalités requises par notre plugin en PHP. Nous devrons:
Une fois que notre base est configurée, nous générerons ensuite le code HTML requis pour notre méta-boîte, ainsi que les données de chaque réponse au format JSON. Nous allons également écrire le JavaScript qui lie tout. Nous couvrirons:
J'espère que cette petite série semble intéressante pour vous et je suis impatient de vous aider à utiliser Backbone.js dans un plugin WordPress..
Ce petit plugin utilisera un type de message personnalisé pour enregistrer les questions. Ensuite, dans une méta-boîte, nous créerons quatre entrées qui permettront aux utilisateurs d'entrer les réponses possibles à la question actuelle et de sélectionner celle qui correspond à la bonne réponse. Lorsqu'une réponse est modifiée, le bouton de sauvegarde correspondant devient actif. Lorsque vous cliquez dessus, nous utiliserons le Backbone intégré model.save () méthode pour enregistrer les données dans la base de données WordPress. En outre, lorsque les réponses sont écrites dans les entrées, la zone de sélection située en dessous met automatiquement à jour ses valeurs, car elle recherche les modifications apportées aux modèles. Toutes ces choses sont relativement simples à faire avec Backbone et après avoir lu ce tutoriel, vous pourrez commencer à faire passer vos plugins au niveau supérieur en les utilisant dans WordPress..
Il y a beaucoup à couvrir, alors commençons!
Nous devons effectuer toutes les premières étapes habituelles d’un plugin - créer les dossiers de fichiers..
Votre structure de dossier devrait ressembler à ceci.
À l'intérieur de wp_quiz.php.
/ * Nom du plug-in: URI du plug-in WP Quiz: http://wp.tutsplus.com/author/shaneosbourne/ Description: Exemple d'utilisation de Backbone dans un plug-in. Auteur: Shane Osbourne Version: 0.1 URI de l'auteur: http://wp.tutsplus.com/author/shaneosbourne/ * /
Toujours à l'intérieur de wp_quiz.php, nous devons faire les choses suivantes:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Fichier de classe // Créer une instance de la classe de plugin function call_wp_quiz () return new WpQuiz ('admin'); // Uniquement si l'utilisateur actuel est un administrateur si (is_admin) add_action ('init', 'call_wp_quiz'); // Fonction d'assistance if (! Function_exists ('pp')) function pp () return plugin_dir_url (__FILE__); Mettre la fonction d'assistance pp () dans ce fichier nous permettra de référencer d’autres fichiers par rapport à la racine du dossier du plugin (vous le verrez bientôt en action).
À l'intérieur de la src dossier, créer un fichier appelé WpQuiz.php.
Dans cette classe de plug-in, nous aurons besoin de plusieurs méthodes différentes pour accomplir tout ce qui suit:
Avant d'écrire les méthodes, nous allons toutefois stocker certaines informations en tant que propriétés de classe. Nous stockons ces informations en haut de notre fichier de classe afin de faciliter les modifications ultérieures. le Réponses tableau contient les clés que nous allons utiliser tout au long de ce plugin pour enregistrer des données en utilisant le intégré add_post_meta ().
/ ** src / WpQuiz.php ** / class WpQuiz // Noms du type de message personnalisé public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Questions'; // Stuff Meta Box public $ metaBoxTitle = 'Réponses'; public $ metaBoxTempl = 'templates / metabox.templ.php'; // public de l'identifiant de la question $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript public $ jsAdmin = '/js/admin.js'; / ** src / WpQuiz.php ** / fonction publique __construct ($ type) commutateur ($ type) cas 'admin': // Enregistrer le type de publication $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Ajout de la méta-boîte add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // Accepter une demande Ajax add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Surveillez l'enregistrement de la publication add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / fonction publique addMetaBox () // Charge le Javascript nécessaire à cette page d’administrateur. $ this-> addScripts (); // Crée un identifiant basé sur le nom du type de message $ id = $ this-> postTypeNameSingle. '_métabox'; // Ajout de la méta-boîte add_meta_box ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Récupère le balisage nécessaire $ this-> postTypeNameSingle);
Ici, nous parcourons nos ID de réponse et construisons un tableau contenant des méta-métriques récupérées avec notre méthode d'assistance. getOneAnswer. Nous fabriquons ce nouveau tableau de manière à pouvoir l'encoder et l'envoyer à notre modèle au format JSON - exactement comme l'a aimé Backbone. nous envoyer données à notre modèle en utilisant le $ viewData tableau vu ci-dessous. Cela garde tout le code HTML à l'abri des dangers et nous permet de le travailler dans un fichier séparé. Nous allons jeter un coup d'œil à la getTemplatePart méthode plus tard, mais si vous voulez une explication détaillée de la raison de mon utilisation, veuillez consulter la rubrique Amélioration de votre flux de travail - Séparez votre marge bénéficiaire de votre logique!
/ ** src / WpQuiz.php ** / fonction publique getMetaBox ($ post) // Récupère les valeurs actuelles des questions $ json = array (); foreach ($ this-> answerIds as $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Définir les données nécessaires dans le modèle $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_answer ')); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData); Nous renvoyons simplement un tableau des données nécessaires dans notre modèle. Vous pouvez penser à cela comme à la création d'un modèle unique dont vous avez besoin en amont.
/ ** src / WpQuiz.php ** / fonction publique getOneAnswer ($ post_id, $ answer_id) return array ('answer_id' => $ answer_id, 'answer' => get_post_meta ($ post_id, $ answer_id, $ answer_id, true)); Lorsqu'un utilisateur clique pour enregistrer une publication dans laquelle se trouve actuellement notre méta-boîte, nous devons effectuer quelques vérifications pour nous assurer que nous sauvegardons notre type de publication personnalisée et que l'utilisateur actuel dispose des autorisations appropriées. Si les deux vérifications sont correctes, nous enregistrer les quatre réponses de la meta box et la bonne réponse.
/ ** src / WpQuiz.php ** / fonction publique savePost ($ post_id) // Vérifiez que nous enregistrons notre type de message personnalisé si ($ _POST ['type_postal']! == strtolower ($ this-> postTypeNameSingle) ) revenir; // Vérifiez que l'utilisateur dispose des autorisations appropriées si (! $ This-> canSaveData ($ post_id)) return; // Accédez aux données à partir de la variable globale $ _POST et créez un nouveau tableau contenant // les informations nécessaires pour que la sauvegarde $ fields = array (); foreach ($ this-> answerIds as $ id) $ fields [$ id] = $ _POST [$ id]; // Parcourez le nouveau tableau et sauvegardez / mettez à jour chacun d'entre eux (champs $ $ id => champ $) add_post_meta ($ post_id, $ id, $ champ, true); // ou update_post_meta ($ post_id, $ id, $ field); // Enregistrer / mettre à jour la réponse correcte add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // ou update_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer']);
C’est là que nous recevrons les données transmises au serveur à partir de Backbone. Nous devons le faire:
/ ** src / WpQuiz.php ** / fonction publique saveAnswers () // Récupère les données PUT et les décode $ model = json_decode (file_get_contents ("php: // input")); // Assurez-vous que cet utilisateur dispose des autorisations appropriées si (! $ This-> canSaveData ($ model-> post_id)) return; // Tentative d'insertion / mise à jour $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer, true); // ou $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer); // Si une sauvegarde ou une mise à jour a réussi, retournez le modèle au format JSON if ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); else echo 0; mourir(); Voici les quatre assistants mentionnés dans les extraits ci-dessus..
canSaveData () - Cela garantit simplement que l'utilisateur actuel dispose des autorisations nécessaires pour modifier / mettre à jour ce message..addScripts () - Notez que nous nous assurons ici que nous passons le 5ème param à la wp_register_script () une fonction. Cela chargera notre code JavaScript personnalisé dans le pied de page et garantira la disponibilité de nos données JSON. De plus, si vous utilisez l'éditeur WordPress dans votre plugin, vous n'avez pas besoin de spécifier Backbone en tant que dépendance, car celle-ci sera déjà disponible. Je l’inclus ici pour le bien de l’exemple si.registerPostType () - C'est quelque chose que j'utilise souvent dans les plugins. Cela simplifie simplement la vie lorsque vous ajoutez un nouveau type de message personnalisé. Il accepte les versions au singulier et au pluriel du nom car ce n’est pas toujours aussi simple que d’ajouter un 's'.getTemplatePart () - Je n'ai jamais aimé avoir de balisage dans mes méthodes. Ce petit assistant permettra l'utilisation d'un fichier modèle séparé. / ** src / WpQuiz.php ** / / ** * Déterminer si l'utilisateur actuel dispose des autorisations appropriées * * @param $ post_id * @return bool * / fonction privée canSaveData ($ post_id) if (défini ('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; fonction privée addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Enregistrer un type de message personnalisé * * @param $ single * @param $ pluriel * @param null $ supporte * / fonction privée registerPostType ($ single, $ pluriel, $ supports = null) $ labels = array ( 'name' => _x ($ pluriel, 'nom général du type de post'), 'nom_s singulier' => _x ("$ single", 'nom du singulier de type post'), 'add_new' => _x ("Add New $ single "," $ single "), 'add_new_item' => __ (" Ajouter nouveau $ single "), 'edit_item' => __ (" Modifier $ single "), 'new_item' => __ (" Nouveau $ single ") , 'all_items' => __ ("Tout $ pluriel"), 'view_item' => __ ("Voir $ single"), 'search_items' => __ ("Recherche $ pluriel"), 'not_found' => __ ( "Pas de $ pluriel trouvé"), 'not_found_in_trash' => __ ("Pas de $ single trouvé dans la corbeille"), 'parent_item_colon' => ", 'nom_du_menu' => $ pluriel; $ args = array ('labels' = > $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'code_fonction' > 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => nul l, 'supports' => ($ supports)? $ prend en charge: array ('title', 'editor', 'attribut de page')); register_post_type ($ single, $ args); / ** * Rendre un fichier de modèle * * @param $ filePath * @param null $ viewData * @return string * / public function getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? extraire ($ viewData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); return $ template; À ce stade, nous avons mis en place tout le nécessaire pour notre back-end. Il est temps de faire une pause et de préparer la partie suivante où nous allons nous familiariser avec les modèles côté client, JavaScript et Backbone.js. J'espère vous voir là-bas - ça va être un bon.
