programador

iván albizu

Main Blog

Blog

Angular consumiendo de WordPress Rest Api – Custom post types

Angular consumiendo de WordPress Rest Api

En esta cuarta entrada sobre AngularJS y WordPress Rest Api voy a crear una entrada personalizada de WordPress y añadir nuevo tipo de campo. Esta nueva entrada y sus nuevos campos serán consultados desde AngularJS. (Al final de la entrada he publicado un vídeo y el repositorio en Git Hub).

Buena parte del código del cliente AngularJS será muy similar a una entrada anterior, en la que consumía las entradas de la Rest Api de WordPress con AngularJS, por tanto, no voy a repetir el código y sólo añadiré aquellas cosas que lo hagan diferente.

Configurando wordpress

Lo primero es crear los tipos de entradas. En mi tema de WordPress, en mi caso tema hijo de twentyfifteen, he editado el archivo functions.php para añadir el tipo de entrada. La documentación de WordPress Rest Api está bastante bien, incluso explica como crear un tipo de entrada personalizada.

Lo más importante es habilitar a las opciones del tipo que se muestra en nuestra Rest Api, para ello hay que pasarle como argumento: ‘show_in_rest’=> true. Hay más opciones, como la de cambiar los ‘endpoint’, en mi caso no lo he cambiado, ya que por defecto será en nombre de la entrada.

De momento podemos consultar, entre otros campos, el título, el contenido, el extracto y las revisiones de la nueva entrada creada. Vamos a añadir dos nuevos campos, pero no desde cero, si no con el plugin Advanced Custom Field.

Una vez que hemos creado los campos con el plugin anterior, tendremos que editar el archivo functions.php de nuestro tema de WordPress. La documentación de Wp Rest Api nos ayuda para registrar los nuevos campos a nuestra Rest. Si visitamos la sección Extending -> Modifying Response vemos las instrucciones.

He usado las tres últimas funciones, tiene muchas líneas pero tan sólo hay que añadir nuestro nombre de campos creados con ACF.

Trabajos con AngularJS

Nuestro archivo ‘studies-services.js’ es prácticamente igual a ‘posts-services.js’. Sólo cambiarán las diferentes rutas. Por ejemplo, para obtener todos los registros será: URL_API.BASE_URL + ‘/wp/v2/formacion’.

Crear nuevo registro

Dentro de nuestro controlador ‘StudiesCtrl’ creamos el método createStudy(study). Tenemos los dos nuevos campos, year y school, que como vemos, es igual que el resto de campos

La única diferencia será en la vista, más en concreto será la forma de pintarla: {{study.year[0]}}.

Editar un registro

Es similar a lo anterior, por lo que no explico otra vez lo mismo, el código es:

https://github.com/ivanalbizu/angular_wordpress_rest_api

Esta entrada tiene 0 comentarios

Deja un comentario





Time limit is exhausted. Please reload CAPTCHA.