Conectar Wordpress con Angular a través de REST API

Wordpress en el 2015 empezo a trabajar fuertemente en una REST API, la cual ya para la version actual esta integrada en su core, esta dispone de todas las informaciones necesarias para el desarrollo del CMS en formato JSON. Actualmente podemos crear nuestras aplicaciones Web y Mobile usando este CMS con su lenguaje de programacion favorita, ya podemos decirle Adios a PHP.

Hoy vamos a conectar Angular con Wordpress usando REST API.

Indice

1. Instalación de librerias y entorno.
2. Creando el service que conecte con Wordpress.
3. Aplicando el service dentro de los componentes.

1.Instalación de libreria y entorno

Ya tenemos isntalados nuestro nodejs. Ahora instalemos angular-cli npm install ''g @angular/cli;, luego creamos nuestro entorno de trabajo de angular ng new miProyecto; alli se instala todas las librerias necesarias para iniciar un proyecto con Angular 6.

2. Creando el service que conecte con Wordpress.

Utilizaremos el poderoso angular-cli para crear todos los archivos que necesitamos para nuestro service, solo debemos copiar lo siguiente en nuestra consola ng generate service wp; o tambien ng g service wp;, se crearon dos archivos dentro de la carpeta app de nombres wp.service.spec.ts y wp.service.ts.

Para trabajar con el formato JSON necesitamos usar la libreria HttpClient que trae en su paqueteria angular. Asi quedaria nuestro app.module.ts

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})...

Despues abrimos nuestro archivo wp.service.ts y crearemos los metodos para recibir la informacion del blog a traves de formato JSON usando el API.

En el siguiente codigo deberia quedar nuestro WpService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class WpService {

  // URL del blog que vamos a trabajar con su REST API
  public URL = 'https://resultadosdigitais.com.br/blog/';
  public API = `${this.URL}wp-json/wp/v2/posts`;

  constructor(private http: HttpClient) { }

  /**
   * Numero de post que quieres mostrar
   * @param id
   */  
  getAll(id: number) {
    return this.http.get(`${this.API}?_embed&per_page=${id}`);
  }

  /**
   * Slug del post que vamos a mostrar
   * @param id
   */
  getSinglePost(id: string) {
    return this.http.get(`${this.API}?_embed&slug=${id}`);
  }
}

El metodo getAll(id: number) lo utilizaremos para solicitar una cantidad de posts que queremos mostrar, por defecto http://url/wp-json/wp/v2/posts muestra los ultimos 10 articulos, por esa razon modificamos la consulta utiliando el filtro per_page el cual te permite traer hasta 100 post.

El otro metodo usado es getSinglePost(id: string) aqui mostrara un solo post pero en vez de buscarlo por su ID lo hara a traves del filtro slug.

3. Creando los componentes para wordpress

Generamos nuestro archivos para mostrar todos los blog usando angular-cli ng g component blog;

blog.component.ts

...
import { WpService } from '../wp.service';
...
  // declaramos como any nuestra variable feed
  feed: any;

  constructor(private wp: WpService) { }

  ngOnInit() {
    this.getPosts();
  }

  private getPosts() {
    this.wp.getAll(100)
    .subscribe( data => {
      this.feed = data;
    });
  }
}

El blog.component.html

<div class="container">
  <div class="row">
    <div class="col-md-12" *ngfor="let f of feed">
      <img class="img-fluid" style="height: 500px !important; width: 100%" [src]="f?._embedded['wp:featuredmedia']['0'].source_url" alt="{{f.title.rendered}}">
      <h2 class="text-center">{{f.title.rendered}}</h2>
      <p class="txt-lead">Autor: {{f?._embedded['author']['0'].name}} </p>
      <p [innerhtml]="f.content.rendered"></p>
    </div>
  </div>
</div>

Imagen del Blog

y para mostrar un solo post, llamamos a la funcion getSimplePost() en el archivo single-post.component.ts

...
import { WpService } from '../wp.service';
import { ActivatedRoute } from '@angular/router';

export class SinglePostComponent implements OnInit {

  id: string;
  feed: any;

  constructor(
    private wordpress: WpService,
    private route: ActivatedRoute
  ) {
    this.route.url.subscribe(u => {
      this.id = this.route.snapshot.params.id;
    });

  }

  ngOnInit() {
    this.singlePost();
  }

  private singlePost() {
    this.wordpress.getOne(this.id).subscribe(
      data => {
        this.feed = data;
      }
    );
  }

}

y el html de nuestro single-post.component.html

<div class="container">
  <div class="row">
    <div class="col-md-12" *ngfor="let f of feed">
      <img class="img-fluid" style="height: 500px !important; width: 100%" [src]="f?._embedded['wp:featuredmedia']['0'].source_url" alt="{{f.title.rendered}}">
      <h2 class="text-center">{{f.title.rendered}}</h2>
      <p class="txt-lead">Autor: {{f?._embedded['author']['0'].name}} </p>
      <div [innerhtml]="f.content.rendered"></div>
    </div>
  </div>
</div>

Te dejo el enlace para que puedas ver y descargar el proyecto completo, alli puedes encontrar la configuracion del router. Github