Angular WordPress

WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones api rest con Angular, la cual da hincapié a un lenguaje mas optimizado y entendible para programar en Font End sin la obligación estricta de aprender php + plantillas de WordPress; pero primero hablemos de que es este lenguaje.

¿Qué es Angular?

Angular es un Framework de JavaScript escrito en TypeScript de código abierto, cuyo fin es realizar aplicaciones web en una sola pagina. Usando la arquitectura Modelo-Vista-Controlador (MVC), estas tres partes constan.

• Modelo: Se encarga de la administración de la información.
• Vista: Se presenta la información.
• Controlador: Genera una respuesta e interactúa con el modelo.

Por lo tanto, en un contexto de programación web, la analogía seria Angular será el modelo, HTML seria la vita y por otro lado JavaScript seria el controlador.

¿Cómo implementar Angular en WordPress?

1. Librerías y entorno de trabajo

Tener previamente instalado Node JS es el primer paso, ya que este administrara los nodos en un sistema de ventanas. Posteriormente instalamos angular-cli npm install ''g @angular/cli; , esto con el fin de crear posteriormente el entrono de trabajo de angular ng new miProyecto; en este se instalan las librerías necesarias para el inicio del proyecto.

2.Establecer servicio de conexión de WordPress

En este caso angular-cli es el encargado de construir todos los archivos que se emplearan para nuestro servicio. Se debe colocar lo siguiente en consola ng generate service wp; o la alternativa de ng g service wp;, esto crea dos archivos que se ubican en la carpeta app con nombres wp.service.spec.ts y wp.service.ts.

No obstante, para poder emplear el formato JSON es necesario emplear la librería HttpClient que viene empleado en la paquetería de Angular. Para así generar el siguiente resultado en app.module.ts.

importar {HttpClientModule} desde '@angular/common/http';

@NgModule({
declaraciones: [AppComponent],
importaciones: [
BrowserModule,
HttpClientModule
],
proveedores: [],
bootstrap: [AppComponent]
})...

Para así abrir nuestro archivo wp.service.ts para entonces crear los métodos para recibir la información del blog a través del formato JSON empleando la API.

A continuación se presentara el siguiente código de como debería quedar nuestro WpService.ts.

importar { Inyectable } desde '@angular/core';
importar { HttpClient } desde '@angular/common/http';

@Injectable()
export class WpService {
public URL = 'https://resultadosdigitais.com.br/blog/'; API
pública = `${ esta .URL}wp - json/wp/v2/posts`;

constructor( private http: HttpClient) { }
getAll(id: number) {
return this .http.get(`${este .API}?_embed & por_página = ${id}`);
}
getSinglePost(id: string ) {
return this .http.get(`${ this .API}?_embed & slug = ${id}`) ;
}
}

Concurriendo con lo anterior se puede observar el método getAll(id: number) , el cual es utilizado para solicitar la cantidad de publicaciones las cuales se pretenden visualizar.

Por otro lado, viene por defecto http://url/wp-json/wp/v2/posts el cual da una vista de los últimos 10 artículos, para eso se emplea el filtro per_page cuyo objetivo es permitir tener hasta 100 publicaciones.

No óbstate, otro método empleado es getSinglePost(id: string) el cual solo se puede visualizar un solo post el cual no se busca por su ID utiliza un filtro slug.

3. ¿Cómo crear componentes para WordPress?

En primer lugar se tiene que generar nuestros diferentes archivos para así visualizar todos los blogs empleando angular-cli ng g component blog;

blog.component.ts.

...
importar { WpService } desde '../wp.service';
...
// declaramos como cualquier nuestra variable feed
feed: any;

constructor( wp privado : WpService) { }

ngOnInit() {
this .getPosts();
} getPosts

privados () {
this .wp.getAll (100)
.subscribe (datos => {
this .feed = datos;
});
}
}

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']. nombre}} </p>
<p [innerhtml]="f.content.rendered"></p>
</div>
</div>
</div>

Trabajar con el sitio de trabajo de Angular.JS es eficiente y combinado con WordPress se puede emplear un SPA (aplicación de una sola página), con todos los controladores de CMS y complementos que ofrece WordPress, este es un atajo interesante.

Configuración del tema

