Uso de WP-API para obtener publicaciones | Programar Plus

0

Puede que sea una novedad para usted, pero hay un recurso ingenioso llamado Citas sobre diseño que ofrece citas interesantes sobre diseño, seleccionadas por nuestro propio Chris Coyier.

Hasta este punto, Quotes on Design (QoD) usaba un poco de código personalizado para consultar la base de datos de WordPress y ofrecer cotizaciones. Esto se usó para el sitio en sí y para que su API permitiera el uso en sitios externos. Con la emoción que rodea a la próxima API REST JSON de WordPress, pensamos que sería divertido reconstruir el sitio para usar la API WP en lugar de nuestro propio código personalizado.

Esto es lo que cubriremos:

  1. Configuración de la API
  2. Consultar la API para obtener una cotización aleatoria
  3. Haciendo algo interesante con esa cita
  4. Personalización de la API para eliminar información no utilizada
  5. Uso de la nueva API QoD JSON REST para obtener cotizaciones ingeniosas para su sitio

¡Advertencia! La API REST de WP JSON aún está en desarrollo y la interfaz de consulta podría cambiar antes de la versión final. Haremos todo lo posible para actualizar este tutorial si algo cambia. Todavía no recomendaríamos usar la API de WP en ningún sitio súper importante, a menos que sea un desarrollador de WordPress ultraprofesional, en cuyo caso probablemente pueda omitir este artículo, ¿verdad?

Instalación de la API de WP

La API de WP está empaquetada como un complemento, disponible en el repositorio de complementos de WordPress.org. Eso significa que puedes

  • Abre tu panel de WordPress
  • Vaya a Complementos → Agregar nuevo
  • Busque “API de WP”
  • Instala, activa y listo

¡Empecemos a cavar!

Tomando una publicación al azar

Para QoD, queríamos agregar algunas funciones simples a la página de inicio: haga clic en un botón y vuelva a cargar una cotización aleatoria desde la API.

La API de WP incluye varios puntos finales que puede usar para leer información de la base de datos, incluidos metadatos, archivos adjuntos, usuarios; en realidad, todo lo que está almacenado en la base de datos estándar de WP es accesible hasta cierto punto.

Para nuestro caso de uso, solo necesitábamos obtener una publicación aleatoria. Empezamos con el /wp-json/posts punto final, que es esencialmente como ejecutar un WP_Query, si está familiarizado con el desarrollo de WordPress. Esta es la URL del punto final base:

http://quotesondesign.com/wp-json/posts

Visitar esa URL sin ningún parámetro de consulta devuelve la lista predeterminada de publicaciones en formato JSON, esencialmente, la misma lista de publicaciones que verías en la página del blog:

[
  {
    "ID": 2328,
    "content": "<p>Everything we do communicates.</p>n",
    /* ...snip most of the fields... */
    "title": "Pete Episcopo",
    "type": "post"
  },
  {
    "ID": 2326,
    "content": "<p>The only &#8220;intuitive&#8221; interface is the nipple. After that it&#8217;s all learned.</p>n",
    /* ...snip most of the fields... */
    "title": "Bruce Ediger",
    "type": "post"
  },
  {
    "ID": 2323,
    "content": "<p>Only show work you like, or you&#8217;ll end up being hired to do things you don&#8217;t like.</p>n",
    /* ...snip most of the fields... */
    "title": "Victoria Pater",
    "type": "post"
  }
]

Tenga en cuenta que los ID de las cotizaciones son secuenciales: representan las tres cotizaciones más recientes en el sitio.

Para nuestro diseño, solo necesitamos una publicación y queremos que se seleccione al azar. Necesitamos filtrar los resultados, y podemos hacerlo usando los mismos argumentos que usaríamos al llamar WP_Query o get_posts.

En este caso, necesitamos dos argumentos:

  • El orderby el argumento debe ser rand, para obtener una publicación aleatoria
  • El posts_per_page el argumento debe ser 1, para limitar los resultados a una sola publicación

Vea una lista de todos los parámetros disponibles en la entrada del códice WP_Query.

Pasamos esos argumentos a través de la URL, usando el filter variable de consulta como una matriz, así:

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

Esto es lo que obtenemos de la API de WP usando nuestra URL filtrada:

[
  {
    "ID": 2153,
    "author": {
        "ID": 2,
        "URL": "https://css-tricks.com",
        "avatar": "http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96",
        "description": "",
        "first_name": "Chris",
        "last_name": "Coyier",
        /* ...snip some fields... */
    },
    "comment_status": "closed",
    "content": "<p>Wonderfully designed > beautifully designed. Any day.</p>n",
    "date": "2013-06-27T08:34:04",
    "date_gmt": "2013-06-27T16:34:04",
    "date_tz": "Etc/GMT-8",
    "excerpt": "<p>Wonderfully designed > beautifully designed. Any day.</p>n",
    "featured_image": null,
    "format": "standard",
    "guid": "http://quotesondesign.com/?p=2153",
    "link": "http://quotesondesign.com/daniel-burka-2/",
    "menu_order": 0,
    "meta": {
        /* ...snip some fields... */
    },
    "modified": "2013-06-27T08:34:04",
    "modified_gmt": "2013-06-27T16:34:04",
    "modified_tz": "Etc/GMT-8",
    "parent": null,
    "ping_status": "closed",
    "slug": "daniel-burka-2",
    "status": "publish",
    "sticky": false,
    "terms": {
      /* ...snip some fields... */
    },
    "title": "Daniel Burka",
    "type": "post"
  }
]

