WordPress（プラグインとプラグインなし）にサードパーティAPIを追加する方法

APIを使用すると、WordPressサイトをサードパーティのサービスとデータソースに接続できます。これにより、新しい機能と機能を追加したり、Webサイトをよりインタラクティブで有益なものにしたり、分析、電子メールマーケティングプロバイダー、CRMSなどのツールと統合できます。

WordPressは、プラグインとカスタムコードを使用して、単純なAPI統合と複雑なAPI統合の両方を処理できます。このチュートリアルでは、API統合の潜在的なパフォーマンスへの影響とそれらを緩和する方法について議論するだけでなく、両方を行う方法を教えます。

APIとは何ですか、そしてなぜWordPressにそれを追加するのですか？

APIは「アプリケーションプログラミングインターフェイス」の略です。コンピューティングでは、インターフェイスは2つ以上のコンポーネントを互いに接続するものです。この場合、コンポーネントは異なるシステムまたはアプリケーションです。

APIを使用すると、データを安全に、リアルタイムで、それぞれがそれを理解して処理できる方法でデータを交換できます。それらはウェブ上で非常に一般的です。 GoogleまたはFacebookアカウントを使用してWebサイトにログインしたことがある場合は、認証APIのおかげで発生しました。

WordPressでは、APIを使用して外部サービスからWordPressサイトに情報を引き出すか、データを送信できます。たとえば、次のように使用できます。

• あなたのサイトでライブ天気、為替レート、または株式市場の更新を表示します。

• ソーシャルメディアフィードを表示します。

• ソーシャルネットワークにコンテンツを自動的に投稿します。

• StripeやPayPalなどの支払いゲートウェイとサイトを統合します。

• オンラインストアでリアルタイムの配送料を表示します。

• 倉庫システムから製品情報を引き込みます。

• Webフォームから電子メールマーケティングサービスにサブスクライバーデータを送信します。

APIでは、サイトでプロセスを自動化することもできます。たとえば、Imagifyのようなサービスに画像の最適化を外部委託することができます。要するに、APIはウェブサイトをより機能的でユーザーフレンドリーにします。

重要なAPIコンポーネント

APIを使用するには、通常、いくつかの基本的な部分が必要です。

• エンドポイントURL ：リクエストを送信するURL。これは、APIにあなたが求めていることを示します（例えば、現在の天気、ブログ投稿のリストなど）。

• パラメーター：これらは、場所、ID、検索用語、日付範囲など、リクエストをカスタマイズするために渡すオプションの値です。パラメーターは、APIが返すものを改良するのに役立ちます。

• データ形式：これは、データが送信される形式です。最も一般的な形式はJSONです。これは、JavaScriptとPHPの両方で軽量で使いやすいためです。 XMLまたはプレーンテキストもオプションです。

• 認証：多くのAPIには、データへのアクセスが許可されていることを確認するために、APIキーまたはトークンが必要です。あなたはあなたの要求を正当化するためにそれを一緒に送る必要があります。

すべてのAPIがこれらの各ピースを必要とするわけではありません。以下でさらに実際の例について説明します。

WordPress REST API

WordPress自体には、いくつかの統合されたAPIがあります。最も顕著なのはREST APIです。 RESTは「表現状態転送」の略です。これは、APIが特定の形式とアーキテクチャを使用することを意味します。

REST APIの目的は、WordPressデータを他のシステムにアクセスできるようにすることです。これは、たとえば、サイトを管理するためのモバイルアプリを構築するために便利です。 REST APIは、いわゆるヘッドレスのWordPressセットアップも有効にします。ここでは、多くの場合、JavaScriptベースのユーザーインターフェイスをAPIを介してWordPressのバックエンドに接続します。

これは重要なトピックですが、ここでの焦点ではありません。代わりに、WordPressサイトに外部APIを追加する方法を扱います。

プラグインを使用してWordPressにAPIを追加する方法

APIをWordPressサイトに統合できる2つの主な方法があります。

• コード：スキルを持っている場合、または雇う人を雇う場合、通常はPHPまたはJavaScriptを使用して、サイトをAPIに接続できます。

• プラグイン： WordPressには、WebサイトへのAPIの追加と構成など、ほとんどすべてのプラグインソリューションがあります。

プラグインソリューションから始めて、両方を調べます。これらは、ユーザーインターフェイスを介してそれらを構成し、コードまたはWebサイトファイルを処理する代わりにショートコード、ウィジェット、またはブロックでデータを表示できるため、開発者にとって快適です。

GoogleマップAPIにアクセスします

最初の例では、WebサイトにGoogleマップマップを追加する方法を学びます。この機能は、Google Maps APIのおかげで可能です。これにより、マップを埋め込み、ストアの場所などのマーカーを追加し、マップ設計を変更できます。

最初に必要なのは、請求を有効にして無料のGoogleクラウドアカウントを作成することです。それを手に入れたら、ログインして上部に新しいプロジェクトを作成します。

