Usando Backbone dentro del administrador de WordPress El back-end

¡Los rumores son ciertos! El Panel de Administración de WordPress ahora está usando el guión bajo y el Backbone Esto significa que con un esfuerzo mínimo, podemos comenzar a utilizar estas fantásticas bibliotecas de JavaScript en nuestros propios complementos. Este tutorial te mostrará exactamente cómo puedes hacerlo. Crearemos la parte Admin de un complemento de Quiz. Usaremos un tipo de publicación personalizada simple para guardar las preguntas, y luego, dentro de cada pregunta, agregaremos un cuadro de meta que nos permitirá ingresar hasta 4 respuestas y seleccionar cuál es la correcta. Veremos cómo usar plantillas, cómo conectar eventos de clic y clave, cómo guardar datos en la base de datos de WordPress y, lo que es más importante, cómo "sacar tu verdad de la Dom", como creador. Jeremy Ashkenas le gusta ponerlo.

Diré por adelantado que el complemento que estamos construyendo en este tutorial puede parecer demasiado detallado para lo que logra. Sin embargo, le dará una excelente perspectiva del uso de Backbone y, si se encuentra con un proyecto en el futuro que requiera una interfaz de usuario compleja con mucho JavaScript, estará bien armado y listo para brindar a la organización tan necesaria. La fiesta.

Que haremos

En esta primera parte, configuraremos el extremo posterior de nuestro complemento. Esto implicará la configuración de los archivos y carpetas, así como la implementación de todas las funciones que nuestro complemento requiere en PHP. Necesitaremos:

Registre un tipo de mensaje personalizado - para nuestras preguntas
Agregue un meta box que nos permita ingresar respuestas en la misma página
Guarda información de las cajas de meta cuando se guarda la publicación
Guardar información de nuestras solicitudes ajax (a través de Backbone)

Luego en la segunda parte ...

Una vez que tengamos configurado nuestro back-end, procederemos a generar el HTML requerido para nuestra meta box junto con los datos de cada respuesta en formato JSON. También escribiremos el JavaScript que une todo. Cubriremos:

Salida de HTML base para el meta box
Salida de una plantilla del lado del cliente junto con las respuestas en JSON
El JavaScript necesario para unirlo todo.

Espero que esta pequeña serie le resulte interesante, y espero poder ayudarle a comenzar a usar Backbone.js dentro de un complemento de WordPress..

Lo que vamos a construir

Este pequeño complemento utilizará un tipo de publicación personalizada para guardar preguntas. Luego, en un meta box, crearemos cuatro entradas que permitirán a los usuarios ingresar posibles respuestas a la pregunta actual y seleccionar cuál de ellas es la correcta. Cuando se cambia una respuesta, el botón de guardar correspondiente se activará. Al hacer clic, usaremos Backbone incorporado. model.save () Método para guardar los datos de nuevo en la base de datos de WordPress. Además, cuando las respuestas se escriben en las entradas, el cuadro de selección debajo de él actualizará automáticamente sus valores, ya que buscará cambios en los modelos. Todas estas cosas son relativamente triviales que hacer con Backbone y después de leer este tutorial, podrás comenzar a llevar tus complementos al siguiente nivel usándolos dentro de WordPress.

Hay mucho que cubrir, así que empecemos!

1. Crea el Plugin

Necesitamos realizar todos los primeros pasos habituales relacionados con cualquier complemento: crear las carpetas de archivos.

Crea una carpeta llamada wp_quiz
Crea un archivo PHP dentro con el mismo nombre
Crea una carpeta llamada js
Crea una carpeta llamada src

La estructura de su carpeta debería verse así..

2. Agregue el encabezado del complemento

Dentro de wp_quiz.php.

 / * Nombre del complemento: URI del complemento de WP Quiz: http://wp.tutsplus.com/author/shaneosbourne/ Descripción: Un ejemplo de uso de Backbone dentro de un complemento. Autor: Shane Osbourne Versión: 0.1 Autor URI: http://wp.tutsplus.com/author/shaneosbourne/ * /