Para empezar se tiene que crear un nuevo tema, para esto se emplea el comando _tk tema repetitivo para empezar. El siguiente es la implementación del _s que es tema de guiones bajos automático pero con Bootstrap de Twitter implementado.

Ahora se puede implementar el _tk en el tema de inicio, pero para esto se necesitan los npm de los paquetes de Angular.js desde su directorio de temas (estamos usando el nombre angular-bootstrap).

• Primero de debe inicializar npm dentro del directorio de temas se usa el npm init con el fin de crear el package.json.
• Por otra parte se una --save bandera en nuestro npm install angular angular-route --save este comando, le indicamos npm que agregue los módulos como dependencias a nuestro proyecto.

Para así tener tus paquetes en tu node_modules directorio dentro de tu tema.

Construcción de Rutas

Las rutas conforman las paginas que son especificas en tu blog Podemos definir uno para nuestro main.html de forma parcial y configurarlo para que muestre en la página de índice de nuestro WordPress.

Antes de proceder asegúrese que la aplicación de Angular.js este definida por medio del ng-appa tributo y header.php haga lo siguiente:

<!DOCTYPE html><font></font>

<font></font>

<html <?php language_attributes(); ?> ng-app="wp"><font></font>

<head><font></font>

<base href="/"><font></font>

Ahora adentro partials/main.html agrega esto:

<ul><font></font>    

<li ng-repeat="post in posts"><font></font>

<a href="{{post.slug}}"><font></font>            

{{post.title}}<font></font>       

  </a><font></font>

  </li><font></font>

</ul><font></font>

Para culminar dentro de index.phpde , directamente después get_header.php()de , agregue el atributo Angular ng-view en una di vetiqueta.

<div ng-view=""></div>

Actualice el índice de su WordPress, y ahora se mostrará una lista de viñetas de las publicaciones de su blog en la página de inicio.

Esto se debe a la ng-controllerinvocación del Maincontrolador scripts.js y al ng-view atributo que especifica dónde debe mostrarse Angular.

Habilitando WP-API

Para que Angular se active con WordPress, debemos habilitar el complemento WP-API REST. Lo cual no es muy complejo, puesto que es solo la instalación de un complemento.

Para ello descargue e instale el complemento desde git y ejecute lo siguiente en su pluginsdirectorio:

git clone git@github.com:WP-API/WP-API.git json-rest-api

Luego habilite el complemento en su wp-adminpanel. Podrá ver la salida JSON una your-wordpress.com/wp-json vez que esté habilitada.

Autor: Juan Sebastián Parra López.

Editor: Carlos Ivan Pinzon Romero.

Universidad: Universidad Central.

Código: UCPW – 7.

Fuentes

Héctor, A. (2018). Conectar WordPress con Angular a través de REST API. medium. https://hectorcanaimero.medium.com/conectar-wordpress-con-angular-a-trav%C3%A9s-de-rest-api-1fc1cb9fc3af

Gonçalves, 
MJ. (2021). ¿Qué es Angular y para qué sirve?. Hiberus. https://www.hiberus.com/crecemos-contigo/que-es-angular-y-para-que-sirve/

Deyimar, A. (2021). ¿Qué es Angular? – Una guía para principiantes. hostinge. https://www.hostinger.co/tutoriales/que-es-angular

Whitbread  A. (2021). Creación de aplicaciones de una sola página con WordPress y Angular.js. envato-tuts. https://code.tutsplus.com/tutorials/creating-single-page-applications-with-wordpress-and-angularjs--cms-25095

Web Dev Profesh. (2017). Connecting Angular 4 with Headless WordPress Rest API. [Video]. YouTube. https://www.youtube.com/watch?v=2qR0vE9W8Bg&t=15s&ab_channel=WebDevProfesh 

Francisco, A. (2019). WordPress con Angular[imagen]. medium.https://miro.medium.com/max/1400/1*v-hY4tSOtYLrvTz1STSfCQ.jpeg  

Alvantia.(2018). imagen angular. [imagen]. https://www.alvantia.com/wp-content/uploads/2018/10/imagen-Angular-2.jpg  

Flajszer, P. (2021). Cómo convertir una respuesta API en una miniatura de clase C#. [imagen]. https://i0.wp.com/fullduck.dev/wp-content/uploads/2021/05/thumb.png?w=1200&ssl=1