如何將第三方API添加到WordPress（插件和無插件）

已發表: 2025-08-08

API允許您將WordPress網站連接到第三方服務和數據源。這使您可以添加新功能和功能，使您的網站更具互動性和信息性，或將其與分析，電子郵件營銷提供商或CRMS等工具集成在一起。

WordPress可以使用插件以及自定義代碼處理簡單和復雜的API集成。在本教程中，我們將教您如何做以及討論API集成的潛在性能影響以及如何減輕它們。

tl; dr

整個帖子沒有時間？沒問題，這是要點：

API從天氣數據，集成地圖和社交媒體供稿到付款網關及其他地區，將您的網站打開到第三方服務。他們可以自動化任務，增強用戶體驗，並使您的網站整體更聰明。

集成API的主要方法有兩種：使用插件（單用途和一般API插件）或通過代碼 - 主要是PHP和JavaScript。插件更容易，而自定義代碼提供了更多的控制和靈活性。每個API都需要基本信息，例如端點，參數以及可能的身份驗證密鑰。

API調用增加了加載時間，因此有必要優化其個人性能以及一般站點速度。使用WP Rocket添加緩存和最佳實踐，以在您的API增強WordPress網站中進行代碼優化。

什麼是API，為什麼在WordPress中添加一個？

API代表“應用程序編程接口”。在計算中，接口是將兩個或多個組件相互連接的東西。在這種情況下，組件是不同的系統或應用程序。

API允許他們實時安全地交換數據，並以每個人都可以理解和處理數據。它們在網絡上非常普遍。如果您曾經使用您的Google或Facebook帳戶登錄網站，則由於其身份驗證API而發生。

LinkedIn登錄屏幕與Google和Microsoft登錄選項

在WordPress中，您可以使用API將信息從外部服務提取到WordPress站點，或將數據發送出去。例如，您可以使用它們來：

  • 在您的網站上顯示現場天氣，匯率或股票市場更新。
  • 顯示社交媒體提要。
  • 自動將您的內容髮佈在社交網絡上。
  • 將您的網站與Stripe或PayPal等付款網關集成。
  • 在您的在線商店中顯示實時運輸速度。
  • 從倉庫系統中獲取產品信息。
  • 將訂戶數據從網絡表格發送到電子郵件營銷服務。

API還允許您在網站上自動化流程。例如，您可以將圖像優化外包到像Famify這樣的服務。簡而言之，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設置。在這裡，您可以通過API將自定義的，通常基於JavaScript的用戶界面與WordPress後端連接。

這是一個重要的話題，但不是我們在這裡的重點。相反，我們將處理如何將外部API添加到WordPress站點。

要了解有關REST API的更多信息，請檢查官方開發人員文檔。

如何使用插件向WordPress添加API

您可以通過兩種主要方法將API集成到WordPress網站：

  • 代碼：如果您有技能或僱用某人，則可以使用自定義代碼（通常是PHP或JavaScript）將網站連接到API。
  • 插件： WordPress具有幾乎所有內容的插件解決方案，包括在您的網站上添加和配置API。

從插件解決方案開始，我們將同時介紹兩者。這些對於非開發人員來說很舒適，因為您可以通過用戶界面配置它們，並使用短代碼，小部件或塊顯示其數據，而不是處理代碼或網站文件。

訪問Google Maps API

對於我們的第一個示例，我們將學習如何在您的網站上添加Google Maps地圖。由於Google Maps API，該功能是可能的，該API使您可以嵌入地圖，添加商店位置之類的標記以及更改地圖設計。

您需要的第一件事是使用啟用賬單創建一個免費的Google Cloud帳戶。一旦擁有，請登錄並在頂部創建一個新項目。

創建新的Google Cloud項目

訪問您的項目，然後通過導航菜單或儀表板上的快捷方式訪問APIS＆Services 。

單擊庫，然後找到地圖JavaScript API 。

Google API庫中的JavaScript API地圖

訪問並啟用它。在此過程中，您將收到一個API密鑰，但您還可以在以後的鍵和憑據下找到它。確保將其用於安全域的用途限制為您的域。

在Google Cloud Console中查找API鍵

接下來，從WordPress插件菜單中安裝並激活WP GO MAPS插件。準備好後，轉到MAPS>“設置”>“高級設置” ，將其粘貼到Google Maps API密鑰中，然後保存設置。

