如何将第三方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天的无风险！