WordPress에 타사 API를 추가하는 방법 (플러그인 및 플러그인 없음)

API를 사용하면 WordPress 사이트를 타사 서비스 및 데이터 소스에 연결할 수 있습니다. 이를 통해 새로운 기능과 기능을 추가하거나 웹 사이트를 대화식 및 유익한 정보로 만들거나 분석, 이메일 마케팅 제공 업체 또는 CRM과 같은 도구와 통합 할 수 있습니다.

WordPress는 플러그인과 사용자 정의 코드를 사용하여 간단하고 복잡한 API 통합을 모두 처리 할 수 있습니다. 이 튜토리얼에서는 API 통합의 잠재적 성능 영향과이를 완화하는 방법에 대해 논의 할뿐만 아니라 둘 다 수행하는 방법을 가르쳐 줄 것입니다.

API 란 무엇이며 WordPress에 하나를 추가하는 이유는 무엇입니까?

API는 "Application Programming Interface"를 나타냅니다. 컴퓨팅에서 인터페이스는 둘 이상의 구성 요소를 서로 연결하는 것입니다. 이 경우 구성 요소는 다른 시스템 또는 응용 프로그램입니다.

API는 데이터를 실시간으로, 각각을 이해하고 처리 할 수있는 방식으로 데이터를 안전하게 교환 할 수 있도록합니다. 웹에서 매우 일반적입니다. Google 또는 Facebook 계정을 사용하여 웹 사이트에 로그인 한 경우 인증 API 덕분에 발생했습니다.

WordPress에서는 API를 사용하여 외부 서비스의 정보를 WordPress 사이트로 가져 오거나 데이터를 전송할 수 있습니다. 예를 들어, 다음에 사용할 수 있습니다.

• 사이트에 라이브 날씨, 환율 또는 주식 시장 업데이트를 표시하십시오.

• 소셜 미디어 피드를 표시합니다.

• 소셜 네트워크에 컨텐츠를 자동으로 게시하십시오.

• Stripe 또는 PayPal과 같은 결제 게이트웨이와 사이트를 통합하십시오.

• 온라인 상점에 실시간 배송 요금을 표시하십시오.

• 창고 시스템에서 제품 정보를 가져옵니다.

• 가입자 데이터를 웹 양식에서 이메일 마케팅 서비스로 보냅니다.

API를 사용하면 사이트에서 프로세스를 자동화 할 수 있습니다. 예를 들어 Imagify와 같은 서비스에 이미지 최적화를 아웃소싱 할 수 있습니다. 요컨대, API는 웹 사이트를보다 기능적이고 사용자 친화적으로 만듭니다.

중요한 API 구성 요소

API를 사용하려면 일반적으로 몇 가지 기본 부품이 필요합니다.

• Endpoint URL : 요청을 보내는 URL. 이것은 당신이 요구하는 것을 API에 알려줍니다 (예 : 현재 날씨, 블로그 게시물 목록 등).

• 매개 변수 : 위치, ID, 검색어 또는 날짜 범위와 같은 요청을 사용자 정의하기 위해 전달한 선택적 값입니다. 매개 변수는 API가 당신에게 돌려주는 것을 개선하는 데 도움이됩니다.

• 데이터 형식 : 데이터가 전송되는 형식입니다. 가장 일반적인 형식은 JSON입니다. 가볍고 JavaScript와 PHP에서 사용하기 쉽기 때문입니다. XML 또는 일반 텍스트도 옵션입니다.

• 인증 : 많은 API에는 데이터에 액세스 할 수 있는지 확인하기 위해 API 키 또는 토큰이 필요합니다. 요청을 정당화하려면 보내야합니다.

모든 API가 이러한 각 부분이 귀하에게 응답을 요구하는 것은 아닙니다. 우리는 아래에서 실제 예를 더 논의 할 것입니다.

WordPress Rest API

