Как добавить сторонние API в WordPress (плагин и плагин)

API позволяют подключить ваш сайт WordPress к сторонним услугам и источникам данных. Это позволяет добавлять новые функции и функции, сделать ваш веб -сайт более интерактивным и информативным, или интегрировать его с помощью таких инструментов, как аналитика, поставщики маркетинга электронной почты или CRM.

WordPress может обрабатывать как простые, так и сложные интеграции API, используя плагины, а также пользовательский код. В этом уроке мы научим вас, как это делать, а также обсудить потенциальное влияние интеграции API и как их смягчить.

Что такое API и зачем добавлять его в WordPress?

API означает «интерфейс прикладного программирования». В вычислениях интерфейс - это то, что соединяет два или более компонентов друг с другом. В этом случае компоненты являются разными системами или приложениями.

API позволяют им надежно обмениваться данными в режиме реального времени и таким образом, чтобы каждый из них мог понять и обработать их. Они очень распространены в Интернете. Если вы когда -либо вошли в веб -сайт, используя свою учетную запись Google или Facebook, это произошло благодаря их API аутентификации.

В WordPress вы можете использовать API для извлечения информации из внешних служб на ваш сайт WordPress или отправлять данные. Например, вы можете использовать их для:

• Покажите живую погоду, обменные курсы или обновления фондового рынка на вашем сайте.

• Отображение каналов в социальных сетях.

• Автоматически публикуйте свой контент в социальных сетях.

• Интегрируйте свой сайт с помощью платежного шлюза, такого как Stripe или PayPal.

• Покажите ставки доставки в реальном времени в вашем интернет-магазине.

• Получить информацию о продукте со складской системы.

• Отправьте данные подписчика из веб -формы в сервис по маркетингу электронной почты.

API также позволяют автоматизировать процессы на вашем сайте. Например, вы можете на аутсорсинг оптимизации изображений в такую услугу, как Imagify. Короче говоря, API делают веб-сайты более функциональными и удобными для пользователя.

Важные компоненты API

Чтобы использовать любой API, вам обычно нужно несколько основных частей:

• URL конечной точки : URL, на который вы отправляете свой запрос. Это говорит API, что вы просите (например, текущая погода, список постов в блоге и т. Д.).

• Параметры: это необязательные значения, которые вы передаете, для настройки запроса, таких как местоположение, идентификатор, условия поиска или диапазон дат. Параметры помогают уточнить то, что вернет вам API.

• Формат данных: это формат, в котором передаются данные. Наиболее распространенным форматом является JSON, потому что он легкий и прост в использовании как в JavaScript, так и в PHP. XML или простой текст также являются параметрами.

• Аутентификация: многие API требуют ключа или токена API, чтобы убедиться, что вам разрешено получить доступ к данным. Вам нужно отправить его, чтобы узаконить ваш запрос.

Не каждый API требует, чтобы каждая из этих произведений давала вам ответ. Мы обсудим реальные примеры дальше.

API WordPress REST

У WordPress есть несколько интегрированных API. Наиболее выдающимся является API REST. Отдых обозначает «перенос репрезентативного состояния», что просто означает, что API использует определенный формат и архитектуру.

Цель API остального - сделать данные WordPress доступными для других систем. Это полезно, например, для создания мобильных приложений для управления вашим сайтом. REST API также позволяет так называемые настройки WordPress без головы. Здесь вы подключаете пользовательский пользовательский интерфейс на основе JavaScript с задним концом WordPress через API.

Это важная тема, но не наша фокус здесь. Вместо этого мы будем иметь дело с тем, как вы можете добавить внешние API на ваш сайт WordPress.

Как добавить API в WordPress с плагином

Есть два основных способа, которыми вы можете интегрировать API в свой сайт WordPress:

• Код: Если у вас есть навыки или нанимаете кого -то, кто это делает, вы можете подключить свой сайт к API с помощью пользовательского кода, обычно PHP или JavaScript.

• Плагины: WordPress имеет решения плагинов практически для всего, включая добавление и настройку API на вашем веб -сайте.

Мы рассмотрим оба, начиная с решений плагина. Они удобны для неразработчиков, потому что вы можете настроить их через пользовательский интерфейс и отобразить их данные с помощью шорткодов, виджетов или блоков вместо того, чтобы иметь дело с кодом или файлами веб-сайтов.

Доступ к API Google Maps API

Для нашего первого примера мы узнаем, как добавить карту Google Maps на ваш сайт. Эта способность возможна благодаря API Google Maps, который позволяет внедрять карты, добавлять маркеры, такие как местоположения магазинов, и изменить дизайн карты.

