Potencia un blog con la API de WordPress

Sep 11, 2025

Cómo

[dieciséis]

En los últimos años, el desarrollo de una API de descanso para WordPress ha abierto nuevas puertas para los desarrolladores. Los desarrolladores que antes habían sido limitados a escribir un proyecto de WordPress-Powered en PHP ahora tienen más flexibilidad y control en la forma en que pueden acercarse a la pila de tecnología de su sitio web a ser.

Esto significa que es posible conservar todas las ventajas del brillo panel de control de WordPress, que se hace extremadamente flexible por popular Complementos de WordPress como los campos personalizados avanzados, y tienen una frontest creada completamente a medida que solo interactúa con WordPress cuando necesita.

Descargar los archivos tutoriales.

En esto Tutorial de WordPress Estaremos explorando cómo implementar la API de REST de WordPress en una aplicación de blog simple, que actualmente utiliza un archivo JSON local como su fuente de datos, y se construye como una aplicación de una página única (SPA) con el marco popular de JavaScript Vue.js . Esto implicará la implementación de VUEX, que usaremos para almacenar los datos que solicitamos de un WordPress usando una combinación de sus métodos de acción y mutación.

Una vez completado, debería haber creado un spa magro y simple, que tiene toda la reactividad de VUE.JS, mientras que muestra las publicaciones recuperadas y administradas por WordPress.

Para las API más impresionantes para explorar, eche un vistazo a nuestros guías a los mejores. APIES DE JAVASCRIPT De APIES HTML y APIES DE Google .

01. Configurar espacio de trabajo y dependencias.

Primeras cosas primero, deberías Descargar los archivos del proyecto. y abrirlos en su editor preferido.

En la consola, CD en Plantilla de sitio web y ejecute el comando a continuación para instalar las dependencias del nodo del proyecto (si no tiene un nodo instalado, Haz eso primero ). Estaremos trabajando puramente en el SRC Directorio desde aquí en adelante.

npm install

02. Instalar VUEX

A continuación, usando el comando a continuación, instalaremos VUEX , que es un patrón de gestión estatal y una biblioteca para aplicaciones VUE.JS. Esto actuará como un almacén de información central para todos los componentes de VUE que dependen de los datos que recibimos de la API de WordPress. Para los desarrolladores familiarizados con reaccionar, VUEX está muy inspirado por el flujo.

npm install vuex --save

03. Iniciar servidor de desarrollo

En la consola, ejecute el comando a continuación para iniciar el servidor de desarrollo. Esto compilará el proyecto VUE.JS, ya que actualmente representa y lo asignará a una URL para que pueda acceder a ella. Esto es usualmente localhost: 8080 .

Una gran ventaja que trae es una recarga en vivo, por lo que una vez que realice cambios en la aplicación y guardar, la página en su navegador se actualizará sin la necesidad de recargar manualmente.

npm run dev

04. Crear tienda VUEX

En SRC , crea un directorio llamado Tienda y dentro de ella un nuevo archivo llamado index.js . Esto será donde se definirá nuestra tienda VUEX. Aunque antes de que lleguemos a eso, primero debemos asegurarnos de que nuestra aplicación VUE.JS esté al tanto de su existencia. Para hacer esto, abierto main.js e importe la tienda e inclúyalo como una dependencia, como en el fragmento de abajo.

 Importar VUE de 'VUE'
Importar la aplicación de './app'
Enrutador de importación de './Router'
Importar tienda de './store'
Vue.config.productiontip = falso
/ * Eslint-deshabilitar nada nuevo * /
nuevo vue ({
  EL: '#App',
  enrutador,
  Tienda,
  Plantilla: '& lt; aplicación / & gt;',
  Componentes: {app}
})

05. Crea andamio de almacenamiento e instale Axios.

Para ayudarnos a simplificar las solicitudes de AJAX, nuestra tienda se realizará a la API de WordPress, instalaremos Axios, que es un cliente HTTP basado en la promesa. Para hacer esto, abra una ventana de consola separada, navegue a la Plantilla de sitio web directorio y ejecutar NPM Instale Axios - Guardar .