WordPress 자체에는 몇 가지 통합 API가 있습니다. 가장 두드러진 것은 나머지 API입니다. REST는 "표현 상태 전송"을 나타냅니다. 이는 단순히 API가 특정 형식과 아키텍처를 사용한다는 것을 의미합니다.

나머지 API의 목적은 다른 시스템에 WordPress 데이터에 액세스 할 수 있도록하는 것입니다. 예를 들어 모바일 앱을 구축하여 사이트를 관리하는 데 유용합니다. REST API는 또한 소위 헤드리스 워드 프레스 설정을 가능하게합니다. 여기에서는 API를 통해 WordPress Back End와 사용자 정의, JavaScript 기반 사용자 인터페이스를 연결합니다.

이것은 중요한 주제이지만 여기서는 초점이 아닙니다. 대신 WordPress 사이트에 외부 API를 추가하는 방법을 처리합니다.

플러그인으로 WordPress에 API를 추가하는 방법

API를 WordPress 사이트에 통합 할 수있는 두 가지 주요 방법이 있습니다.

• 코드 : 기술이 있거나 수행하는 사람을 고용하는 경우 사용자 정의 코드, 일반적으로 PHP 또는 JavaScript를 사용하여 사이트를 API에 연결할 수 있습니다.

• 플러그인 : WordPress에는 웹 사이트에 API 추가 및 구성을 포함하여 거의 모든 것을위한 플러그인 솔루션이 있습니다.

플러그인 솔루션으로 시작하여 두 가지 모두를 살펴볼 것입니다. 사용자 인터페이스를 통해 구성하고 코드 또는 웹 사이트 파일을 처리하는 대신 단축 코드, 위젯 또는 블록으로 데이터를 표시 할 수 있기 때문에 비 개발자에게는 편안합니다.

Google Maps API에 액세스하십시오

첫 번째 예는 웹 사이트에 Google지도 맵을 추가하는 방법을 배웁니다. 이 기능은 Google Maps API 덕분에 가능합니다.이를 통해 맵을 포함하고 매장 위치와 같은 마커를 추가하며 맵 설계를 변경할 수 있습니다.

가장 먼저 필요한 것은 청구가 활성화 된 무료 Google 클라우드 계정을 작성하는 것입니다. 일단 있으면 로그인하여 상단에 새 프로젝트를 만듭니다.

프로젝트에 액세스하고 내비게이션 메뉴 나 대시 보드의 바로 가기를 통해 API 및 서비스 로 이동하십시오.

라이브러리 를 클릭 한 다음 Maps JavaScript API를 찾으십시오.

액세스하고 활성화하십시오. 프로세스 중에 API 키를 받게되지만 나중에 키 및 자격 증명 에서 찾을 수도 있습니다. 보안을 위해 도메인에 사용을 제한하십시오.

다음으로 WordPress 플러그인 메뉴에서 WP Go Maps 플러그인을 설치하고 활성화하십시오. 준비가되면 맵> 설정> 고급 설정 으로 이동하여 Google Maps API 키에 붙여 넣고 설정을 저장하십시오.

그런 다음 플러그인 인터페이스를 사용하여 새 맵을 만들 수 있습니다.

만족하면 저장하십시오. 그런 다음 맵 블록을 사용하려는 곳이 어디에 있든 사이트에 표시하거나 플러그인이 사용자 정의 맵을 위해 생성하는 단축 코드와 함께 표시 할 수 있습니다.

축하합니다. WordPress 사이트에 API를 추가했습니다.

거의 모든 API에 wpgetapi를 사용하십시오

위의 예는 특정 API에 대해서만 작동합니다. API를 사이트에 통합하는 데 더 일반적인 플러그인 솔루션을 원한다면 가장 인기있는 것은 Wpgetapi입니다.

작동 방식은 다음과 같습니다.이 예에서는 OpenWeatherMap.org에서 날씨 정보를 표시하려고합니다. 이에 대한 첫 번째 단계는 해당 서비스에 대한 계정을 만들고 계획에 가입하는 것입니다 (테스트에 사용할 수있는 하루에 1000 개의 무료 통화가있는 것이 있습니다).