3. Agrega ganchos para crear una instancia del complemento

Todavía dentro de wp_quiz.php, Necesitamos hacer las siguientes cosas:

Incluye nuestra principal clase de plugins.
Crear una función que creará una instancia de la clase.
Agregue un gancho para llamar solo a la función cuando el usuario es un administrador

 / ** wp_quiz.php ** / include 'src / WpQuiz.php'; // Archivo de clase // Crear una instancia de la función de clase de complemento call_wp_quiz () return new WpQuiz ('admin');  // Solo cuando el usuario actual es un administrador si (is_admin) add_action ('init', 'call_wp_quiz'); // Función auxiliar si (! Function_exists ('pp')) function pp () return plugin_dir_url (__FILE__);

Poner la función de ayuda. páginas() dentro de este archivo nos permitirá hacer referencia a otros archivos relacionados con la raíz de la carpeta del complemento (lo veremos en breve).

4. Crea la clase de plugin

Dentro de la src carpeta, crea un archivo llamado WpQuiz.php.

En esta clase de plugin, necesitaremos algunos métodos diferentes para lograr todo lo siguiente:

Registrar el tipo de mensaje personalizado
Añadir una caja de meta
Recupere el contenido para el meta box y genere tanto HTML como algunos datos JSON en él.
Escuche las solicitudes PUT y guarde los datos en la base de datos
Guarda los datos de nuestra caja meta en las acciones 'guardar' regulares

Antes de escribir los métodos, sin embargo, vamos a almacenar cierta información como propiedades de clase. Almacenamos esta información en la parte superior de nuestro archivo de clase para que las modificaciones sean más fáciles de realizar más adelante. los respuestasId La matriz contiene las claves que usaremos en este complemento para guardar los datos usando la función integrada. add_post_meta ().

Añadir las propiedades

 / ** src / WpQuiz.php ** / class WpQuiz // Nombres del tipo de publicación personalizada public $ postTypeNameSingle = 'Question'; public $ postTypeNamePlural = 'Preguntas'; // Meta Box Stuff public $ metaBoxTitle = 'Answers'; public $ metaBoxTempl = 'templates / metabox.templ.php'; // público ID de la pregunta $ answerIds = array ('quiz-a-1', 'quiz-a-2', 'quiz-a-3', 'quiz-a-4'); // Javascript public $ jsAdmin = '/js/admin.js';

Añadir el constructor

Primero registramos el tipo de publicación personalizada usando otro método auxiliar (que se verá más adelante)
Entonces estamos registrando un gancho para cargar nuestra meta box.
También necesitamos un método separado para aceptar nuestras solicitudes ajax.
Finalmente, cuando se carga una página, queremos guardar la información de nuestro meta box

 / ** src / WpQuiz.php ** / public function __construct ($ type) switch ($ type) case 'admin': // Registrar el Post Type $ this-> registerPostType ($ this-> postTypeNameSingle, $ this -> postTypeNamePlural); // Agregar el cuadro de metadatos add_action ('add_meta_boxes', array ($ this, 'addMetaBox')); // Aceptar una solicitud de Ajax add_action ('wp_ajax_save_answer', array ($ this, 'saveAnswers')); // Esté atento a que la publicación se guarde add_action ('save_post', array ($ this, 'savePost'));

Agregue el Meta Box

Agregue los archivos JavaScript necesarios para este complemento, nuevamente usando un método auxiliar (ver más adelante)
Cree un ID único para este complemento basado en el nombre del tipo de publicación
Agregue el meta box usando las propiedades que establecimos anteriormente.

 / ** src / WpQuiz.php ** / public function addMetaBox () // Cargue el Javascript necesario en esta página de administración. $ this-> addScripts (); // Crear una identificación basada en el nombre post-tipo $ id = $ this-> postTypeNameSingle. '_metabox'; // Agregue el cuadro meta add_meta_box ($ id, $ this-> metaBoxTitle, array ($ this, 'getMetaBox'), // Obtenga el marcado necesario $ this-> postTypeNameSingle);

