web-dev-qa-db-fra.com

Données JSON de l'API dans WordPress

Sur la pageAPI de développeur Google, il explique brièvement comment récupérer une liste dynamique de polices à l'aide de JSON/JavaScript.

Je me demandais comment je pourrais insérer l'API des polices Web dans mon thème Wordpress afin de ne pas créer ma propre liste ou de devoir publier en permanence une mise à jour des polices.

Je vous remercie.

phpjavascriptjsonhttp-api
2
user1752759

Voici un premier brouillon rapide de code permettant de renseigner une liste déroulante à partir de l'API de police de Google. Je ne connais pas le cadre des options afin que cela ne traite pas de cela.

1. Obtenir une clé d'accès à l'API de Google

Votre demande nécessitera une clé valide. Vous pouvez suivre ici les instructions pour en obtenir une: https://developers.google.com/webfonts/docs/developer_api

C'est gratuit pour un certain nombre de demandes par jour et vous obtenez également des statistiques d'utilisation intéressantes.

2. Utilisons l'API HTTP de WordPress pour obtenir la réponse JSON 

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

Notez que 'sslverify' => false est dû au fait que Google requiert SSL pour autoriser la clé d'API. Vous pouvez le supprimer et cela peut fonctionner, mais si vous obtenez une erreur de vérification SSL (en particulier sur localhost), vous pouvez essayer de le définir sur false.

3. Boucle dans la réponse

Nous devons maintenant travailler avec quelque chose, alors vérifions les erreurs et parcourons en boucle les données renvoyées par Google.

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

Ce qui précède renvoie simplement la famille de polices, mais, il y a beaucoup plus de données renvoyées via le Googsy, par exemple le choix de la taille de la police et un ensemble de sous-ensembles de polices. cela pour garder cet exemple simple. Aussi, vous devriez probablement utiliser javascript au lieu de PHP, mais ne traitons pas cela (vous pouvez mettre en file d'attente wp-includes/js/json2.js).

4. Sortie

Maintenant, nous avons une liste de polices qui sortent dans une boucle via $str, vous pouvez les ajouter à une zone de saisie avec quelque chose comme <option value="<?php echo $str; ?>"><?php echo $str; ?></option>;, oui, c'est un peu un ghetto, mais cela ressemblera à:
enter image description here

Vous voudrez probablement mettre cette information dans l'un des champs des cadres d'option ou quelque chose.

5. Nous devons maintenant obtenir la police que nous avons sélectionnée

Étant donné que nous définissons la valeur d'entrée sur le nom de police correspondant plus ou moins à tout ce que Googsy souhaite, enfin, la partie ci-dessus où j'ai éliminé les sous-ensembles de polices et les poids entraînera des problèmes, vous aurez donc besoin d'étendre cette boucle pour inclure les données que vous souhaitez. vouloir!

Alors maintenant, nous faisons en sorte que la liste déroulante sélectionne l’entrée et l’ajoute à l’URL de l’API Google Google, qui ressemble à http://fonts.googleapis.com/css?family= ..your font name +stuff ....

Par exemple: http://fonts.googleapis.com/css?family=Anonymous+Pro

Il y a beaucoup de choses que je n'ai pas expliquées ici, telles que le stockage des valeurs à l'aide de Transients_API , car Google met souvent à jour la collection de polices et nous n'avons pas besoin de les battre pour obtenir les mêmes informations.

Également utiliser une fonction de construction telle que wp_list_pluck pour choisir vos polices dans la liste.

ps. Je n'ai pas terminé le code de la partie 5 parce que j'ai faim alors j'espère que cela vous mettra sur la bonne voie.

7
Wyck