Первое, что вам нужно, - это создать бесплатную учетную запись Google Cloud с включенным выставлением счетов. Как только вы это получите, войдите в систему и создайте новый проект вверху.

Получите доступ к своему проекту и перейдите в APIS & Services либо через меню навигации, либо на ярлык на панели инструментов.

Нажмите на библиотеку , затем найдите API карты JavaScript .

Доступ и включить это. Вы получите ключ API во время процесса, но вы также можете найти его под ключами и учетными данными позже. Обязательно ограничивайте его использование в своем домене для безопасности.

Затем установите и активируйте плагин WP Go Maps из меню плагинов WordPress. После готовности перейдите к MAPS> «Настройки»> «Расширенные настройки» , вставьте в свой ключ API Google Maps и сохраните настройки.

После этого вы можете создать новую карту, используя интерфейс плагина.

Сохраните, как только вы удовлетворены. Затем вы можете отобразить его на своем сайте, где бы вы ни хотели, используя блок карты , или с помощью шорткода, который плагин генерирует для вашей пользовательской карты.

Поздравляю, вы только что добавили API на свой сайт WordPress.

Используйте WpgetApi практически для любого API

Пример выше работает только для конкретного API. Если вы хотите, чтобы решение плагина было более общим для интеграции API в ваш сайт, одним из самых популярных является WpgetApi.

Вот как это работает: для этого примера мы хотим отобразить информацию о погоде с openweathermap.org. Первым шагом для этого является создание учетной записи для этой услуги и зарегистрироваться для плана (есть один с 1000 бесплатных вызовов в день, которые вы можете использовать для тестирования).

Вся информация для использования API сайта доступна в документации.

Установите вызов API

Чтобы начать, установите и активируйте WpgetApi, затем перейдите в WpgetApi> настройку на панели панели.

Заполните информацию на первом экране следующим образом:

• Имя API: Итак, вы знаете, для чего для каждого API.

• Уникальный идентификатор: WordPress-Internal название API для отображения его. Используйте только строчные буквы и подставки, например, «open_weather_map».

• Базовый URL: общий адрес API без конечной точки. В этом примере это https://api.openweathermap.org .

После готовности, сохраните, чтобы продолжить.

Настройте свою конечную точку и параметры

Затем нажмите на вкладку API наверху, чтобы настроить остальную часть вызова API.

Вот как это сделать:

• Уникальный идентификатор: имя конечной точки, которую вы собираетесь использовать.

• Конечная точка: это добавляется к базовому адресу (здесь, это «Data/3.0/OneCall»).

• Метод: HTTP -запрос, который утверждает, отправлять, читать, создавать, обновить или удалять что -то в конечной точке. Мы хотим что -то получить, поэтому мы используем Get.

• Формат результатов: хотите ли вы получить данные в формате PHP или JSON от API, мы используем JSON здесь.

• Тайм -аут: Как долго соединение должно оставаться открытым.

Ниже установите параметры. API карты открытой погоды требуется три:

• LAT: широта местоположения, для которого вы хотите получить информацию о погоде.

• ЛОН: Как вы можете догадаться, это долгота вашего целевого местоположения.

• Appid: ваш ключ API, который вы можете найти в своей учетной записи.

API OpenWeatherMap также принимает дополнительные параметры:

• Исключить: позволяет вам опустить некоторые части данных о погоде, например, ежедневно или почасовые прогнозы.

• Единицы: установите предпочтительные единицы измерения.

• Ланг: Выберите язык вывода.

Установите параметры в разделе строки запроса в парах значений ключей, например, «LAT» слева и «48,8542» справа.

Сохраните, затем нажмите Конечную точку тестирования вверху. Вы можете увидеть, работает ли это, и просмотреть ответ.

Отобразить выход

Если все хорошо, вы можете использовать тег шаблона или шорткод WpgetApi, чтобы отобразить его на вашем сайте.

Когда вы теперь предварительно просмотрите страницу или публикацию, вы видите, что появляются данные.

Конечно, в настоящее время это необработанные данные JSON, поэтому не так информативно смотреть. Платная версия плагина имеет функциональность для форматирования и настройки вывода дальше.

Доступ к API в WordPress вручную

Если вы не хотите идти по маршруту плагина, вы можете создавать вызовы 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 get.

• Вытаскивает только текущую температуру от ответа JSON.

• Завершает вывод в какой -то HTML, чтобы вы могли придумать его, если это необходимо.

• Регистрирует шорткод, называемый «[погода]» для вывода данных в WordPress.

Поместите функцию в файл functions.php вашей (дочерней) темы или пользовательского плагина. Затем используйте шорткод, как и раньше. Вот как это выглядит на странице:

JavaScript

Вы также можете использовать JavaScript для подключения к API. Это особенно полезно для динамических обновлений контента, запросов AJAX или одностраничных приложений.

