Jak dodać interfejsy API innych firm do WordPress (wtyczka i bez wtyczki)

API umożliwiają podłączenie witryny WordPress z usługami innych firm i źródeł danych. Umożliwia to dodawanie nowych funkcji i funkcji, uczynić twoją witrynę bardziej interaktywną i pouczającą lub zintegrować ją z narzędziami takimi jak analityka, dostawcy e -mail marketingu lub CRM.

WordPress może obsługiwać zarówno proste, jak i złożone integracje API za pomocą wtyczek, a także kodu niestandardowego. W tym samouczku nauczymy Cię, jak robić zarówno, jak i omówimy potencjalny wpływ integracji API i jak je złagodzić.

Co to jest interfejs API i po co dodawać je do WordPress?

API oznacza „interfejs programowania aplikacji”. W obliczeniach interfejs jest czymś, co łączy ze sobą dwa lub więcej komponentów. W takim przypadku komponenty to różne systemy lub aplikacje.

API pozwalają im bezpiecznie wymieniać dane, w czasie rzeczywistym i w sposób, w jaki każdy z nich może je zrozumieć i przetworzyć. Są bardzo powszechne w Internecie. Jeśli kiedykolwiek zalogowałeś się na witrynie za pomocą konta Google lub Facebooka, stało się to dzięki ich interfejsowi API uwierzytelniania.

W WordPress możesz użyć interfejsów API do pobierania informacji z usług zewnętrznych do witryny WordPress - lub wysyłania danych. Na przykład możesz ich użyć do:

• Pokaż pogodę na żywo, kursy walut lub aktualizacje rynku giełdowego w Twojej witrynie.

• Wyświetl kanały mediów społecznościowych.

• Automatycznie publikuj swoje treści w sieciach społecznościowych.

• Zintegruj swoją witrynę z bramą płatności, taką jak Stripe lub PayPal.

• Pokaż stawki wysyłki w czasie rzeczywistym w swoim sklepie internetowym.

• Przyciągnij informacje o produkcie z systemu magazynowego.

• Wyślij dane subskrybenta z formularza internetowego do usługi marketingowej e -mail.

API pozwalają również zautomatyzować procesy w Twojej witrynie. Na przykład możesz zlecić optymalizację obrazu do usługi takiej jak wyobraźnia. Krótko mówiąc, interfejsy API sprawiają, że witryny są bardziej funkcjonalne i przyjazne dla użytkownika.

Ważne elementy API

Aby użyć dowolnego interfejsu API, zwykle potrzebujesz kilku podstawowych części:

• URL punktu końcowego : URL, do którego wysyłasz prośbę. To informuje API, o co prosisz (np. Obecna pogoda, lista postów na blogu itp.).

• Parametry: Są to opcjonalne wartości, które przekazujesz, aby dostosować żądanie, takie jak lokalizacja, identyfikator, wyszukiwane warunki lub zakres dat. Parametry pomagają udoskonalić to, co oddaje API.

• Format danych: Jest to format, w którym dane są przesyłane. Najczęstszym formatem jest JSON, ponieważ jest lekki i łatwy w użyciu zarówno w JavaScript, jak i PHP. XML lub zwykły tekst są również opcjami.

• Uwierzytelnianie: Wiele interfejsów API wymaga klucza API lub tokena, aby sprawdzić, czy możesz uzyskać dostęp do danych. Musisz go wysłać, aby legitymizować swoją prośbę.

Nie każdy interfejs API wymaga odpowiedzi. Poniżej omówimy prawdziwe przykłady.

WordPress Rest API

Sam WordPress ma kilka zintegrowanych interfejsów API. Najbardziej widocznym jest API reszty. REST oznacza „reprezentacyjne transfer stanu”, co oznacza po prostu, że interfejs API używa określonego formatu i architektury.

Celem API REST jest udostępnienie danych WordPress dla innych systemów. Jest to przydatne na przykład do budowania aplikacji mobilnych do zarządzania witryną. REST API umożliwia również tak zwane konfiguracje bezgłowych WordPress. Tutaj podłączasz niestandardowy, często interfejs użytkownika oparty na JavaScript z WordPress Back End przez API.

To ważny temat, ale nie nasz tutaj. Zamiast tego poradzimy sobie z tym, jak możesz dodać zewnętrzne interfejsy API do swojej witryny WordPress.

Jak dodać interfejs API do WordPress z wtyczką