プロジェクトにアクセスし、ナビゲーションメニューまたはダッシュボードのショートカットを介してAPIS＆サービスにアクセスします。

ライブラリをクリックしてから、マップJavaScript APIを見つけます。

アクセスして有効にします。プロセス中にAPIキーを受け取りますが、後でKeys＆Credentialsの下で見つけることもできます。セキュリティのためにその使用をドメインに制限するようにしてください。

次に、WordPressプラグインメニューからWP GOマッププラグインをインストールしてアクティブにします。準備ができたら、マップ> [設定]> [詳細設定]に移動し、GoogleマップAPIキーに貼り付け、設定を保存します。

その後、プラグインのインターフェイスを使用して新しいマップを作成できます。

満足したら保存してください。その後、マップブロックを使用しても、カスタムマップ用にプラグインが生成するショートコードを使用してサイトに表示できます。

おめでとうございます、WordPressサイトにAPIを追加しました。

ほぼすべてのAPIにwpgetapiを使用します

上記の例は、特定のAPIでのみ機能します。 APIをサイトに統合するためにより一般的なプラグインソリューションが必要な場合は、最も人気のあるものの1つはWPGETAPIです。

その仕組みは次のとおりです。この例では、openweathermap.orgから天気情報を表示します。そのための最初のステップは、そのサービスのアカウントを作成してプランにサインアップすることです（テストに使用できる1日あたり1000の無料コールがあります）。

サイトのAPIを使用するためのすべての情報は、ドキュメントで入手できます。

API呼び出しを設定します

WPGETAPIを開始、インストール、アクティブ化するには、ダッシュボードのwpgetapi>セットアップに移動します。

次のように、最初の画面の情報を入力してください。

• API名：したがって、各APIの目的がわかっています。

• 一意の識別子： APIのWordPress-Internal Nameを表示します。 「Open_Weather_Map」など、小文字とアンダースコアのみを使用します。

• ベースURL：エンドポイントのないAPIの一般的なアドレス。この例では、 https：//api.openweathermap.orgです。

準備ができたら、続行するために保存します。

エンドポイントとパラメーターを構成します

次に、上部のAPIのタブをクリックして、残りのAPI呼び出しを構成します。

これがそれを行う方法です：

• 一意のID：使用するエンドポイントの名前。

• エンドポイント：これにより、ベースアドレスに追加されます（ここでは、「data/3.0/onecall」です）。

• 方法： HTTPは、エンドポイントで何かを送信、読み取り、作成、更新、または削除するかどうかを示す要求を要求します。何かを受け取りたいので、Getを使用します。

• 結果形式： APIからPHPまたはJSON形式のデータを受信するかどうかにかかわらず、ここでJSONを使用しています。

• タイムアウト：接続が開いたままである期間。

その下で、パラメーターを設定します。オープンウェザーマップAPIには3つが必要です。

• LAT：天気情報が必要な場所の緯度。

• LON：おそらく推測できるように、これはあなたのターゲットの位置の経度です。

• APPID：アカウントで見つけることができるAPIキー。

OpenWeatherMap APIは、オプションのパラメーターも受け入れます。

• 除外：気象データの一部を、たとえば毎日または1時間ごとの予測などを省略できます。

• ユニット：優先測定単位を設定します。

• Lang：出力言語を選択します。

Query文字列セクションのパラメーターをキー値のペア（左側の「LAT」、右側の「48.8542」など）に設定します。

保存してから、上部のテストエンドポイントをクリックします。それが機能するかどうかを確認し、応答を確認できます。

出力を表示します

すべてが順調な場合は、テンプレートタグまたはショートコードWPGETAPIを使用してサイトに表示できます。

ページまたは投稿をプレビューすると、データが表示されることがわかります。

もちろん、現在は生のJSONデータなので、見ることはそれほど有益ではありません。プラグインの有料版には、出力をさらにフォーマットおよびカスタマイズする機能があります。

WordPressで手動でAPIにアクセスします

プラグインルートにアクセスしたくない場合は、手作業でAPI呼び出しを作成できます。これにより、要求したデータとその出力をすぐにカスタマイズできるため、より多くの制御が可能になります。

PHPの使用

Open Weather Mapの例を継続して、上記と同じ天気情報を取得するためのPHP関数を次に示します。

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

これがそれがすることです：

• 同じ座標やその他のパラメーターを呼び出します。

• wp_remote_get（）を使用して、HTTP Get Requestを作成します。

• JSON応答から現在の温度のみを引き出します。

• 一部のHTMLで出力をラップして、必要に応じてスタイルを設定できます。

• WordPressでデータを出力するための「[天気]」と呼ばれるショートコードを登録します。

関数を（子）テーマのfunctions.phpファイルまたはカスタムプラグインのいずれかに配置します。次に、以前のようにショートコードを使用します。これがページの様子です：

JavaScript

JavaScriptを使用してAPIに接続することもできます。これは、動的なコンテンツの更新、AJAXリクエスト、または単一ページのアプリケーションに特に役立ちます。