Cada vez que actualicemos nuestra URL filtrada, obtendremos una cotización diferente. ¡Dulce!

Notarás que he incluido más de la respuesta JSON de la API de WP en el último fragmento. Hay una lote de información allí, incluso cuando oculto el meta, el autor y los términos.

Para nuestros propósitos, no necesitamos la mayor parte de esa información. Además, es más eficiente en ancho de banda al no incluirlo todo, ¡así que eliminémoslo!

Eliminando campos de la respuesta JSON

Un lector lo escribió para decir que ya no tiene que hacer todo esto, ya que hay un _filter argumento en la API ahora.

Necesitamos filtrar los datos que devuelve la API y, afortunadamente, la API de WP nos proporciona exactamente el filtro que necesitamos, llamado json_prepare_post. Para usarlo, creamos un nuevo complemento con el siguiente fragmento de código:

function qod_remove_extra_data( $data, $post, $context ) {
  // We only want to modify the 'view' context, for reading posts
  if ( $context !== 'view' || is_wp_error( $data ) ) {
    return $data;
  }
  
  // Here, we unset any data we don't want to see on the front end:
  unset( $data['author'] );
  unset( $data['status'] );
  // continue unsetting whatever other fields you want

  return $data;
}

add_filter( 'json_prepare_post', 'qod_remove_extra_data', 12, 3 );

La activación de nuestro complemento nos deja con una respuesta JSON mucho más pequeña, que solo contiene la información que necesitamos para nuestro caso de uso:

[
  {
    "ID": 686,
    "content": "<p>My secret is being not terrible at a lot of things.  </p>n",
    "link": "http://quotesondesign.com/moby/",
    "title": "Moby"
  }
]

Agregar campos a la respuesta JSON

Ahora que hemos terminado de eliminar información innecesaria de los datos JSON, es lógico que agreguemos algunos de nuestros propios campos personalizados para mantener el equilibrio. Encerar, encerar.

Algunas de las citas tienen un metacampo personalizado llamado “Fuente”, que Chris usa para vincular a la fuente original de la cita, si está disponible en línea. Agreguemos esos metadatos a la respuesta JSON usando el mismo json_prepare_post filtro que usamos para eliminar datos anteriormente. En el mismo complemento, agregamos la siguiente función:

function qod_add_custom_meta_to_posts( $data, $post, $context ) {
  // We only want to modify the 'view' context, for reading posts
  if ( $context !== 'view' || is_wp_error( $data ) ) {
    return $data;
  }

  $source = get_post_meta( $post['ID'], 'Source', true );

  if ( ! empty( $source ) ) {
    $data['custom_meta'] = array( 'Source' => $source );
  }

  return $data;
}

add_filter( 'json_prepare_post', 'qod_add_custom_meta_to_posts', 10, 3 );

Con ese campo adicional adjunto, así es como se ve una respuesta JSON:

[
  {
    "ID": 2039,
    "content": "<p>Communication that doesn&#8217;t take a chance doesn&#8217;t stand a chance.</p>n",
    "custom_meta": {
        "Source": "<a href="http://altpick.com/spot/segura/segura.php">article</a>"
    },
   "link": "http://quotesondesign.com/carlos-segura/",
    "title": "Carlos Segura"
  }
]

Ahora que tenemos exactamente la información que necesitamos, usemos la API JSON para cargar una cotización aleatoria a través de AJAX en la página de inicio.

Obtención y uso de datos de la API de JSON

En la página de inicio de QoD, tenemos un botón para obtener otra cita:

Obtener otro botón de cotización

Usando controladores de eventos jQuery y la función jQuery.ajax, tomamos una cotización y actualizamos el HTML con el siguiente fragmento:

jQuery( function( $ ) {
  $( '#get-another-quote-button' ).on( 'click', function ( e ) {
    e.preventDefault();
    $.ajax( {
      url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function ( data ) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.
        $( '#quote-title' ).text( post.title );
        $( '#quote-content' ).html( post.content );

        // If the Source is available, use it. Otherwise hide it.
        if ( typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined' ) {
          $( '#quote-source' ).html( 'Source:' + post.custom_meta.Source );
        } else {
          $( '#quote-source' ).text( '' );
        }
      },
      cache: false
    } );
  } );
} );

Ahora, cuando se presiona el botón, se carga automáticamente una nueva cotización aleatoria. Pruébalo.

Usando la API en su sitio

Puede consultar Cotizaciones en diseño utilizando la API para mostrar cotizaciones ingeniosas para su propio sitio. Hemos actualizado la página de la API para usar la nueva API WP JSON. Como se mencionó anteriormente, la API de WP está sujeta a cambios, así que no confíes todavía en esta API para sitios súper importantes.

Vienen más bondades de API

El desarrollo de la API de WP está en curso, y hay mucho entusiasmo por ver lo que la gente puede construir con ella. Nuestro ejemplo es bastante básico, pero la idea de una API JSON ya nos ha hecho cambiar de opinión sobre las posibilidades.

Echa un vistazo a Quotes on Design y comparte tus pensamientos y preguntas en los comentarios. Y si tiene una gran cita que le gustaría ver en el sitio, ¡envíela!