Obtener el contenido de Meta Box

Aquí hacemos un bucle a través de nuestros ID de respuesta y construimos una matriz que contiene el método meta de búsqueda posterior. obtener una respuesta. Creamos esta nueva matriz para poder codificarla y enviarla a nuestra plantilla en formato JSON, tal como a Backbone le gusta. Nosotros enviar datos a nuestra plantilla utilizando el $ viewData matriz se ve a continuación. Esto mantiene todo el HTML fuera de peligro y nos permite trabajar en él en un archivo separado. Vamos a echar un vistazo rápido a la getTemplatePart más adelante, pero si desea una explicación detallada de por qué lo uso, consulte Mejora de su flujo de trabajo: separe su margen de beneficio de su lógica!

 / ** src / WpQuiz.php ** / public function getMetaBox ($ post) // Obtenga los valores actuales para las preguntas $ json = array (); foreach ($ this-> answerIds como $ id) $ json [] = $ this-> getOneAnswer ($ post-> ID, $ id);  // Establecer los datos necesarios en la plantilla $ viewData = array ('post' => $ post, 'answers' => json_encode ($ json), 'correct' => json_encode (get_post_meta ($ post-> ID, 'correct_answer '))); echo $ this-> getTemplatePart ($ this-> metaBoxTempl, $ viewData);

Obtener una respuesta única - Ayudante

Solo estamos devolviendo una matriz de los datos necesarios en nuestra plantilla. Puede pensar en esto como crear un modelo único que se necesita en la parte delantera.

 / ** 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));

Guardar publicación

Cuando un usuario hace clic para guardar una publicación en la que se encuentra actualmente nuestro meta box, debemos realizar un par de comprobaciones para asegurarnos de que estamos guardando nuestro tipo de publicación personalizada y que el usuario actual tenga los permisos correctos. Si ambas comprobaciones están bien, entonces Guarda las cuatro respuestas del meta box y la respuesta correcta..

 / ** src / WpQuiz.php ** / public function savePost ($ post_id) // Compruebe que estamos guardando nuestro tipo de publicación personalizada if ($ _POST ['post_type']! == strtolower ($ this-> postTypeNameSingle) )  regreso;  // Verifique que el usuario tenga los permisos correctos si (! $ This-> canSaveData ($ post_id)) return;  // Acceda a los datos desde $ _POST global y cree una nueva matriz que contenga // la información necesaria para hacer que el archivo $ save = array (); foreach ($ this-> answerIds como $ id) $ fields [$ id] = $ _POST [$ id];  // Recorra la nueva matriz y guarde / actualice cada uno de foreach ($ fields as $ id => $ field) add_post_meta ($ post_id, $ id, $ field, true); // o update_post_meta ($ post_id, $ id, $ field);  // Guardar / actualizar la respuesta correcta add_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer'], true); // o update_post_meta ($ post_id, 'correct_answer', $ _POST ['correct_answer']);

Guardar respuestas de solicitudes Ajax

Aquí es donde recibiremos los datos pasados al servidor desde Backbone. Necesitamos que:

Acceda a los datos enviados como una solicitud PUT. Como estará en formato JSON, necesitamos decodificarlo.
Verifique nuevamente que el usuario actual tenga permisos relevantes
Sigue adelante e intenta salvar.
Si Add o Update tuvo éxito, simplemente podemos devolver los datos recién guardados y Backbone lo verá como un guardado exitoso
Si ninguno de los dos tuvo éxito, solo devolvemos 0 para indicar un error

 / ** src / WpQuiz.php ** / public function saveAnswers () // Obtener datos PUT y decodificarlos $ model = json_decode (file_get_contents ("php: // input")); // Asegúrese de que este usuario tenga los permisos correctos si (! $ This-> canSaveData ($ model-> post_id)) return;  // Intente una inserción / actualización $ 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); // Si una operación de guardar o actualizar fue exitosa, devuelva el modelo en formato JSON if ($ update) echo json_encode ($ this-> getOneAnswer ($ model-> post_id, $ model-> answer_id));  else echo 0;  die ();