Istnieją dwa główne sposoby zintegrowania interfejsów API z witryną WordPress:

• Kod: Jeśli masz umiejętności lub zatrudniasz kogoś, kto to robi, możesz podłączyć swoją witrynę z interfejsem API za pomocą kodu niestandardowego, zwykle PHP lub JavaScript.

• Wtyczki: WordPress ma rozwiązania wtyczek dla prawie wszystkiego, w tym dodawanie i konfigurowanie interfejsów API w Twojej witrynie.

Przejdziemy oba, zaczynając od rozwiązań wtyczek. Są one wygodne dla osób niebędących rozwiniętymi, ponieważ można je skonfigurować za pośrednictwem interfejsu użytkownika i wyświetlić ich dane z skrótami, widżetami lub blokami zamiast zajmować się plikami kodu lub strony internetowej.

Uzyskaj dostęp do interfejsu API Mapy Google

Dla naszego pierwszego przykładu dowiemy się, jak dodać mapę Map Google do swojej witryny. Ta umiejętność jest możliwa dzięki interfejsowi API Google Maps, który pozwala osadzić mapy, dodawać znaczniki takie jak lokalizacje sklepów i zmienić projekt mapy.

Pierwszą rzeczą, której potrzebujesz, jest utworzenie bezpłatnego konta Google Cloud z włączonym rozliczeniem. Gdy to zrobisz, zaloguj się i utwórz nowy projekt u góry.

Uzyskaj dostęp do projektu i przejdź do interfejsów API i usług za pośrednictwem menu nawigacyjnego lub skrótu na pulpicie nawigacyjnym.

Kliknij bibliotekę , a następnie znajdź interfejs MAPS JavaScript API .

Uzyskaj dostęp do i włącz. Otrzymasz klucz API podczas procesu, ale możesz go również znaleźć pod klucze i poświadczenia później. Pamiętaj, aby ograniczyć jego użycie do domeny do bezpieczeństwa.

Następnie zainstaluj i aktywuj wtyczkę WP Go Maps z menu wtyczek WordPress. Po przygotowaniu przejdź do map> Ustawienia> Ustawienia zaawansowane , wklej w kluczu API Mapy Google i zapisz ustawienia.

Następnie możesz utworzyć nową mapę za pomocą interfejsu wtyczki.

Zapisz go, gdy będziesz zadowolony. Następnie możesz wyświetlić go na swojej stronie, gdzie chcesz za pomocą bloku mapy lub w skrócie, który wtyczka generuje dla niestandardowej mapy.

Gratulacje, właśnie dodałeś interfejs API do swojej witryny WordPress.

Użyj WPGetAPI dla prawie dowolnego API

Powyższy przykład działa tylko dla konkretnego interfejsu API. Jeśli chcesz rozwiązania wtyczki, które jest bardziej ogólne do integracji interfejsów API z Twoją witryną, jednym z najpopularniejszych jest WPGetAPI.

Oto jak to działa: w tym przykładzie chcemy wyświetlać informacje o pogodzie z Openweathermap.org. Pierwszym krokiem dla tego jest utworzenie konta dla tej usługi i zapisanie się na plan (jest jedno z 1000 bezpłatnych połączeń dziennie, których można użyć do testowania).

Wszystkie informacje dotyczące korzystania z interfejsu API witryny są dostępne w dokumentacji.

Ustaw połączenie API

Aby rozpocząć, zainstaluj i aktywuj WPGetAPI, a następnie przejdź do WPGetAPI> Ustaw na desce rozdzielczej.

Wypełnij informacje na pierwszym ekranie w następujący sposób:

• Nazwa API: Więc wiesz, do czego służy każdy interfejs API.

• Unikalny identyfikator: WordPress-Internnal Name API, aby go wyświetlić. Użyj tylko małych liter i podkreśleń, np. „Open_weather_map”.

• URL podstawowa: Ogólny adres API, bez punktu końcowego. W tym przykładzie jest https://api.openweathermap.org .

Po przygotowaniu zapisz, aby kontynuować.

Skonfiguruj punkt końcowy i parametry

Następnie kliknij kartę API na górze, aby skonfigurować resztę wywołania API.

Oto jak to zrobić:

• Unikalny identyfikator: nazwa punktu końcowego, którego zamierzasz użyć.

• Punkt końcowy: dostaje się do adresu podstawowego (tutaj jest to „Data/3.0/OneCall”).

