Share
Le voci sono vere! Il pannello di amministrazione di WordPress ora utilizza Underscore e Backbone! Ciò significa che con il minimo sforzo, possiamo iniziare a utilizzare queste fantastiche librerie JavaScript nei nostri plugin. Questo tutorial ti mostrerà esattamente come puoi farlo. Creeremo la parte Admin di un plug-in Quiz. Useremo un semplice tipo di messaggio personalizzato per salvare le domande, quindi all'interno di ogni domanda aggiungeremo una meta-box che ci permetterà di inserire fino a 4 risposte e selezionare qual è quella corretta. Vedremo come utilizzare i modelli, come agganciare gli eventi click e key-up, come salvare i dati nel database di WordPress e, soprattutto, come "ottenere la verità dal Dom", come creatore A Jeremy Ashkenas piace dirlo.
Devo dire in anticipo, che il plugin che stiamo costruendo in questo tutorial può sembrare eccessivamente prolisso per ciò che realizza. Tuttavia, ti darà una sbirciatina eccellente nel mondo dell'utilizzo di Backbone e se dovessi imbatterti in un progetto in futuro che richiede una complessa interfaccia utente con un sacco di JavaScript, sarai ben armato e pronto a portare l'organizzazione tanto necessaria a la festa.
In questa prima parte, configureremo il back-end del nostro plug-in. Ciò comporterà la creazione di file e cartelle e l'implementazione di tutte le funzionalità richieste dal nostro plugin in PHP. Avremo bisogno di:
Una volta impostato il nostro back-end, procederemo all'output dell'HTML necessario per la nostra meta-box insieme ai dati per ogni risposta in formato JSON. Scriveremo anche il codice JavaScript che lega tutto insieme. Copriremo:
Spero che questa piccola serie ti sembri interessante e non vedo l'ora di aiutarti a iniziare a utilizzare Backbone.js con un plug-in di WordPress.
Questo piccolo plug-in utilizzerà un tipo di messaggio personalizzato per salvare le domande. Quindi, in una meta-scatola, creeremo quattro input che permetteranno agli utenti di inserire le possibili risposte alla domanda corrente e selezionare quale di queste è la risposta corretta. Quando viene modificata una risposta, il corrispondente pulsante di salvataggio diventa attivo. Quando si fa clic, utilizzeremo il built-in di Backbone model.save () metodo per salvare i dati nel database di WordPress. Inoltre, quando le risposte vengono scritte negli input, la casella di selezione sotto di essa aggiornerà automaticamente i suoi valori mentre cercherà le modifiche ai modelli. Tutte queste cose sono relativamente banali da fare con Backbone e dopo aver letto questo tutorial, sarai in grado di iniziare a portare i tuoi plug-in al livello successivo usandoli all'interno di WordPress.
C'è molto da coprire, quindi iniziamo!
Abbiamo bisogno di fare tutti i soliti primi passi coinvolti con qualsiasi plugin - creare le cartelle dei file.
La struttura della tua cartella dovrebbe assomigliare a questa.
All'interno di wp_quiz.php.
/ * Nome plugin: WP Quiz Plugin URI: http://wp.tutsplus.com/author/shaneosbourne/ Descrizione: Un esempio di utilizzo di Backbone in un plug-in. Autore: Shane Osbourne Versione: 0.1 Autore URI: http://wp.tutsplus.com/author/shaneosbourne/ * /
Ancora dentro wp_quiz.php, dobbiamo fare le seguenti cose:
Accentsconagua
/ ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Class File // Crea un'istanza della funzione Plugin Class call_wp_quiz () return new WpQuiz ('admin'); // Solo quando l'utente corrente è un Admin se (is_admin) add_action ('init', 'call_wp_quiz'); // Funzione di supporto if (! Function_exists ('pp')) function pp () return plugin_dir_url (__FILE__); Mettere la funzione di aiuto pp () all'interno di questo file ci permetterà di fare riferimento ad altri file relativi alla radice della cartella plugin (vedrai che in azione a breve).
All'interno del src cartella, creare un file chiamato WpQuiz.php.
In questa classe di plug-in, avremo bisogno di alcuni metodi diversi per realizzare quanto segue:
Prima di scrivere i metodi, però, stiamo memorizzando alcune informazioni come proprietà di classe. Conserviamo queste informazioni nella parte superiore del nostro file di classe in modo che le modifiche siano più facili da effettuare in seguito. Il answerIds array contiene le chiavi che useremo in questo plugin per salvare i dati usando il built-in add_post_meta ().
/ ** src / WpQuiz.php ** / class WpQuiz // Nomi del tipo di post personalizzato public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Domande'; // Meta Box Stuff public $ metaBoxTitle = 'Answers'; public $ metaBoxTempl = 'templates / metabox.templ.php'; // Question 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': // Registra il Post Type $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Aggiungi la Meta Box add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // Accetta una richiesta Ajax add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Watch for Post in fase di salvataggio add_action ('save_post', array ($ this, 'savePost')); / ** src / WpQuiz.php ** / public function addMetaBox () // Carica il Javascript necessario su questa pagina di amministrazione. $ This-> addScripts (); // Crea un ID basato sul nome del post-tipo $ id = $ this-> postTypeNameSingle. '_Metabox'; // Aggiungi la meta box add_meta_box ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Ottieni il markup necessario $ this-> postTypeNameSingle);
Qui passiamo in rassegna i nostri ID di risposta e costruiamo un array che contiene post meta recuperato con il nostro metodo di supporto getOneAnswer. Creiamo questo nuovo array in modo che possiamo codificarlo e inviarlo al nostro modello in formato JSON, proprio come piace a Backbone. Noi inviare dati al nostro modello utilizzando il $ Viewdata array visto di seguito. Ciò mantiene tutto l'HTML fuori dai guai e ci consente di lavorarci su un file separato. Daremo una rapida occhiata al getTemplatePart metodo più avanti, ma se vuoi una spiegazione approfondita sul perché lo uso, ti preghiamo di controllare Migliorare il tuo flusso di lavoro - Separa il mark-up dalla tua logica!
/ ** src / WpQuiz.php ** / funzione pubblica getMetaBox ($ post) // Ottieni i valori correnti per le domande $ json = array (); foreach ($ this-> answerIds as $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id); // Imposta i dati necessari nel modello $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_answer '))); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData); Stiamo solo restituendo una serie di dati necessari nel nostro modello. Puoi pensare a questo come alla creazione di un singolo modello che è necessario sul front-end.
/ ** src / WpQuiz.php ** / public function getOneAnswer ($ post_id, $ answer_id) return array ('answer_id' => $ answer_id, 'answer' => get_post_meta ($ post_id, $ answer_id, true)); Quando un utente fa clic per salvare un post in cui è presente la nostra meta-box, dobbiamo fare un paio di controlli per assicurarci di salvare il nostro Custom Post Type e che l'utente corrente abbia le autorizzazioni corrette - se entrambi i controlli sono ok, allora salva le quattro risposte dalla meta-box e la risposta corretta.
/ ** src / WpQuiz.php ** / public function savePost ($ post_id) // Verifica di salvare il nostro tipo di post personalizzato se ($ _POST ['post_type']! == strtolower ($ this-> postTypeNameSingle) ) ritorno; // Controlla che l'utente abbia i permessi corretti se (! $ This-> canSaveData ($ post_id)) return; // Accede ai dati da $ _POST globali e crea un nuovo array contenente // le informazioni necessarie per effettuare il salvataggio $ fields = array (); foreach ($ this-> answerIds as $ id) $ fields [$ id] = $ _POST [$ id]; // Passa attraverso il nuovo array e salva / aggiorna ogni foreach ($ campi come $ id => $ campo) add_post_meta ($ post_id, $ id, $ campo, vero); // o update_post_meta ($ post_id, $ id, $ campo); // Salva / aggiorna la risposta corretta add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // o update_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer']);
Qui è dove riceveremo i dati passati al server da Backbone. Abbiamo bisogno di:
/ ** src / WpQuiz.php ** / public function saveAnswers () // Ottieni i dati PUT e decodificali $ model = json_decode (file_get_contents ("php: // input")); // Assicurati che questo utente abbia i permessi corretti se (! $ This-> canSaveData ($ model-> post_id)) return; // Tentativo di un inserimento / aggiornamento $ update = add_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer, true); // o $ update = update_post_meta ($ model-> post_id, $ model-> answer_id, $ model-> answer); // Se un salvataggio o un aggiornamento ha avuto esito positivo, restituire il modello in formato JSON se ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id)); else echo 0; die (); Ecco i quattro helper menzionati nei frammenti sopra.
canSaveData () - Ciò garantisce solo che l'utente corrente disponga delle autorizzazioni pertinenti per modificare / aggiornare questo post.addScripts () - Nota che qui ci stiamo assicurando di passare il quinto param al wp_register_script () funzione. Questo caricherà il nostro JavaScript personalizzato nel piè di pagina e garantirà che i nostri dati JSON siano disponibili. Inoltre, se si utilizza l'editor di WordPress nel proprio plug-in, non è necessario specificare Backbone come dipendenza in quanto sarà già disponibile. Lo sto includendo qui per il gusto dell'esempio.registerPostType () - Questo è qualcosa che uso spesso nei plugin. Semplifica la vita aggiungendo un nuovo tipo di messaggio personalizzato. Accetta sia versioni singolari che plurali del nome perché non è sempre facile come aggiungere semplicemente una "s".getTemplatePart () - Non mi è mai piaciuto avere mark-up nei miei metodi. Questo piccolo aiuto consentirà l'uso di un file modello separato. / ** src / WpQuiz.php ** / / ** * Determina se l'utente corrente ha le autorizzazioni pertinenti * * @param $ post_id * @return bool * / private function canSaveData ($ post_id) if (defined ('DOING_AUTOSAVE ') && DOING_AUTOSAVE) restituiscono false; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) restituisce false; else if (! current_user_can ('edit_post', $ post_id)) restituisce false; return true; private function addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js'); / ** * Registra un tipo di messaggio personalizzato * * @param $ single * @param $ plural * @param null $ supporta * / private function registerPostType ($ singolo, $ plural, $ supports = null) $ labels = array ( 'name' => _x ($ plural, 'nome generale del tipo di post'), 'singular_name' => _x ("$ single", 'post type singular name'), 'add_new' => _x ("Aggiungi New $ single "," $ singolo ")," add_new_item "=> __ (" Aggiungi nuovo $ singolo ")," edit_item "=> __ (" Modifica $ singolo ")," nuovo_item "=> __ (" Nuovo $ singolo ") , 'all_items' => __ ("All $ plural"), 'view_item' => __ ("Visualizza $ single"), 'search_items' => __ ("Cerca $ plural"), 'not_found' => __ ( "No $ plural found"), "not_found_in_trash" => __ ("No $ singolo trovato nel Cestino"), "parent_item_colon" => "," menu_name "=> $ plurale); $ args = array (" labels "= > $ labels, 'public' => true, 'public_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, 'supporta' => ($ supporta)? $ supporta: array ('title', 'editor', 'page-attributes')); register_post_type ($ single, $ args); / ** * Rendering di un file di modello * * @param $ filePath * @param null $ viewData * @return string * / public function getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? extract ($ viewData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); return $ template; A questo punto, abbiamo impostato tutto il necessario per il nostro back-end. È il momento di fare una pausa e prepararci per la prossima parte in cui andremo a fondo con i modelli lato client, JavaScript e Backbone.js. Spero di vederti lì - sarà bello.