Los métodos de ayuda

Aquí están los cuatro ayudantes mencionados en los fragmentos anteriores..

canSaveData () - Esto solo garantiza que el usuario actual tenga los permisos relevantes para editar / actualizar esta publicación.
addScripts () - Tenga en cuenta que aquí nos aseguramos de pasar el quinto parámetro a la wp_register_script () función. Esto cargará nuestro JavaScript personalizado en el pie de página y garantizará que nuestros datos JSON estén disponibles. Además, si está utilizando el editor de WordPress en su complemento, no necesita especificar Backbone como una dependencia, ya que ya estará disponible para usted. Aunque lo incluyo aquí por el ejemplo.
registerPostType () - Esto es algo que uso a menudo en los complementos. Simplemente hace la vida más fácil al agregar un nuevo tipo de publicación personalizada. Acepta versiones tanto en singular como en plural del nombre porque no siempre es tan fácil como simplemente agregar una 's'.
getTemplatePart () - Nunca me ha gustado tener marcas dentro de mis métodos. Este pequeño ayudante permitirá el uso de un archivo de plantilla separado.

 / ** src / WpQuiz.php ** / / ** * Determine si el usuario actual tiene los permisos relevantes * * @param $ post_id * @return bool * / private function canSaveData ($ post_id) si (definido ('DOING_AUTOSAVE ') && DOING_AUTOSAVE) devolver falso; if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) devuelve false;  else if (! current_user_can ('edit_post', $ post_id)) devuelve false;  devuelve true;  función privada addScripts () wp_register_script ('wp_quiz_main_js', pp (). $ this-> jsAdmin, array ('backbone'), null, true); wp_enqueue_script ('wp_quiz_main_js');  / ** * Registrar un tipo de publicación personalizada * * @param $ single * @param $ plural * @param null $ support * / función privada registerPostType ($ single, $ plural, $ support = null) $ labels = array ( 'name' => _x ($ plural, 'nombre general del tipo de publicación'), 'singular_name' => _x ("$ single", 'nombre singular del tipo de publicación'), 'add_new' => _x ("Add New $ single "," $ single "), 'add_new_item' => __ (" Add New $ single "), 'edit_item' => __ (" Edit $ single "), 'new_item' => __ (" New $ single ") , 'all_items' => __ ("All $ plural"), 'view_item' => __ ("View $ single"), 'search_items' => __ ("Search $ plural"), 'not_found' => __ ( "No $ plural encontrado"), 'not_found_in_trash' => __ ("No $ single encontrado en la Papelera"), 'parent_item_colon' => ", 'menu_name' => $ plural); $ args = array ('labels' = > $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capacity_type' = > 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => nul l, 'apoya' => ($ apoya)? $ admite: array ('título', 'editor', 'atributos de página')); register_post_type ($ single, $ args);  / ** * Renderizar un archivo de plantilla * * @param $ filePath * @param null $ viewData * @return string * / public function getTemplatePart ($ filePath, $ viewData = null) ($ viewData)? extraer ($ viewData): null; ob_start (); include ("$ filePath"); $ template = ob_get_contents (); ob_end_clean (); devuelve $ plantilla;

5. En el extremo delantero

En este punto, hemos configurado todo lo necesario para nuestro back-end. Es hora de tomar un descanso y prepararse para la siguiente parte, en la que nos pondremos en marcha con las plantillas del lado del cliente, JavaScript y Backbone.js. Espero verte allí - va a ser bueno.

Código