Creación de una aplicación JavaScript para una sola página en el tablero de WordPress

Durante más de un año, hablo con la comunidad de WordPress sobre JavaScript, especialmente sobre Angularjs. No solo expresé la creciente importancia de JavaScript para personas en conversaciones y publicaciones de blog, sino que también enfaticé la importancia de mi WordCamp 2015. Parece que Matt Mullenweg comparte este sentimiento, porque a principios de este mes en el Wordcamp de EE. UU., Instó a todos para “aprender JavaScript, profundo”. En este artículo, pasaré por los elementos fundamentales de crear una mejor interfaz de administración para desarrolladores de arados y temas utilizando AngularJS. También demostraré cómo puedes llevarlo al siguiente nivel.
Sin embargo, no discutiré por qué esto es tan importante para el desarrollo del front-end o cómo el descanso API cambia las cosas para facilitar la construcción de aplicaciones de JavaScript. Si está interesado en obtener más información al respecto, yo y yo y Josh Pollock hemos escrito en general sobre esto ya en torque. Antes de comenzar, debe determinar qué administra en el sitio. Para mantenerse simple, suponga que su complemento crea un tipo de publicación personalizada (CPT) que está oculto de la barra lateral. Este caso de uso es simple: tiene un CPT para almacenar datos, pero no desea usar la pantalla de edición de WordPress predeterminada. En cambio, desea asociarles datos utilizando la meta post, pero también tiene un UX único y fácil.

