Abrufen von Beiträgen mit der WP-API

Es ist vielleicht neu für Sie, aber es gibt eine nette Ressource namens Quotes on Design, die interessante Zitate *über Design* bereitstellt, kuratiert von unserem eigenen Chris Coyier.

Bis zu diesem Zeitpunkt verwendete Quotes on Design (QoD) ein wenig benutzerdefinierten Code, um die WordPress-Datenbank abzufragen und Zitate bereitzustellen. Dies wurde für die Website selbst und für ihre API verwendet, um die Nutzung auf externen Websites zu ermöglichen. Angesichts der Begeisterung rund um die bevorstehende WordPress JSON REST API dachten wir, es wäre lustig, die Website neu zu erstellen, um die WP-API anstelle unseres eigenen benutzerdefinierten Codes zu verwenden.

Hier ist, was wir behandeln werden

1. Einrichten der API
2. Abfragen der API, um ein zufälliges Zitat abzurufen
3. Etwas Interessantes mit diesem Zitat machen
4. Anpassen der API, um nicht verwendete Informationen zu entfernen
5. Verwenden der neuen QoD JSON REST API, um nette Zitate für Ihre Website abzurufen

Warnung! Die WP JSON REST API befindet sich noch in der Entwicklung, und die Abfrageschnittstelle kann sich bis zur endgültigen Version ändern. Wir werden unser Bestes tun, um dieses Tutorial zu aktualisieren, wenn sich etwas ändert. Wir würden nicht empfehlen, die WP-API noch für extrem wichtige Websites zu verwenden, es sei denn, Sie sind ein ultra-professioneller WordPress-Entwickler, in diesem Fall können Sie diesen Artikel wahrscheinlich überspringen, richtig?

Installieren der WP-API

Die WP-API wird als Plugin, im WordPress.org Plugin-Repository verfügbar, ausgeliefert. Das bedeutet, Sie können

• Öffnen Sie Ihr WordPress-Dashboard
• Gehen Sie zu Plugins → Neu hinzufügen
• Suchen Sie nach "WP API"
• Installieren, aktivieren, und Sie sind fertig

Lassen Sie uns eintauchen!

Abrufen eines zufälligen Beitrags

Für QoD wollten wir der Homepage eine einfache Funktionalität hinzufügen: Klicke auf einen Button und ein zufälliges Zitat wird von der API neu geladen.

Die WP-API enthält mehrere Endpunkte, die Sie zum Lesen von Informationen aus der Datenbank verwenden können, darunter Metadaten, Anhänge, Benutzer – im Grunde ist alles, was in der Standard-WP-Datenbank gespeichert ist, bis zu einem gewissen Grad zugänglich.

Für unseren Anwendungsfall mussten wir nur einen zufälligen Beitrag abrufen. Wir begannen mit dem Endpunkt /wp-json/posts, der im Wesentlichen einem WP_Query entspricht, wenn Sie mit der WordPress-Entwicklung vertraut sind. Hier ist die Basis-Endpunkt-URL

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

Das Besuchen dieser URL ohne Abfrageparameter gibt die Standardliste der Beiträge im JSON-Format zurück – im Wesentlichen dieselbe Liste von Beiträgen, die Sie auf der Blog-Seite sehen würden

[
  {
    "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"
  }
]

Beachten Sie, dass die IDs der Zitate sequenziell sind: Sie stellen die drei neuesten Zitate auf der Website dar.

Für unser Design benötigen wir nur einen Beitrag und möchten, dass er zufällig ausgewählt wird. Wir müssen die Ergebnisse *filtern*, und das können wir mit denselben Argumenten tun, die wir bei Aufrufen von WP_Query oder get_posts verwenden würden.

In diesem Fall benötigen wir zwei Argumente

• Das Argument orderby muss rand sein, um einen zufälligen Beitrag abzurufen
• Das Argument posts_per_page muss 1 sein, um die Ergebnisse auf einen einzigen Beitrag zu beschränken

Sehen Sie eine Liste aller verfügbaren Parameter im WP_Query-Codex-Eintrag.