A continuación, comencemos a andamionar la tienda al instanciar un nuevo objeto vacío de la tienda VUEX. En este momento, no está haciendo nada, pero al menos Vue debería ser consciente de ello.

 Importar axios de 'Axios'
Importar VUE de 'VUE'
Importar VUEX de 'VUEX'
VUE.USE (VUEX)
Const Store = New VUEX.STORE ({
  Expresar: {},
  Acciones: {},
  mutaciones: {}
})
Exportar tienda predeterminada

06. Crear mensajes de estado

En VUEX, el objeto estatal posee información de la aplicación, que en este caso será los datos de publicación de WordPress que agarraremos utilizando la API. Dentro de este objeto, cree una nueva propiedad llamada Publics y asigne un valor de NULL.

 Estado: {
  Publicaciones: NULL
}

07. Crear acción de GetPosts

En VUEX, las acciones son la principal forma en que se manejan las solicitudes asíncronas. Estos son típicamente métodos definidos en la tienda, que luego se pueden enviar según lo requerido por la aplicación.

En el vacío comportamiento Objeto, definemos uno donde, si nuestro estado de publicaciones sigue siendo nulo, Axios se usa para realizar una solicitud AJAX a la API de WordPress y devolver una lista de publicaciones. Una vez que hayamos recibido una respuesta positiva, resolveremos la promesa y comprometeremos las publicaciones utilizando el costillas mutación.

 GetPosts: Función (contexto) {
  devuelva la nueva promesa ((resolución, rechazo) = & gt; {
  if (contexto.state.posts) {
  resolver()
  }
  demás {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Publicaciones ')
  .Ten ((respuesta) = & gt; {
  context.commit ('StorePosts',
  respuesta.data)
  resolver()
  }). Captura ((error) = & gt; {
  rechazar (error);
  });
  }
  })
}

08. Crear mutación en StorePosts

Otro concepto introducido por VUEX es mutaciones, que también son normalmente métodos definidos en la tienda. Las mutaciones son la única forma de cambiar el estado en una tienda VUEX, lo que permite que el estado se rastree fácilmente al depurar.

En el vacío mutaciones objeto, vamos a definir el costillas Método que hacemos referencia en el paso anterior y hagamos anular la propiedad POST en el objeto Estado con cualquier DATOS La mutación recibe como carga útil.

 StorePosts (estado, respuesta) {
   State.posts = Respuesta}

09. Disparador Getposts Acción en carga

Hemos creado los métodos de acción y mutación que agaran las publicaciones de la API de WordPress y los comprometen al estado VUEX, pero ahora debemos activar este proceso en algún lugar. En el componente VUE.JS de nivel superior App.vue , agregue el fragmento de abajo.

creado() es un gancho de ciclo de vida que desencadena el código tan pronto como se crea el componente VUE en la carga, mientras que el uso del global $ tienda La variable nos permite acceder a los contenidos de nuestra tienda VUEX y enviar el Getsposts Acción del paso 7.

 creado () {
   esto. $ store.dispatch ('getposts')}

10. Actualizar rutas de atributo

The Vue DevTools extension gives you the power to debug your Vue.js app

Si está trabajando en Chrome o Firefox y tenga el VUE.JS DEVTOOLS Extensión (Si no, le recomiendo que lo haga, ya que es muy útil), ahora debería poder ver las publicaciones de WordPress cargadas en Estado base bajo la VUEX pestaña.

Volver a la aplicación, en /components/posts/posts.vue , la plantilla HTML debe apuntar a estos datos, así que modifiquemos algunas de las rutas de atributo.

 Switch 'post.title' a 'post.title.rendered'
 Cambiar 'post.preview' a 'post.acf.preview'
 Cambiar 'post.previewimage' a 'post.acf.header_image_small'

11. Actualizar v-for bucle

En el componente de los mensajes, hay una directiva VUE.JS en uso llamado v-para . Este buceo a través de todas las publicaciones y para cada una imprime una instancia del componente POST, mostrándolas en una lista.

Necesitamos actualizar la ruta pasada a la presente Directiva, ya que aún está utilizando los datos locales de prueba ficticia. Actualice la directiva V-para el fragmento a continuación para poder señalar nuestras publicaciones almacenadas en la tienda VUEX.

 V-for = "Publicar en esto. $ Store.state.posts"