Todo se trata de UX que la experiencia del usuario, o UX, es importante y debe evaluarse cuidadosamente antes de comenzar. El tablero de WordPress ya no se limita a sus capacidades nativas. Con la API REST, ahora se puede modificar para satisfacer las necesidades específicas y, sí, puede mejorar UX. Ahora, puede crear una aplicación JavaScript que realmente le brinde la flexibilidad de un UX y una interfaz de uso único. Este es uno de los poderes reales de la API REST y lo que emociona a muchos desarrolladores. Así que piense en UX antes de comenzar. Este es uno de los poderes reales del resto y que emociona a muchos desarrolladores. Así que déjame repetir, piense en UX antes de comenzar. Advertencia de código avanzado Este tutorial pasará por parte de muchos elementos básicos. Si desea rastrear mi código en GitHub, necesitará conocimiento laboral sobre NPM, Gulp y JavaScript. Reflight Check: cree un complemento y agregue contenido de contenido: este es solo un paso básico que se requiere cuando comienza desde cero. Si ya tiene un tema de complemento o contenido (o datos), puede omitir esta sección.
Antes de comenzar, necesita datos para analizar y manipular. Comience creando un complemento, luego agregue un tipo de publicación y algunas publicaciones. Utilizo una opción_site para guardar el contenido que se ha creado. Puede ver mi código para la creación de CPT y la creación de contenido en GitHub. Cuando creé el CPT, me aseguré de configurar el show_in_menu en falso, de modo que no hay otro CPT en el lado izquierdo del tablero de administración. Paso 1: Cree el menú, agregue DOM a la aplicación y ponga el siguiente paso en JavaScript es configurar la interfaz de usuario y el DOM básico para tomar el control. No entraré en detalles sobre la creación de una página de menú de administrador o los scripts en la cola, pero tengo mi código en línea. Tienes una barra de navegación y contenido básico. Si recién está comenzando, le recomiendo que omita la navegación hasta que todos los estados estén listos para irse. Esta puede ser una de las últimas cosas que codifica. Puede ver el código completo aquí. Además, antes de llegar demasiado lejos, pruebe para asegurarse de haber codificado correctamente, actualizando el tablero de WordPress. Si obtiene errores en la consola PHP o JavaScript, esta es una buena señal. Intenta comentar sobre la cola para ver si se juega el DOM. Si sucede, verifica que la página del menú funcione como debería. Todos sabemos que el código de menú de WordPress no siempre es el más amigable.
Coloque la cola de administración JS que puse en la cola admin-ap ysess.js, que es un archivo conciso que consta de varios otros archivos, incluyendo angular, enrutador angular, recursos angulares y mi aplicación de administración. Utilizo Gulp para administrar la concatenación. Si desea usar mi configuración, deberá ejecutar Gulp JS en la línea de comando después de instalar todas las adicciones de NPM utilizando la instalación de NPM. Puede ver el código completo aquí. Para ver los archivos que están concatenados o agregue nuevos, vaya a las filas 6-11 del archivo gulpfile.js. Localizar script: puede ver en admin_js.php que utilicé locals_script para crear un objeto JavaScript local. Específicamente, quería almacenar una forma dinámica de hacerse cargo de la API de URL de la dirección, el director de la plantilla y la actual NONC. Esto no es para nuestras plantillas PHP regulares, sino que es para las plantillas HTML que usaremos en nuestra aplicación JavaScript. Si no tiene un director de plantilla en el directorio básico de su complemento, cree uno ahora. Agregaremos archivos .html aquí mientras los necesitamos. Paso 2: Personalice la API para sus datos antes de crear su aplicación, debe asegurarse de que la API tenga los puntos finales necesarios para hacerse cargo y manejar fácilmente los datos. Si solo crea una aplicación para los tipos de publicaciones predeterminadas (publicaciones y página), no dude en omitir este paso.
Paso 2A: Puntos finales personalizados vs. Puntos finales predeterminados Cuando comencé a escribir este artículo y a crear el código para ello, creé un punto final personalizado para mostrar cómo funciona, sin embargo, Josh Pollock me corrigió rápidamente. Esto se debe al hecho de que si tiene un CPT simple y sus acciones son solo para editar, eliminar y crear, entonces debe usar la funcionalidad predeterminada con puntos finales incorporados. Agregar campos personalizados no se acepta en WordPress 4.4, por lo que deberá descargar REST API V2 Beta. Ajustar el resto a un CPT, agregar el resto de un CPT existente es fácil. Si tiene acceso a CPT Creation, simplemente establezca el parámetro show_in_rest en verdadero, si no tiene acceso al código de creación CPT, siga mi ejemplo aquí. Usando este ejemplo, puede agregar soporte REST para múltiples CPT agregando su Slug CPT a la matriz $ post_type_names. Los campos API predeterminados de forma predeterminada, la API REST no incluye metadatos de una publicación de respuesta, por lo que tendremos que agregar campos personalizados. Primero, deberá registrar los campos, luego crear dos funciones de llamadas inversas para administrar GET y POST. Estas funciones de llamadas inversas están a cargo de hacerse cargo y actualizar la meta post.
Primero, deberá registrar los campos, luego crear dos funciones de llamadas inversas para administrar GET y POST. Estas funciones de llamadas inversas están a cargo de hacerse cargo y actualizar la meta post. En mi ejemplo, capto especialmente dos meta de los campos post y, en el rescate, hago un bucle. Este es un enfoque fácil, sin embargo, para una aplicación de producción, recomiendo crear un campo personalizado para cada meta personalizado. De esta manera, cada uno es modular y puede hacer cualquier lógica en el campo (verificación de tipo, evaluación de datos, etc.) independientemente de cualquier otro campo personalizado. (‘Get_callback’ = & amp; gt; array ($ this, ‘get_book_meta ‘),’ update_callback ‘= & amp; gt; array ($ this,’ update_book_meta ‘), “esquema” = & amp; nul,); } La función get_book_meta ($ objeto, $ name_cade, $ request) {return = matrix (“isbn” = & amp; gt; get_post_meta ($ object [‘id’], ‘isbn’, true), “precio” = & & & & & & amp; gt; get_post_meta ($ object [‘id’], ‘precio’, true)); devolver $ return; } La función update_book_meta ($ value, $ object, $ name_cade) {foreach ($ valor como $ key = & amp; $ new_value) {update_post_meta ($ object- & amp; id, $ key, $ new_value); } Devolver;
} [/Php] Puntos finales personalizados Si desea más funciones además del simple rescate de una publicación y publicaciones de metal, es posible que desee crear un punto final completamente personalizado para cualquier cosa. Puede crear puntos finales personalizados con este rápido proceso de dos pasos. Primero, grabe las rutas con un espacio de nombre y luego cree las funciones de llamadas basadas en llamadas inversas. Dejé el código para mi ejemplo básico de esto aquí. Paso 2B: Probar su API Una vez que haya terminado la primera parte, debería poder probar fácilmente si funciona. La forma más rápida de hacerlo es ir a YourDomain.com/wp-json/ para ver si puede encontrar el espacio de nombre que ha declarado el final personalizado o encontrar la babosa CPT. En mi ejemplo de código, encuentro “libro” en el espacio de nombre “wp/v2”, así que sé que puedo ir a dominio.com/wp-json/wp/v2/book para ver una lista de las últimas publicaciones “Libro” “. Obras – Huzzah! Si desea probar todo, puede usar algo como la aplicación para Chrome, Postman REST API, que le permite verificar directamente las llamadas como la publicación, sin escribir ningún código. Recuerde, es posible que deba usar ese objeto no en el localizado no en el localizado. Paso 3: Cree la aplicación, los estados, la fábrica y el filtro HTML ahora que tiene todo en su lugar (HTML, JavaScript y API), está listo para comenzar a codificar su interfaz de administración. Estructuré mi aplicación de muestra para tener cuatro páginas: página principal (página de información general)
La página de listado (para enumerar las publicaciones en nuestro CPT)
Página de detalles
y editar la página.