猫の事実APIから猫に関するランダムな情報を表示するためのfetch（）メソッドを使用した非常に簡単な例を次に示します。

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

これをカスタムHTMLブロックに入力して、WordPressにすぐに表示できます。

サードパーティのAPIとウェブサイトのパフォーマンス

WordPressにサードパーティAPIを追加すると、適切に処理されないと、サイトのパフォーマンスと読み込み時間に影響を与える可能性があります。ページが読み込まれてAPI呼び出しを行うたびに、ロードに情報が追加され、サーバー処理時間が増加します。遅いまたは反応しないAPI応答は、ページのレンダリングを遅らせたり、空のページセクションを表示したり、サイトを壊したりすることもあります。

これらの問題を回避するには、API応答をキャッシュすることが重要であるため、すべてのページのロードでフェッチされていません。 Wpgetapiのような多くのAPIプラグインには、そのための組み込みオプションがあります。手作業でAPI呼び出しを書く場合、独自のキャッシュメカニズムを設定する必要があります。

さらに、すべてのページのロードではなく、特定のイベント（たとえば、ボタンをクリックするなど）にAPI呼び出しを制限することにより、パフォーマンスへの影響を減らすことができます。別のオプションは、wp_cron（）を使用してAPI呼び出しをスケジュールし、結果を後で保存することです。

プラグインを使用したパフォーマンスの向上

サイトのパフォーマンスに対するAPI呼び出しの効果を最小限に抑えるためのもう1つの効果的なステップは、WPロケットを使用することです。

まず、プラグインはサイトにキャッシュを追加します（個別のモバイルキャッシュを含む）。これにより、レンダリングされたページの静的バージョンが作成され、API応答を待つ代わりに訪問者がプリロードされたコンテンツを見ることができます。これは、ショートコードまたはサーバー側のPHPを使用して表示されるAPIデータで特にうまく機能します。

JavaScriptを介してAPIコンテンツをロードすると、WP Rocketが負荷時間の改善に役立ちます。

• ファイルを小さくするためにJavaScriptを模倣する（デフォルトで有効）

• いくつかのファイルを1つに組み合わせて、より速いダウンロードを行います

• ファイルを延期および非同期にロードします

• JavaScriptの実行の遅延

APIコンテンツの表示を妨げた場合に備えて、個々のスクリプト、プラグイン、ファイルを最適化されないように除外するオプションがあります。さらに、ファイル最適化メニューでいくつかのボックスをチェックするだけで、上記のすべてを実行できます。

さらに、WP Rocketには、次のようなバックグラウンドにあるさまざまな自動パフォーマンスの改善が伴います。

• GZIP圧縮

• キャッシュとリンクのプリロード

• 重要な画像の最適化（怠zyなロードから折りたたみの上の画像を除外）最大のコンテンツペイントを改善する

• あなたのウェブページに高く見える要素をロードするための自動怠zyなレンダリング

プラグインをインストールしてアクティブにするだけで、サイトはパフォーマンスのベストプラクティスの80％から利益を得ることができ、必要な労力をかけずにすぐに高速化できます。さらに、次のようなサイト速度を上げるために手動でアクティブ化できる他の多くの機能があります。

• CSSの背景、ビデオ、IFRAMEなどの画像の怠zyLoading

• 外部ファイルとフォントのプリロード

• 自己ホストのGoogleフォント

• データベースの最適化

• RocketCDNを含むCDNに簡単に接続するオプション

ケーススタディ：WPロケットでAPI呼び出しをスピードアップします

外部APIを追加するとサイトのパフォーマンスにどのように影響するか、およびWPロケットのようなプラグインがどのように役立つかをよりよく理解するために、制御されたテスト環境を設定します。ダミーコンテンツを含むデモWordPress Webサイトを作成し、WP GOマップを使用してGoogleマップからマップを追加しました。

完全に最適化されていないため、そのPageSpeed Insightsの結果は次のとおりでした。

次に、WPロケットと次の機能を有効にしました。

• CSSとJavaScriptを縮小します

• 未使用のCSSを削除します

• JavaScriptの延期をロードします

• JavaScriptの実行を遅らせます

これにより、次の変更が必要です。

それはベースラインと比較して大規模な改善です！あなたのウェブサイトをより魅力的にすることができますが、Googleマップのようなダイナミックなコンテンツには多くの追加コードが付属しているため、サイトが遅くなる可能性があります。 WPロケットはその影響を軽減します - そして、それが必要なのは数回のクリックだけです。

パフォーマンスのドラッグなしで、APIをWordPressに追加します

APIは、動的でリアルタイムのコンテンツと強力な統合のための無限の可能性を開きます。 WordPressプラグインと簡単な統合のおかげで、開発者にならずにサイトに追加することもできます。

すべてのAPI呼び出しがページのパフォーマンスに影響を与える可能性があることに注意してください。あなたの深さからそれを最適化していると感じていますか？ WP Rocketはここにあります - 15日間リスクなしで試してみてください！