Wir übergeben diese Argumente über die URL, indem wir die Abfragevariable filter als Array verwenden, wie folgt

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

Hier ist, was wir von der WP-API mit unserer gefilterten URL erhalten

[
  {
    "ID": 2153,
    "author": {
        "ID": 2,
        "URL": "https://css-tricks.de",
        "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"
  }
]

Jedes Mal, wenn wir unsere gefilterte URL aktualisieren, erhalten wir ein anderes Zitat. Großartig!

Sie werden bemerken, dass ich in der letzten Codezeile mehr von der WP-API JSON-Antwort eingefügt habe. Dort gibt es *sehr* viele Informationen – selbst wenn ich die Metadaten, den Autor und die Begriffe ausblende.

Für unsere Zwecke benötigen wir die meisten dieser Informationen nicht. Außerdem ist es bandbreiteneffizienter, nicht alles einzubeziehen – also schneiden wir es aus!

Felder aus der JSON-Antwort entfernen

Ein Leser schrieb, um zu sagen, dass Sie dies alles nicht mehr tun müssen, da es ein _filter-Argument in der API gibt.

Wir müssen die von der API zurückgegebenen Daten filtern, und glücklicherweise bietet uns die WP-API genau den Filter, den wir benötigen, namens json_prepare_post. Um ihn zu verwenden, erstellen wir ein neues Plugin mit dem folgenden Code-Snippet

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 );

Durch die Aktivierung unseres Plugins erhalten wir eine viel kleinere JSON-Antwort, die nur die Informationen enthält, die wir für unseren Anwendungsfall benötigen

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

Felder zur JSON-Antwort hinzufügen

Nachdem wir nun unnötige Informationen aus den JSON-Daten entfernt haben, ist es nur passend, dass wir unsere eigenen benutzerdefinierten Felder hinzufügen, um im Gleichgewicht zu bleiben. Wachs rein, wachs raus.

Einige der Zitate haben ein benutzerdefiniertes Meta-Feld namens "Source", das Chris verwendet, um auf die ursprüngliche Quelle des Zitats zu verlinken, falls es online verfügbar ist. Fügen wir diese Metadaten der JSON-Antwort hinzu, indem wir denselben json_prepare_post-Filter verwenden, den wir zuvor zum *Entfernen* von Daten verwendet haben. Im selben Plugin fügen wir die folgende Funktion hinzu

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 );

Mit diesem zusätzlichen Feld hier ist eine JSON-Antwort

[
  {
    "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"
  }
]

Nachdem wir nun *genau* die benötigten Informationen haben, verwenden wir die JSON-API, um ein zufälliges Zitat über AJAX auf der Homepage zu laden.

Daten von der JSON-API abrufen und verwenden

Auf der Homepage von QoD gibt es einen Button, um ein weiteres Zitat abzurufen

Mit jQuery-Event-Handlern und der Funktion jQuery.ajax holen wir ein Zitat und aktualisieren das HTML mit dem folgenden Snippet

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
    } );
  } );
} );

Jetzt wird bei jedem Drücken des Buttons ein neues zufälliges Zitat automatisch geladen. Probieren Sie es aus.

Verwendung der API auf Ihrer Website

Sie können Quotes on Design über die API abfragen, um nette Zitate für Ihre eigene Website anzuzeigen. Wir haben die API-Seite aktualisiert, um die neue WP JSON API zu verwenden. Wie bereits erwähnt, unterliegt die WP-API Änderungen, verlassen Sie sich also noch nicht auf diese API für überaus wichtige Websites.

Mehr API-Güte kommt

Die Entwicklung der WP-API ist im Gange, und es ist viel Aufregung zu sehen, was die Leute damit bauen können. Unser Beispiel ist ziemlich einfach, aber der Gedanke an eine JSON-API hat unsere Ideen schon auf die Möglichkeiten gebracht.

Schauen Sie sich Quotes on Design an und teilen Sie Ihre Gedanken und Fragen in den Kommentaren. Und wenn Sie ein tolles Zitat haben, das Sie auf der Website sehen möchten, reichen Sie es ein!