12. Haz algo de limpieza.

Ahora se debe mostrar una lista de las publicaciones de WordPress. Como ya no estamos usando los datos de publicación locales, eliminemos SRC / DATOS . Luego, en el componente de los postes, retire el Publicaciones: postdata.data Propiedad en el almacén de datos locales de componentes y luego la importación posdata.

13. corregir el autor post

Puede notar que para cada publicación, el autor está apareciendo como un número. Esto se debe a que la API de WordPress devuelve una identificación de autor, en lugar de un nombre. Tenemos que usar esta ID para consultar WordPress para la información completa del autor. Comencemos creando un lugar para almacenar esto en nuestra tienda VUEX, junto con nuestra información de publicación, en tienda / index.js .

Expresar: {
  Autores: NULL,
  Publicaciones: NULL}

14. Crear acción de GetAutors.

Como con las publicaciones, crearemos una acción en /store/index.js Para activar una solicitud AJAX para consultar la API WordPress. Una vez que se recibe una respuesta exitosa, la promesa resolverá y desencadenará el storeauts Mutación, que crearemos a continuación.

 GETAUTORES: FUNCIÓN (CONTEXTO) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Usuarios ')
  .Ten (función (respuesta) {
  context.commit ('StoreAuts',
  respuesta.data)
  })
}

15. Crea StoreAAuts Mutation

Dentro del objeto de mutaciones de la tienda VUEX, cree el storeauts Mutación utilizando el fragmento de abajo. Como con costillas Desde el Paso 8, esto toma la carga útil aprobada y la establece como el valor de la propiedad de los autores en el estado de nuestra tienda.

 StoreAaTors (estado, respuesta) {
  State.Autores = Respuesta}

16. gatillo getAuthors en carga

Necesitamos obtener la información del autor de WordPress tan pronto como la aplicación comience a cargarse. Modifiquemos el componente de nivel superior App.vue de nuevo y despacho el getAuthors acción en el mismo creado() gancho de ciclo de vida como el Getsposts acción.

 creado () {
  esto. $ store.dispatch ('getAuthors')
   esto. $ store.dispatch ('getposts')}

17. Crea el método GetUserName

Ahora estamos consultando WordPress para obtener información sobre el autor sobre la carga, todo lo que debemos hacer es definir un método en nuestro componente de publicaciones que nos permite pasar una identificación de autor y obtener un nombre a cambio. Copie el fragmento de abajo en el objeto de los métodos de los Publicaciones del componente, debajo del existente Guestinglepost método.

 GetUsername: Función (UserID) {
  Var username = 'desconocido';
  esto. $ store.state.
  Autores.Filter (función (usuario) {
  if (user.id === userid) {
  Nombre de usuario = usuario.Nombre
  }
  });
  volver el nombre de usuario;
}

18. Llame al método GetUserName

Ahora solo necesitamos llamar GetUserName . Aún en el componente de los mensajes, en la plantilla, reemplace la referencia del atributo del autor a post.author Así que refleja el fragmento de abajo. El nombre del autor ahora debería mostrarse correctamente para cada publicación.

: Autor = "GetUsername (Post.Author)"

19. Blog Cargando

A medida que estamos cargando los datos posteriores de forma asíncrona, hay un momento antes de que la solicitud se complete donde la aplicación está vacía. Para contrarrestar esto, implementaremos un estado de carga que está activo hasta que el blog esté completamente poblado. En el componente de los postes, pegue el fragmento de abajo justo después de la apertura & lt; script & gt; Etiqueta para importar los iconos que estaremos usando.

 Icono de importación de '@ / componentes / iconos / iconos'
Importar carga desde './../../
Activos / IMG / Loading.SVG '

20. Añadir icono a la lista de componentes

A continuación, aún dentro de las publicaciones, agregue una referencia al icono en los objetos de los componentes. Esto hace que los Publicados componentes tengan conocimiento de nuestro componente de icono recientemente importado.

 Componentes: {
   icono,
   post}

21. Crea elementos de carga.

Ahora solo necesitamos agregar los elementos de carga a la plantilla de las publicaciones para que aparezca en la página. En primer lugar, envuelva el segundo div en el fragmento alrededor de los dos divs con el v-si Directivas para asegurarse de que no se muestren publicaciones hasta que se complete la carga.

