web-dev-qa-db-ja.com

WordPressのAPI JSONデータ

Google developer APIのページでは、JSON/JavaScriptを使って動的なフォントのリストを取得する方法について簡単に説明しています。

自分のリストを作成したり、常にフォントのアップデートをリリースしなければならないように、どのようにしてWebフォントAPIをWordpressテーマに取り込むことができるのでしょうか。

ありがとうございました。

phpjavascriptjsonhttp-api
2
user1752759

これはGoogle Font APIからドロップダウンを生成するためのいくつかの簡単な最初のドラフトコードです、これはそれを扱わないでしょうので私はオプションフレームワークについて知りません。

1 GoogleからAPIアクセスキーを取得する

あなたの要求は有効なキーを必要とするでしょう、あなたはそれを得る方法に関するここの指示に従うことができます： https://developers.google.com/webfonts/docs/developer_api

1日あたりの特定のリクエスト数は無料です。また、クールな使用状況の統計も表示されます。

2 JSONレスポンスを取得するためにWordPressの HTTP API を使用しましょう

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

'sslverify' => falseに注意してください。これはGoogleがAPIキーを認証するためにSSLを必要とするため、これを削除しても機能する可能性があるためです。

3応答をループ処理する

これで何か問題が解決したので、エラーをチェックし、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

上記は単にフォントファミリーを返します、しかしGoogsyを介して返されるデータはもっとたくさんあります。この例は簡単です。また、おそらくPHPではなくjavascriptを使用する必要がありますが、それについては扱いません（wp-includes/js/json2.jsをエンキューできます）。

4出力

リストフォントが$strを介してループで出力されるようになりました。<option value="<?php echo $str; ?>"><?php echo $str; ?></option>;のようなものを使ってそれらを入力ボックスに追加することができます。
enter image description here

おそらくその情報をオプションフレームワークのフィールドか何かの中に入れたいでしょう。

5今、私たちは実際に選択したフォントを取得する必要があります

私たちはすべてのGoogsyが望むフォント名に入力値を設定しているので、おおまかに言って、フォントのサブセットと重みを削除した部分より上の部分は問題を引き起こすので、あなたはあなたのデータを含めるためにそのループを拡張する必要があります。欲しいです！

そのため、ドロップダウン選択で入力を取得し、それをCSSのGoogle API URLに追加します。これはhttp://fonts.googleapis.com/css?family= ..your font name +stuff ....のようになります。

例： http://fonts.googleapis.com/css?family=Anonymous+Pro

Transients_API を使用して値を保存するなど、ここでは説明しなかったことがたくさんあります。Googleがフォントコレクションを頻繁に更新するためです。同じ情報を追加する必要はありません。

また、 wp_list_pluck などの組み込み関数を使用して、リストからフォントを選択します。

ps。パート5のコードはおなかがすいたので、コードを完成させませんでした。

7
Wyck