사이트의 API를 사용하기위한 모든 정보는 문서에서 확인할 수 있습니다.

API 호출을 설정하십시오

시작하려면 Wpgetapi를 설치하고 활성화 한 다음 대시 보드에서 wpgetapi> 설정 으로 이동하십시오.

다음과 같이 첫 번째 화면의 정보를 작성하십시오.

• API 이름 : 따라서 각 API가 무엇인지 알고 있습니다.

• 고유 식별자 : API의 WordPress Internal 이름을 표시합니다. "Open_Weather_Map"과 같은 소문자와 밑줄 만 사용하십시오.

• 기본 URL : 엔드 포인트가없는 API의 일반적인 주소. 이 예에서는 https://api.openweathermap.org 입니다.

준비가되면 계속해서 저장하십시오.

엔드 포인트 및 매개 변수를 구성하십시오

그런 다음 상단의 API 탭을 클릭하여 나머지 API 호출을 구성하십시오.

다음은 다음과 같은 방법입니다.

• 고유 한 ID : 사용할 엔드 포인트의 이름입니다.

• 엔드 포인트 : 이것은 기본 주소에 추가됩니다 (여기서는 "data/3.0/onecall").

• 방법 : http 요청은 엔드 포인트에서 무언가를 보내, 읽기, 작성, 업데이트 또는 삭제할지 여부를 표시하는 요청입니다. 우리는 무언가를 받고 싶어서 얻기를 사용합니다.

• 결과 형식 : API에서 PHP 또는 JSON 형식으로 데이터를 수신하든 여기에서 JSON을 사용하고 있습니다.

• 시간 초과 : 연결이 얼마나 오래 열려야 하는가.

그 아래에서 매개 변수를 설정하십시오. 열린 날씨지도 API에는 세 가지가 필요합니다.

• LAT : 날씨 정보를 원하는 위치의 위도.

• LON : 아마도 당신이 추측 할 수 있듯이, 이것은 대상 위치의 경도입니다.

• Appid : 계정에서 찾을 수있는 API 키.

OpenWeatherMap API는 또한 선택적 매개 변수를 허용합니다.

• 제외 : 날씨 데이터의 일부 (예 : 매일 또는 시간당 예측)를 생략 할 수 있습니다.

• 단위 : 선호하는 측정 단위를 설정하십시오.

• LANG : 출력 언어를 선택하십시오.