• Metoda: żądanie HTTP, które stwierdza, czy wysyłać, czytać, tworzyć, aktualizować lub usuwać coś w punkcie końcowym. Chcemy coś otrzymać, więc używamy Get.

• Format wyników: Niezależnie od tego, czy chcesz otrzymać dane w formacie PHP czy JSON z API, używamy tutaj JSON.

• Limit czasu: Jak długo połączenie powinno pozostać otwarte.

Poniżej ustaw parametry. API mapy otwartej pogody wymaga trzech:

• LAT: Szerokość lokalizacji, dla której chcesz informacje o pogodzie.

• Lon: Jak zapewne można się domyślić, jest to długość geograficzna Twojej docelowej lokalizacji.

• AppId: Twój klucz API, który można znaleźć na swoim koncie.

API OpenWeatherMap Accepuje również opcjonalne parametry:

• Wyklucz: pozwala pominąć niektóre części danych pogodowych, np. Prognozy dziennie lub godzinowe.

• Jednostki: Ustaw preferowane jednostki pomiaru.

• Lang: Wybierz język wyjściowy.

Ustaw parametry w sekcji String zapytania w parach kluczowych, np. „LAT” po lewej i „48.8542” po prawej stronie.

Zapisz, a następnie kliknij punkt końcowy testu u góry. Możesz sprawdzić, czy to działa, i przejrzyj odpowiedź.

Wyświetl wyjście

Jeśli wszystko jest w porządku, możesz użyć znacznika szablonu lub skrótu Wpgetapi, aby wyświetlić go w witrynie.

Kiedy teraz wyświetlisz podgląd strony lub post, zobaczysz, że pojawiają się dane.

Oczywiście obecnie są to surowe dane JSON, więc nie jest to pouczające. Płacona wersja wtyczki ma funkcjonalność do formatowania i dostosowywania wyjścia.

Dostęp do interfejsów API w WordPress ręcznie

Jeśli nie chcesz iść drogą wtyczki, możesz ręcznie tworzyć wywołania interfejsu API. Daje to większą kontrolę, ponieważ możesz od razu dostosować żądane dane i ich wyjście.

Za pomocą php

Kontynuując przykład otwartej mapy pogody, oto funkcja PHP, aby uzyskać takie same informacje o pogodzie jak powyżej:

 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');

Oto, co robi:

• Wzywa te same współrzędne i inne parametry.

• Używa wp_remote_get (), aby uczynić żądanie HTTP GET.

• Wyciąga tylko aktualną temperaturę z odpowiedzi JSON.

• Owija wyjście w niektórych HTML, aby w razie potrzeby można je stylizować.

• Rejestruje skrót o nazwie „[pogoda]” do wyświetlania danych w WordPress.

Umieść funkcję albo w pliku Funkctions.php motywu (dziecięcego) lub wtyczki niestandardowej. Następnie użyj skrótu jak poprzednio. Oto, jak to wygląda na stronie:

JavaScript

Możesz także użyć JavaScript do połączenia z interfejsami API. Jest to szczególnie przydatne w przypadku dynamicznych aktualizacji treści, żądań AJAX lub aplikacji jednostronicowych.

Oto bardzo prosty przykład przy użyciu metody fetch () do wyświetlania losowych informacji o kotach z interfejsu API faktów 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>

Możesz wprowadzić to do niestandardowego bloku HTML , aby wyświetlić go od razu w WordPress.

Interfejsy API i wydajność stron internetowych

Dodanie interfejsów API innych firm do WordPress może wpłynąć na wydajność i czas ładowania Twojej witryny, jeśli nie jest właściwie obsługi. Za każdym razem, gdy strona ładuje się i wykonuje połączenie API, dodaje informacje o ładowaniu i zwiększaniu czasu przetwarzania serwera. Powolne lub niereagujące odpowiedzi interfejsu API mogą również opóźnić renderowanie strony, pokazać puste sekcje strony lub złamać witrynę.

Aby uniknąć tych problemów, ważne jest, aby buforować odpowiedzi interfejsu API, aby nie były pobierane na każdym obciążeniu strony. Wiele wtyczek API, takich jak WPGETAPI, ma na to wbudowane opcje. Jeśli piszesz wezwania interfejsu API ręcznie, musisz skonfigurować własne mechanizmy buforowania.