La decisión de la aplicación y las adicciones regresan a la página del menú que definió en PHP.Notará en mi ejemplo que el contenedor DI tiene ng-app-it debe coincidir con su nombre de su aplicación angular.Debido a que utilizará el enrutador UI y Ng-Resource, deberá incluir estas adicciones externas en su aplicación. El código final debe verse así: [js] admin_js_app.app = angular. ‘Ui.rouuter’, ‘ngressource’ ]); [/js] Configuración de rutas y plantillas ahora es hora de establecer rutas.Usando el enrutador UI, definirá algunos estados, controladores y plantillas asociados con ellos: [js] admin_js_app.app.pconfig (function ($ stateProvider, $ urlrouterprofider) {$ urlrouterprovider.otherwise (‘/’); $ stateProvider “. , {url: ‘/’
, TemplateUrl: admin_app_local.template_directory + “/admin-js-ppmain.html”,}) … [/js] Puede ver el código completo aquí. Puede ver los cuatro estados enumerados anteriormente definidos utilizando el enrutador UI y la plantilla HTML apropiada. Asegúrese de tener archivos HTML (o crear) en el lugar correcto para que no obtenga ningún error 404 al intentar ver la aplicación. Configuración del filtro y fábrica necesitará un solo filtro y una fábrica para la aplicación. Si desea trabajar con varios puntos finales, deberá crear una nueva fábrica. El filtro utiliza un inyectable $ sceO para confiar en el texto HTML y mostrar HTML en lugar de solo una cadena. Puedes ver que he inyectado el nonce en la fábrica, por lo que no tengo que llamarlo con apelación. Asegúrese de cambiar la ruta de fábrica de acuerdo con el punto final /libro. No funcionará para usted si no tiene un CPT de “libro”. Puede ver el código completo aquí. Paso 4:
Cree los controladores ahora que tiene todo en su lugar, la última pieza del rompecabezas es poner en funcionamiento los controladores. Si desea probar su aplicación para ver si funciona, elimine cualquier llamada de controlador en el estado angular, de manera similar a cómo mi ejemplo para el estado “principal” no tiene un controlador. Si cambia el código HTML a cada una de las plantillas HTML y se mueve a la URL, como /libro, debe ver la plantilla HTML correcta. Los controladores establecen los datos para cada plantilla o vista. Comenzando con el controlador de la lista, cree el controlador y asegúrese de inyectar desde la fábrica. Puede ver un ejemplo de controlador de lista aquí. El controlador de la lista es bastante simple. Todo lo que hace es interrogar el punto final para las últimas publicaciones, que luego almacena en $ Scope.books. En la plantilla, tengo una repetición NG que se repite a través de todos los libros para mostrar una lista de todas las publicaciones. El otro lado del controlador de la lista es el botón Eliminar. Sin embargo, no necesitas eso, pensé que podría ser algo bueno tener en esta página. El comando de eliminación es tan fácil de hacer como editar u obtener el comentario, solo libros. ¡Eso es todo! ¡El controlador de su lista está listo!