it-swarm.com.de

API-JSON-Daten in WordPress

Auf der SeiteGoogle-Entwickler-APIwird kurz darauf eingegangen, wie mit JSON/JavaScript eine dynamische Liste von Schriftarten abgerufen wird.

Ich habe mich gefragt, wie ich die Webschriftarten-API in mein Wordpress-Design ziehen kann, damit ich keine eigene Liste erstelle oder ständig eine Aktualisierung der Schriftarten veröffentlichen muss.

Vielen Dank.

2
user1752759

Hier ist ein kurzer erster Codeentwurf zum Auffüllen eines Dropdowns aus der Google Font-API. Ich kenne das Options-Framework nicht, daher wird dies hier nicht behandelt.

1. Holen Sie sich einen API-Zugriffsschlüssel von Google

Für Ihre Anfrage ist ein gültiger Schlüssel erforderlich. Folgen Sie den Anweisungen hier, um einen zu erhalten: https://developers.google.com/webfonts/docs/developer_api

Es ist kostenlos für eine bestimmte Anfrage pro Tag und du bekommst auch ein paar coole Nutzungsstatistiken dazu.

2. Verwenden wir die HTTP-API von WordPress , um die JSON-Antwort zu erhalten

//enter your api key and the Google Font url 
$google_api_url = 
'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyD6j7CsUT89645jlhkdBjnN-5nuuFGU';


//lets fetch it
$response = wp_remote_retrieve_body( wp_remote_get($google_api_url, array('sslverify' => false )));

Beachten Sie 'sslverify' => false. Dies liegt daran, dass Google SSL zur Autorisierung des API-Schlüssels benötigt. Sie können diesen entfernen und er funktioniert möglicherweise. Wenn Sie jedoch einen SSL-Überprüfungsfehler erhalten (insbesondere bei localhost), können Sie versuchen, ihn auf false zu setzen.

3. Antwort durchlaufen

Jetzt haben wir etwas zu tun, also lassen Sie uns nach Fehlern suchen und die von Google zurückgegebenen Daten durchlaufen.

if( is_wp_error( $response ) ) {
   echo 'Something went wrong!';
} else {

// Let's turn the JSON response into something easier to work with
// I guess this part is what really answers the above in terms of WP 
// working with json responses, if anyone knows any better way, do tell

$json_fonts = json_decode($response,  true);
// that's it

$items = $json_fonts['items'];
$i = 0;
foreach ($items as $item) {
$i++;
$str = $item['family']; //I guess we want the font family

Das Obige gibt einfach die Schriftfamilie zurück, aber es werden viel mehr Daten über das Googsy zurückgegeben, zum Beispiel die Auswahl der Schriftgewichtung und auch eine Reihe von Schriftuntermengen, die ich übrig habe um dieses Beispiel einfach zu halten. Auch Sie sollten wahrscheinlich Javascript anstelle von PHP verwenden, aber lassen Sie uns nicht damit umgehen (Sie können wp-includes/js/json2.js einreihen).

4. Ausgabe

Jetzt haben wir eine Liste mit Schriftarten, die in einer Schleife über $str ausgegeben werden. Sie können sie zu einem Eingabefeld mit so etwas wie <option value="<?php echo $str; ?>"><?php echo $str; ?></option>; hinzufügen. Ja, es ist irgendwie ein Ghetto, aber es sieht so aus:
enter image description here

Wahrscheinlich möchten Sie diese Informationen in eines der Optionsrahmenfelder oder so etwas einfügen.

5. Jetzt müssen wir tatsächlich die Schriftart bekommen, die wir auswählen

Da wir den Eingabewert auf den Namen der Schriftarten setzen, der mehr oder weniger von Googsy gewünscht wird, wird dieser Teil, in dem ich Teilmengen und Gewichte der Schriftarten beseitigt habe, einige Probleme verursachen wollen!

Nun nehmen wir vor, dass die Dropdown-Auswahl die Eingabe erfasst und an die CSS-Google-API-URL anfügt, die wie folgt aussieht: http://fonts.googleapis.com/css?family= ..your font name +stuff ....

Zum Beispiel: http://fonts.googleapis.com/css?family=Anonymous+Pro

Es gibt eine Menge Dinge, auf die ich hier nicht näher eingegangen bin, z. B. das Speichern der Werte mithilfe der Transients_API , da Google die Schriftsammlung häufig aktualisiert und wir sie nicht ständig nach denselben Informationen durchsuchen müssen.

Verwenden Sie auch eine eingebaute Funktion wie wp_list_pluck , um Ihre Schriften aus der Liste auszuwählen.

ps. Ich habe den Code für Teil 5 nicht fertiggestellt, weil ich hungrig bin. Hoffentlich sind Sie damit auf dem richtigen Weg.

7
Wyck