Ponadto możesz zmniejszyć wpływ wydajności, ograniczając wywołania API do określonych zdarzeń (np. Kliknij przycisk) zamiast każdego ładowania strony. Inną opcją jest zaplanowanie połączeń API za pomocą WP_CRON () i przechowywanie wyników do wyświetlania później.

Poprawa wydajności za pomocą wtyczki

Kolejnym efektywnym krokiem w celu zminimalizowania wpływu wywołań API na wydajność witryny jest korzystanie z rakiety WP.

Przede wszystkim wtyczka dodaje buforowanie Twojej witryny (w tym osobną pamięć podręczną mobilną). Tworzy to statyczne wersje twoich renderowanych stron i pozwala odwiedzającym zobaczyć zawartość wstępnie załadowaną zamiast czekać na odpowiedzi API. Działa to szczególnie dobrze w przypadku danych API wyświetlanych za pomocą skrótów lub PHP po stronie serwera.

Jeśli ładujesz zawartość interfejsu API przez JavaScript, WP Rocket pomaga poprawić czas ładowania przez:

• Minifing JavaScript, aby pliki mniejsze (domyślnie włączone)

• Połączenie kilku plików w jeden dla szybszych pobrań

• Odkładanie i asynchroniczne ładowanie plików

• Opóźnianie wykonania JavaScript

Masz możliwość wykluczenia optymalizacji poszczególnych skryptów, wtyczek i plików, na wypadek, gdyby zakłócać wyświetlanie zawartości interfejsu API. Ponadto możesz wykonać wszystkie powyższe, po prostu sprawdzając kilka pól w menu optymalizacji plików .

Co więcej, WP Rocket ma szereg automatycznych ulepszeń wydajności w tle, na przykład:

• Kompresja GZIP

• Wstępne ładowanie pamięci podręcznej i linków

• Krytyczna optymalizacja obrazu (wyklucza obrazy powyżej fałdu z leniwego ładowania), aby poprawić największą zawartość farby

• Automatyczne leniwe renderowanie w celu ładowania elementów pojawiających się wysoko na twoich stronach internetowych szybciej

Samo instalowanie i aktywowanie wtyczki pozwala Twojej witrynie skorzystać z 80% najlepszych praktyk wydajności i przyspiesza ją natychmiast bez żadnego wysiłku. Ponadto istnieje wiele innych funkcji, które można ręcznie aktywować, aby zwiększyć prędkość witryny, na przykład:

• Leniwe ładowanie obrazów, w tym tła CSS, filmy i iframy

• Wstępne ładowanie plików zewnętrznych i czcionek

• Samowystarczalne czcionki Google

• Optymalizacja bazy danych

• Opcje łatwego połączenia się z CDN, w tym RocketCDN

Studium przypadku: Przyspiesz wywołania API za pomocą rakiety WP

Aby lepiej zrozumieć, w jaki sposób dodanie zewnętrznego interfejsu API wpływa na wydajność witryny - i jak może pomóc wtyczka taka jak WP Rocket - konfigurujemy kontrolowane środowisko testowe. Stworzyliśmy stronę internetową Demo WordPress z manekinem i dodaliśmy mapę z Google Maps za pomocą map WP Go.

Całkowicie nieoptymalizowane, jego wyniki wglądu w Pagesspeed były następujące:

Następnie aktywowaliśmy rakietę WP i następujące funkcje:

• Minify CSS i JavaScript

• Usuń nieużywane CSS

• Załaduj odroczone JavaScript

• Opóźnij wykonanie JavaScript

To niech następujące zmiany:

To ogromna poprawa w porównaniu z linią bazową! Mimo że Twoja witryna może sprawić, że Twoja witryna będzie o wiele bardziej angażująca, dynamiczne treści, takie jak Google Maps, ma wiele dodatkowego kodu, który może spowolnić twoją witrynę. Rakieta WP łagodzi jej wpływ - a wystarczy kilka kliknięć.

Dodaj interfejsy API do WordPress bez przeciągania wydajności

API otwierają niekończące się możliwości dynamicznej, treści w czasie rzeczywistym i potężnych integracji. Dzięki wtyczkom WordPress i łatwym integracji możesz nawet dodać je do swojej witryny bez bycia programistą.

Pamiętaj, że każde połączenie API może wpłynąć na wydajność strony. Czujesz się poza głębią, optymalizując to? Rakieta WP jest tutaj, aby pomóc-spróbuj jej bez ryzyka przez 15 dni!