WP Go Maps中的粘貼API鍵

之後，您可以使用插件的界面創建新的地圖。

在WP Go Maps中配置地圖

一旦滿意，就保存它。然後，您可以在需要使用地圖塊或使用插件為自定義地圖生成的插件的快捷代碼上顯示它。

使用短碼在WordPress中的輸入映射

恭喜，您只是在WordPress網站上添加了API。

將WPGetapi用於幾乎所有API

上面的示例僅適用於特定的API。如果您想要將API集成到您的網站的更通用的插件解決方案，那麼最受歡迎的是WPGetapi。

它的工作方式如下：在此示例中，我們想從OpenWeathMap.org顯示天氣信息。這樣做的第一步是為該服務創建一個帳戶並註冊計劃（每天有1000個免費電話可以用於測試）。

OpenWeathMap.org定價

文檔中提供了使用該網站API的所有信息。

設置API調用

要開始，安裝和激活WPGetapi，然後轉到儀表板中的WPGetapi>設置。

wpgetapi設置了新的API

如下：填寫第一個屏幕上的信息：

  • API名稱：因此，您知道每個API的用途。
  • 唯一標識符：顯示API的WordPress內部名稱。僅使用小寫字母和下劃線，例如“ open_weather_map”。
  • 基本URL：無端點的API的一般地址。在此示例中，即https://api.openweathermap.org 。

準備好後，保存以繼續。

配置您的端點和參數

接下來，單擊頂部上的API選項卡以配置API調用的其餘部分。

配置API端點

這是這樣做的方法：

  • 唯一ID：您將要使用的端點的名稱。
  • 端點：將其附加到基礎地址（在這裡，是“數據/3.0/onecall”）。
  • 方法：指出是否在端點上發送，讀取，創建，更新或刪除某些內容的HTTP請求。我們想收到一些東西，因此我們使用Get。
  • 結果格式：無論您是想從API接收PHP還是JSON格式的數據，我們都在此處使用JSON。
  • 超時：連接應保持多長時間。

在此下方，設置參數。開放天氣地圖API需要三個：

  • LAT：您想要天氣信息的位置緯度。
  • LON：您可能會猜到，這是您目標位置的經度。
  • appid：您的API鍵，您可以在帳戶中找到。

OpenWeatherMap API還接受可選參數：

  • 排除：允許您省略天氣數據的某些部分，例如每日或小時預測。
  • 單位：設置您首選的測量單位。
  • Lang：選擇您的輸出語言。

在“查詢字符串”部分中以鑰匙值對設置參數，例如左側的“ LAT”和右側的“ 48.8542”。

wpgetapi中的API參數

保存，然後單擊頂部的測試端點。您可以查看它是否有效並查看響應。

API端點測試

顯示輸出

如果一切順利，您可以使用模板標籤或短代碼WPGetapi提供在網站上顯示它。

通過短代碼顯示OpenWeatherMap數據

現在，當您預覽頁面或帖子時，您會看到數據出現。

頁面上的OpenWeathMap API輸出

當然，目前是RAW JSON數據，因此看來並不是那麼有益。該插件的付費版本具有將輸出進一步格式化和自定義的功能。

手動訪問WordPress中的API

如果您不想走插件路由，則可以手工創建API調用。這為您提供了更多的控制權，因為您可以立即自定義您請求的數據及其輸出。

使用PHP

繼續以開放天氣圖示例為例，這裡有一個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獲取請求。
  • 僅從JSON響應中提取當前溫度。
  • 將輸出包裝在某些HTML中，以便您可以根據需要進行樣式。
  • 註冊一個稱為“ [天氣]”的短代碼，用於輸出WordPress中的數據。

將函數放在您（子）主題的functions.php文件中，或者是自定義插件。然後，像以前一樣使用短代碼。這是頁面上的樣子：

定制的天氣API輸出
請注意，以上功能僅用於演示目的。它尚未以任何方式優化性能，也沒有準備好生產。

JavaScript

您也可以使用JavaScript連接到API。這對於動態內容更新，AJAX請求或單頁應用程序特別有用。

這是一個非常簡單的示例，使用fetch（）方法顯示有關貓事實API的貓的隨機信息：

 <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中顯示。