Вот очень простой пример, используя метод fetch () для отображения случайной информации о кошках из API фактов CAT:

 <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 и производительность веб-сайта

Добавление сторонних API в WordPress может повлиять на производительность вашего сайта и время загрузки, если они не обрабатываются должным образом. Каждый раз, когда страница загружается и делает вызов API, она добавляет информацию для загрузки и увеличения времени обработки сервера. Медленные или не отвечающие ответы API также могут задержать рендеринг вашей страницы, показать пустые разделы страницы или сломать ваш сайт.

Чтобы избежать этих проблем, важно кэшировать ответы API, чтобы они не получали при каждой нагрузке страницы. Многие плагины API, такие как WpgetApi, имеют встроенные параметры для этого. Если вы пишете вызовы API вручную, вы должны настроить свои собственные механизмы кэширования.

Кроме того, вы можете уменьшить воздействие на производительность, ограничивая вызовы API на определенные события (например, нажимать на кнопку) вместо каждой загрузки страницы. Другой вариант - запланировать вызовы API с использованием wp_cron () и сохранить результаты для отображения позже.

Повышение производительности с помощью плагина

Другим эффективным шагом для минимизации эффекта вызовов API на производительность сайта является использование Rocket WP.

Прежде всего, плагин добавляет кэширование на ваш сайт (включая отдельный мобильный кеш). Это создает статические версии ваших визуализированных страниц и позволяет посетителям видеть предварительно загруженный контент вместо того, чтобы ждать ответов API. Это особенно хорошо работает для данных API, отображаемых с помощью шорткодов или PHP на стороне сервера.

Если вы загружаете контент API через JavaScript, WP Rocket помогает улучшить время его загрузки с помощью:

• Минифицирующий JavaScript, чтобы сделать файлы меньше (по умолчанию включено)

• Объединение нескольких файлов в один для более быстрых загрузок

• Отложение и асинхронно загрузка файлов

• Задержка выполнения JavaScript

У вас есть возможность исключить отдельные сценарии, плагины и файлы из оптимизации, в случае, если это мешает отображению вашего содержимого API. Кроме того, вы можете сделать все вышеперечисленное, просто проверив несколько коробок в меню оптимизации файлов .

Более того, WP Rocket имеет ряд автоматических улучшений производительности в фоновом режиме, например:

• GZIP сжатие

• Предварительная загрузка для кеша и ссылок

• Критическая оптимизация изображения (исключает изображения выше сгиба от ленивой загрузки), чтобы улучшить самую большую довольную краску

• Автоматическое ленивое рендеринг для загрузки элементов, появляющихся на ваших веб -страницах быстрее

Просто установка и активация плагина позволяет вашему сайту выиграть от 80% лучших практик производительности и сразу же ускоряет его без каких -либо усилий от вас. Кроме того, есть много других функций, которые вы можете вручную активировать, чтобы увеличить скорость вашего сайта, например:

• Ленивая загрузка для изображений, включая фон CSS, видео и iframes

• Предварительная загрузка внешних файлов и шрифтов

• Самостояние шрифтов Google

• Оптимизация базы данных

• Варианты легко подключиться к CDN, включая RocketCdn

Тематическое исследование: ускорить вызовы API с помощью WP Rocket

Чтобы лучше понять, как добавление внешнего API влияет на производительность сайта - и как может помочь плагин, такой как WP Rocket - мы создали контролируемую среду тестирования. Мы создали демонстрационный веб -сайт WordPress с фиктивным контентом и добавили карту с карт Google с помощью карт WP GO.

Полностью неоптимизированные, результаты его страниц -контактов были следующими:

Затем мы активировали ракета WP и следующие функции:

• Минимизировать CSS и JavaScript

• Удалите неиспользованный CSS

• Загрузите JavaScript отложено

• Задержка выполнения JavaScript

Это дало следующие изменения:

Это огромное улучшение по сравнению с базовой линией! Несмотря на то, что он может сделать ваш сайт более привлекательным, динамический контент, такой как Google Maps, поставляется с большим дополнительным кодом, который может замедлить ваш сайт. WP Rocket смягчает свое влияние - и все, что нужно, - это несколько кликов.

Добавить API в WordPress без перетаскивания производительности

API открывают бесконечные возможности для динамического, контента в реальном времени и мощных интеграций. Благодаря плагинам WordPress и простым интеграциям, вы даже можете добавить их на свой сайт, не будучи разработчиком.

Просто имейте в виду, что каждый вызов API может повлиять на производительность страницы. Чувствуете себя из вашей глубины оптимизировать это? WP Rocket здесь, чтобы помочь-попробуйте без риска в течение 15 дней!