Luego agregue el primer DIV del fragmento por encima de él. Esto contiene el icono de carga y un v-si Directiva, lo que significa que solo será visible hasta el punto en que la aplicación esté completamente cargada. Una vez hecho, la carga debe ser implementada ahora.

 & lt; div v-if = "! Esto. $ Store.state.posts"
clase = "u-align-center" & gt;
   & lt; icon class = "C-icon-cargando"
   use = "cargando" & gt; & lt; / icon & gt;
& lt; / DIV & GT;
& lt; div v-if = "esto. $ store.state.posts" & gt;
   [...]
& lt; / DIV & GT;

22. Update Single Post Atribute Rutas

Lo único que queda hacer es asegurarse de que las publicaciones individuales se configuren correctamente para que estén utilizando los datos de POST de WordPress en la tienda VUEX. El primer paso es actualizar las rutas de atributo en la plantilla de componentes de las publicaciones dentro del v-if = "este.type === 'solo'" DIV, que maneja la visualización de postes individuales.

 Cambia 'singlepost.title' a 'singlepost.title.rendered'
 Cambiar 'singlepost.author' a 'getUsername (singlepost.author)'
 Cambie 'singlepost.fulllimage' a 'singlepost.acf.header_image'
 Cambie 'singlepost.content' a 'singlepost. contenido.rendered '

23. Método de Refactor GetsingPost

También necesitamos refactar los componentes de los mensajes. Guestinglepost método. Necesita devolver una promesa que despacha el Getsposts acción. En el seguimiento entonces Función, buscaremos las publicaciones de la tienda VUEx para una entrada con una babosa que coincide con la que pasó la URL. Si se encuentra, copiaremos los datos en estado local de nuestro componente y resolveremos la promesa. Si no se encuentra, la promesa será rechazada.

 GetslePost: Función () {
   devolver la nueva promesa
   ((Resolver, Rechazar) = & gt; {
  esto. $ store.dispatch ('getposts')
  .Ten (() = & gt; {
  var fundabost = falso;
  esto. $ store.state.posts.
  Filtro ((POST) = & gt; {
  if (post.lug ===
  esto. $ Route.Params.Slug) {
  esta.singlepost = post;
  FUNDEPOST = VERDADERO; }
  });
  FUNDADOR? resolución (): rechazar ();
  })
  })
}

24. Publicaciones de refactor creadas () gancho

A continuación, necesitamos refactorizar el creado() Ciclo de vida gancho en el componente de los postes. Si estamos necesitando mostrar una sola publicación, el gancho debe llamar al Guestinglepost El método del paso anterior, y si se rechaza su promesa, envíe al usuario a la página de 404 página que no se encuentra '. Esto es para tener en cuenta los escenarios donde los usuarios ingresan a una bobina posterior inexistente en la URL.

 creado () {
  if (esta.type === 'solo') {
  este.getsingpost (). Entonces (null, () = & gt; {
  esto. $ enrutador.push ({nombre: 'pagenotfound'})
  });
  }
}

25. Añadir v-if directiva

El paso final es agregar el fragmento a continuación al componente POST dentro de la v-if = "este.type === 'solo'" div en la plantilla. Esta directiva significa que la publicación solo se mostrará cuando los datos de POST locales disponibles por el Guestinglepost El método está poblado. Esto es para detener a VUE de representar prematuramente el componente y, por lo tanto, causar errores.

 V-if = "singlepost"

26. Construir la aplicación

Ahora con todo lo que trabaja, en la consola, cancela el NPM RUN DEV Comanda o abra una nueva consola y ejecute el comando a continuación para generar una versión de producción lista para cargar en su propio servidor. Esto aparecerá en el distante directorio.

 NPM Ejecutar la construcción

Este artículo apareció en el número 268 del diseñador web, la revista Creative Web Design - que ofrece tutoriales expertos, tendencias de vanguardia y recursos gratuitos. Suscríbete al diseñador web ahora.

Leer más:

32 mejores temas de WordPress gratis
10 mejores recursos de WordPress
los Las mejores plataformas de blogs gratuitas.