쿼리 문자열 섹션의 매개 변수를 키 값 쌍 (예 : 왼쪽의“lat”, 오른쪽의“48.8542”로 설정하십시오.

저장 한 다음 상단에서 테스트 엔드 포인트를 클릭하십시오. 작동하는지 확인하고 응답을 검토 할 수 있습니다.

출력을 표시합니다

모든 것이 좋으면 템플릿 태그 또는 바로가 코드를 사용하여 사이트에 표시 할 수 있습니다.

이제 페이지 나 게시물을 미리 보면 데이터가 나타납니다.

물론 현재는 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에서 데이터를 출력하기 위해 "[Weather]"라는 단축 코드를 등록합니다.

(자식) 테마의 functions.php 파일 또는 사용자 정의 플러그인에 함수를 넣습니다. 그런 다음 이전과 같이 단축 코드를 사용하십시오. 페이지의 모습은 다음과 같습니다.

자바 스크립트

JavaScript를 사용하여 API에 연결할 수도 있습니다. 이는 동적 콘텐츠 업데이트, AJAX 요청 또는 단일 페이지 응용 프로그램에 특히 유용합니다.

다음은 Cat Facts 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 호출의 영향을 최소화하기위한 또 다른 효과적인 단계는 WP Rocket을 사용하는 것입니다.

우선, 플러그인은 사이트에 캐싱을 추가합니다 (별도의 모바일 캐시 포함). 이를 통해 렌더링 된 페이지의 정적 버전을 생성하고 방문자가 API 응답을 기다리는 대신 사전로드 된 컨텐츠를 볼 수 있습니다. 이것은 단축 코드 또는 서버 측 PHP를 사용하여 표시되는 API 데이터에 특히 적합합니다.

JavaScript를 통해 API 컨텐츠를로드하는 경우 WP Rocket은 다음을 통해로드 시간을 개선하는 데 도움이됩니다.

• 파일을 더 작게 만들기 위해 JavaScript 미수 (기본적으로 활성화)

• 더 빠른 다운로드를 위해 여러 파일을 하나로 결합합니다

• 파일을 연기하고 비동기로로드합니다

• JavaScript 실행 지연

API 컨텐츠의 표시를 방해 할 경우 개별 스크립트, 플러그인 및 파일을 최적화하는 것을 제외 할 수있는 옵션이 있습니다. 또한 파일 최적화 메뉴에서 몇 개의 상자를 확인하면 위의 모든 작업을 수행 할 수 있습니다.

또한 WP Rocket은 다음과 같은 백그라운드에서 다양한 자동 성능 향상이 제공됩니다.

• GZIP 압축

• 캐시 및 링크에 대한 사전로드

• 최대 규모의 콘텐츠 페인트를 향상시키기 위해 임계 이미지 최적화 (게으른 하중에서 접기 이미지 제외)

• 웹 페이지에서로드 요소에 대한 자동 게으른 렌더링

플러그인을 설치하고 활성화하면 사이트가 성능 모범 사례의 80%로 이익을 얻을 수 있으며 필요한 노력없이 즉시 속도를 내릴 수 있습니다. 또한 수동으로 활성화하여 사이트 속도를 높이기 위해 다음과 같은 많은 기능이 있습니다.

• CSS 배경, 비디오 및 iframes를 포함한 이미지에 대한 게으른로드

• 외부 파일 및 글꼴을 사전로드합니다

• 자체 호스팅 Google 글꼴

• 데이터베이스 최적화

• RocketCDN을 포함한 CDN에 쉽게 연결하는 옵션

사례 연구 : WP 로켓으로 API 통화 속도를 높이십시오

외부 API를 추가하는 것이 사이트 성능에 어떤 영향을 미치는지, WP 로켓과 같은 플러그인이 어떻게 도움이 될 수 있는지 더 잘 이해하기 위해 제어 된 테스트 환경을 설정합니다. 우리는 더미 컨텐츠가 포함 된 데모 워드 프레스 웹 사이트를 만들고 WP Go지도를 사용하여 Google지도에서지도를 추가했습니다.

완전히 최적화되지 않은 Pagespeed Insights 결과는 다음과 같습니다.

그런 다음 WP 로켓과 다음 기능을 활성화했습니다.

• CSS 및 JavaScript를 조정하십시오

• 사용하지 않은 CSS를 제거하십시오

• JavaScript가 연기되었습니다

• 지연 JavaScript 실행

이것은 다음과 같은 변경으로 이어집니다.

그것은 기준선과 비교할 때 큰 개선입니다! 웹 사이트를 훨씬 더 매력적으로 만들 수 있지만 Google지도와 같은 역동적 인 콘텐츠에는 추가 코드가 많이 제공되므로 사이트 속도가 느려질 수 있습니다. WP Rocket은 그 영향을 완화시킵니다. 몇 번의 클릭 만 있으면됩니다.

성능을 끌지 않고 WordPress에 API를 추가하십시오

API는 동적, 실시간 컨텐츠 및 강력한 통합을위한 끝없는 가능성을 열어줍니다. WordPress 플러그인과 쉬운 통합 덕분에 개발자가 아닌 사이트에 추가 할 수도 있습니다.

모든 API 호출은 페이지 성능에 영향을 줄 수 있음을 명심하십시오. 당신의 깊이에서 벗어나는 느낌을 최적화하십니까? WP Rocket은 여기에 도움을주기 위해 여기에 있습니다. 15 일 동안 위험없이 시도하십시오!