cat事實WordPress中的API輸出
請注意，此方法僅適用於您不需要任何敏感信息（例如API鍵）的應用程序。要使用身份驗證，您將再次通過PHP路由API請求，將JavaScript放在單獨的文件中獲取，然後通過functions.php或自定義插件來招募該請求。

第三方API和網站性能

如果無法正確處理，將第三方API添加到WordPress中可能會影響您網站的性能和加載時間。每次頁面加載並進行API調用時，都會添加信息以加載並增加服務器處理時間。緩慢或無反應的API響應也會延遲您的頁面渲染，顯示空頁面部分或打破網站。

為了避免這些問題，重要的是緩存API響應很重要，以免在每個頁面加載中獲取它們。 WPGetapi（例如WPGetapi）的許多API插件都具有內置選項。如果您手工編寫API呼叫，則必須設置自己的緩存機制。

此外，您可以通過將API調用限制為特定事件（例如，單擊按鈕）而不是每個頁面加載來減少性能影響。另一個選項是使用wp_cron（）安排API調用，並存儲結果以供稍後顯示。

通過插件提高性能

最大程度地減少API調用對站點性能的影響的另一個有效步驟是使用WP Rocket。

首先，插件將緩存添加到您的網站（包括單獨的移動緩存）。這會創建渲染頁面的靜態版本，並允許訪問者看到預加載的內容，而不是等待API響應。對於使用短代碼或服務器端PHP顯示的API數據特別有效。

如果通過JavaScript加載API內容，WP Rocket可以通過以下方式改善其負載時間。

  • 縮小JavaScript以使文件較小（默認啟用）
  • 將幾個文件組合到一個文件中以供更快下載
  • 延期和異步加載文件
  • 延遲JavaScript執行

您可以選擇將單個腳本，插件和文件排除在優化之外，以防它干擾您的API內容。另外，您可以通過簡單地選中文件優化菜單中的幾個框來完成上述所有操作。

更重要的是，WP Rocket在背景中具有一系列自動性能改進，例如：

  • GZIP壓縮
  • 預裝緩存和鏈接
  • 關鍵圖像優化（不包括懶惰加載的折疊上方圖像）以改善最大的內容塗料
  • 自動懶惰渲染以加載元素在您的網頁上顯得很高

只需安裝和激活插件，您的網站就可以從80％的性能最佳實踐中受益，並立即加速它，而無需您的任何努力。另外，您還可以手動激活許多其他功能以提高您的站點速度，例如：

  • 圖像的懶惰加載，包括CSS背景，視頻和iframe
  • 預加載外部文件和字體
  • 自我託管的Google字體
  • 數據庫優化
  • 輕鬆連接到CDN的選項，包括RocketCDN

案例研究：加快與WP火箭的API通話

為了更好地了解添加外部API如何影響站點性能，以及WP Rocket之類的插件如何幫助 - 我們設置了一個受控的測試環境。我們創建了一個帶有虛擬內容的Demo WordPress網站，並使用WP Go Maps添加了Google Maps的地圖。

WordPress速度測試網站中的API

完全不優化，其PagesSpeed Insights結果如下：

API速度測試基線結果
移動性能得分56
首先滿足的油漆9.8s
最大的內容油漆10.5s
速度索引9.8s

然後，我們激活了WP火箭和以下功能：

  • 縮小CSS和JavaScript
  • 刪除未使用的CSS
  • 負載JavaScript延期
  • 延遲JavaScript執行

這將使以下更改：

優化後的速度測試結果
移動性能得分89
首先滿足的油漆1.2s
最大的內容油漆3.6s
速度索引1.2s

與基線相比，這是一個巨大的進步！即使它可以使您的網站變得更具吸引力，但像Google Maps（例如Google Maps）的動態內容具有很多額外的代碼，這可能會減慢您的網站。 WP Rocket減輕了其影響 - 只需單擊幾下。

將API添加到WordPress，而無需阻止性能

API為動態，實時內容和強大的集成開放了無盡的可能性。得益於WordPress插件和簡單集成，您甚至可以將它們添加到您的網站而無需成為開發人員的情況下。

請記住，每個API呼叫都會影響頁面性能。感覺超出您的深度優化？ WP Rocket在這裡提供幫助 - 嘗試15天的無風險！