Cara Menambahkan API Pihak Ketiga ke WordPress (Plugin dan No Plugin)

API memungkinkan Anda untuk menghubungkan situs WordPress Anda ke layanan pihak ketiga dan sumber data. Ini memungkinkan Anda untuk menambahkan fitur dan fungsionalitas baru, membuat situs web Anda lebih interaktif dan informatif, atau mengintegrasikannya dengan alat seperti analitik, penyedia pemasaran email, atau CRM.

WordPress dapat menangani integrasi API sederhana dan kompleks menggunakan plugin serta kode khusus. Dalam tutorial ini, kami akan mengajari Anda bagaimana melakukan keduanya serta mendiskusikan dampak kinerja potensial dari integrasi API dan bagaimana mengurangi mereka.

Apa itu API dan mengapa menambahkan satu ke WordPress?

API adalah singkatan dari "Antarmuka Pemrograman Aplikasi." Dalam komputasi, antarmuka adalah sesuatu yang menghubungkan dua atau lebih komponen satu sama lain. Dalam hal ini, komponennya adalah sistem atau aplikasi yang berbeda.

API memungkinkan mereka untuk bertukar data dengan aman, secara real-time, dan dengan cara yang masing-masing dapat memahami dan memprosesnya. Mereka sangat umum di web. Jika Anda pernah masuk ke situs web menggunakan akun Google atau Facebook Anda, itu terjadi berkat API otentikasi mereka.

Di WordPress, Anda dapat menggunakan API untuk menarik informasi dari layanan eksternal ke situs WordPress Anda - atau mengirim data. Misalnya, Anda dapat menggunakannya untuk:

• Tunjukkan cuaca langsung, nilai tukar, atau pembaruan pasar saham di situs Anda.

• Menampilkan feed media sosial.

• Secara otomatis memposting konten Anda di jejaring sosial.

• Integrasikan situs Anda dengan gateway pembayaran seperti Stripe atau PayPal.

• Tunjukkan tarif pengiriman real-time di toko online Anda.

• Tarik informasi produk dari sistem gudang.

• Kirim data pelanggan dari formulir web ke layanan pemasaran email.

API juga memungkinkan Anda untuk mengotomatisasi proses di situs Anda. Misalnya, Anda dapat melakukan outsourcing optimasi gambar ke layanan seperti Imagify. Singkatnya, API membuat situs web lebih fungsional dan ramah pengguna.

Komponen API Penting

Untuk menggunakan API apa pun, Anda biasanya memerlukan beberapa bagian dasar:

• URL titik akhir : URL yang Anda kirimkan permintaan Anda. Ini memberi tahu API apa yang Anda minta (misalnya, cuaca saat ini, daftar posting blog, dll.).

• Parameter: Ini adalah nilai opsional yang Anda lewati untuk menyesuaikan permintaan, seperti lokasi, ID, istilah pencarian, atau rentang tanggal. Parameter membantu memperbaiki apa yang API berikan kembali.

• Format Data: Ini adalah format di mana data ditransmisikan. Format yang paling umum adalah JSON karena ringan dan mudah digunakan di JavaScript dan PHP. XML atau teks biasa juga merupakan opsi.

• Otentikasi: Banyak API memerlukan kunci atau token API untuk memverifikasi bahwa Anda diizinkan untuk mengakses data. Anda perlu mengirimkannya untuk melegitimasi permintaan Anda.

Tidak setiap API membutuhkan masing -masing bagian ini untuk memberi Anda tanggapan. Kami akan membahas contoh nyata lebih lanjut di bawah ini.

API REST WordPress

WordPress sendiri memiliki beberapa API terintegrasi. Yang paling menonjol adalah API REST. Istirahat adalah singkatan dari "Transfer Negara Representasional," yang berarti bahwa API menggunakan format dan arsitektur tertentu.

Tujuan dari API REST adalah untuk membuat data WordPress dapat diakses oleh sistem lain. Ini berguna, misalnya, untuk membangun aplikasi seluler untuk mengelola situs Anda. API REST juga memungkinkan apa yang disebut pengaturan WordPress tanpa kepala. Di sini, Anda menghubungkan antarmuka pengguna berbasis JavaScript dengan WordPress Back End melalui API.

Ini adalah topik penting, tetapi bukan fokus kami di sini. Sebaliknya, kami akan berurusan dengan bagaimana Anda dapat menambahkan API eksternal ke situs WordPress Anda.

Cara Menambahkan API ke WordPress dengan plugin

Ada dua cara utama Anda dapat mengintegrasikan API ke dalam situs WordPress Anda:

• Kode: Jika Anda memiliki keterampilan atau mempekerjakan seseorang yang melakukannya, Anda dapat menghubungkan situs Anda ke API menggunakan kode khusus, biasanya PHP atau JavaScript.

• Plugin: WordPress memiliki solusi plugin untuk hampir semua hal, termasuk menambah dan mengkonfigurasi API di situs web Anda.

Kami akan membahas keduanya, dimulai dengan solusi plugin. Ini nyaman untuk non-pengembang karena Anda dapat mengonfigurasinya melalui antarmuka pengguna dan menampilkan data mereka dengan kode pendek, widget, atau blok alih-alih berurusan dengan kode atau file situs web.

Akses API Google Maps

Untuk contoh pertama kami, kami akan belajar cara menambahkan peta Google Maps ke situs web Anda. Kemampuan ini dimungkinkan berkat API Google Maps, yang memungkinkan Anda menyematkan peta, menambahkan spidol seperti lokasi toko, dan mengubah desain peta.

Hal pertama yang Anda butuhkan adalah membuat akun Google Cloud gratis dengan penagihan diaktifkan. Setelah Anda memilikinya, masuk dan buat proyek baru di atas.

Akses proyek Anda dan pergi ke API & layanan baik melalui menu navigasi atau jalan pintas di dasbor.

Klik pada perpustakaan , lalu temukan peta JavaScript API .

Mengakses dan mengaktifkannya. Anda akan menerima kunci API selama proses, tetapi Anda juga dapat menemukannya di bawah kunci & kredensial nanti. Pastikan untuk membatasi penggunaannya ke domain Anda untuk keamanan.

Selanjutnya, instal dan aktifkan plugin WP Go Maps dari menu Plugin WordPress. Setelah siap, buka Peta> Pengaturan> Pengaturan Lanjutan , Tempel di Kunci API Google Maps Anda, dan simpan pengaturannya.

Setelah itu, Anda dapat membuat peta baru menggunakan antarmuka plugin.

Simpan setelah Anda puas. Anda kemudian dapat menampilkannya di situs Anda di mana pun Anda ingin menggunakan blok peta atau dengan kode pendek yang dihasilkan plugin untuk peta khusus Anda.

Selamat, Anda baru saja menambahkan API ke situs WordPress Anda.

Gunakan wpgetapi untuk hampir semua API

Contoh di atas hanya berfungsi untuk API tertentu. Jika Anda menginginkan solusi plugin yang lebih umum untuk mengintegrasikan API ke dalam situs Anda, salah satu yang paling populer adalah WPGetAPI.

Begini cara kerjanya: Untuk contoh ini, kami ingin menampilkan informasi cuaca dari openweathermap.org. Langkah pertama untuk itu adalah membuat akun untuk layanan itu dan mendaftar untuk paket (ada satu dengan 1000 panggilan gratis per hari yang dapat Anda gunakan untuk pengujian).

Semua informasi untuk menggunakan API situs tersedia dalam dokumentasi.

Siapkan panggilan API

Untuk memulai, menginstal dan mengaktifkan WPGetApi, lalu pergi ke WPGetapi> Setup di dasbor Anda.

Isi informasi di layar pertama sebagai berikut:

• Nama API: Jadi Anda tahu untuk apa masing -masing API.

• Identifier Unik: Nama API WordPress-Internal untuk menampilkannya. Hanya gunakan huruf kecil dan underscore, misalnya "open_weather_map."

• URL dasar: Alamat umum API, tanpa titik akhir. Dalam contoh ini itu https://api.openweathermap.org .

Setelah siap, simpan untuk melanjutkan.

Konfigurasikan titik akhir dan parameter Anda

Selanjutnya, klik tab API di atas untuk mengkonfigurasi sisa panggilan API.

Inilah cara melakukannya:

• ID Unik: Nama titik akhir yang akan Anda gunakan.

• Titik akhir: Ini ditambahkan ke alamat dasar (di sini, "data/3.0/onecall").

• Metode: Permintaan HTTP yang menyatakan apakah akan mengirim, membaca, membuat, memperbarui, atau menghapus sesuatu di titik akhir. Kami ingin menerima sesuatu, jadi kami menggunakan Get.

• Format Hasil: Apakah Anda ingin menerima data dalam format PHP atau JSON dari API, kami menggunakan JSON di sini.

• Timeout: Berapa lama koneksi harus tetap terbuka.

Di bawah itu, atur parameter. API peta cuaca terbuka membutuhkan tiga:

• LAT: Lintang lokasi yang Anda inginkan untuk informasi cuaca.

• LON: Seperti yang mungkin bisa Anda tebak, ini adalah bujur dari lokasi target Anda.

• APPID: Kunci API Anda, yang dapat Anda temukan di akun Anda.

API OpenWeathermap juga menerima parameter opsional:

• Kecualikan: Memungkinkan Anda untuk menghilangkan beberapa bagian dari data cuaca, misalnya perkiraan setiap hari atau setiap jam.

• Unit: Tetapkan unit pengukuran yang Anda sukai.

• Lang: Pilih bahasa output Anda.

Atur parameter di bagian string kueri dalam pasangan nilai kunci, misalnya "lat" di sebelah kiri dan "48.8542" di sebelah kanan.

Simpan, lalu klik uji titik akhir di bagian atas. Anda dapat melihat apakah itu berhasil dan meninjau responsnya.

Tampilkan output

Jika semuanya baik -baik saja, Anda dapat menggunakan tag template atau kode pendek yang disediakan WPGetapi untuk menampilkannya di situs Anda.

Ketika Anda sekarang mempratinjau halaman atau posting, Anda melihat bahwa data muncul.

Tentu saja, saat ini data JSON mentah, jadi tidak informatif untuk dilihat. Versi plugin yang dibayar memiliki fungsionalitas untuk memformat dan menyesuaikan output lebih lanjut.

Mengakses API di WordPress secara manual

Jika Anda tidak ingin pergi ke rute plugin, Anda dapat membuat panggilan API dengan tangan. Ini memberi Anda lebih banyak kontrol karena Anda dapat menyesuaikan data yang Anda minta dan outputnya segera.

Menggunakan PHP

Melanjutkan dengan contoh peta cuaca terbuka, berikut adalah fungsi PHP untuk mendapatkan informasi cuaca yang sama seperti di atas:

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

Inilah yang dilakukannya:

• Membuat panggilan untuk koordinat yang sama dan parameter lainnya.

• Menggunakan wp_remote_get () untuk membuat permintaan http mendapatkan.

• Hanya menarik suhu saat ini dari respons JSON.

• Membungkus output dalam beberapa HTML sehingga Anda dapat menata jika diperlukan.

• Mendaftarkan kode pendek yang disebut "[cuaca]" untuk mengeluarkan data di WordPress.

Letakkan fungsi dalam file functions.php tema (anak) Anda atau plugin khusus. Kemudian, gunakan kode pendek seperti sebelumnya. Inilah yang terlihat seperti di halaman:

Javascript

Anda juga dapat menggunakan JavaScript untuk terhubung ke API. Ini sangat berguna untuk pembaruan konten dinamis, permintaan AJAX, atau aplikasi satu halaman.

Berikut adalah contoh yang sangat sederhana menggunakan metode fetch () untuk menampilkan informasi acak tentang kucing dari FACTS CAT 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>

Anda dapat memasukkan ini ke dalam blok HTML khusus untuk menampilkannya langsung di WordPress.

API pihak ketiga dan kinerja situs web

Menambahkan API pihak ketiga ke WordPress dapat memengaruhi kinerja dan waktu pemuatan situs Anda jika tidak ditangani dengan benar. Setiap kali halaman memuat dan membuat panggilan API, itu menambahkan informasi untuk memuat dan meningkatkan waktu pemrosesan server. Respons API yang lambat atau tidak responsif juga dapat menunda rendering halaman Anda, tampilkan bagian halaman kosong, atau merusak situs Anda.

Untuk menghindari masalah ini, penting untuk cache respons API sehingga mereka tidak diambil pada setiap beban halaman. Banyak plugin API seperti WPGetAPI memiliki opsi bawaan untuk itu. Jika Anda menulis panggilan API dengan tangan, Anda harus mengatur mekanisme caching Anda sendiri.

Selain itu, Anda dapat mengurangi dampak kinerja dengan membatasi panggilan API ke acara tertentu (misalnya, klik pada tombol) alih -alih setiap pemuatan halaman. Opsi lain adalah menjadwalkan panggilan API menggunakan WP_CRON () dan menyimpan hasilnya untuk tampilan nanti.

Meningkatkan kinerja dengan plugin

Langkah efektif lainnya untuk meminimalkan efek panggilan API pada kinerja situs menggunakan WP Rocket.

Pertama -tama, plugin menambahkan caching ke situs Anda (termasuk cache seluler terpisah). Ini menciptakan versi statis dari halaman yang Anda render dan memungkinkan pengunjung untuk melihat konten yang dimuat alih -alih menunggu tanggapan API. Ini berfungsi sangat baik untuk data API yang ditampilkan menggunakan kode pendek atau PHP sisi server.

Jika Anda memuat konten API melalui JavaScript, WP Rocket membantu meningkatkan waktu pemuatannya dengan:

• Minifying JavaScript untuk membuat file lebih kecil (diaktifkan secara default)

• Menggabungkan beberapa file menjadi satu untuk unduhan yang lebih cepat

• Deferring dan secara asinkron memuat file

• Menunda eksekusi JavaScript

Anda memiliki opsi untuk mengecualikan skrip individual, plugin, dan file dari dioptimalkan, jika mengganggu tampilan konten API Anda. Plus, Anda dapat melakukan semua hal di atas dengan hanya memeriksa beberapa kotak di menu optimasi file .

Terlebih lagi, WP Rocket hadir dengan berbagai peningkatan kinerja otomatis di latar belakang, seperti:

• Kompresi Gzip

• Preloading untuk cache dan tautan

• Optimalisasi Gambar Kritis (tidak termasuk gambar di atas lipatan dari pemuatan malas) untuk meningkatkan cat konten terbesar

• Rendering malas otomatis untuk memuat elemen yang muncul tinggi di halaman web Anda lebih cepat

Hanya memasang dan mengaktifkan plugin memungkinkan situs Anda mendapat manfaat dari 80% praktik terbaik kinerja dan mempercepatnya segera tanpa upaya apa pun yang diperlukan dari Anda. Plus, ada banyak fitur lain yang dapat Anda aktifkan secara manual untuk meningkatkan kecepatan situs Anda, seperti:

• Memuat malas untuk gambar, termasuk latar belakang CSS, video, dan iframe

• Preloading file eksternal dan font

• Font Google yang menjadi tuan rumah mandiri

• Optimalisasi Basis Data

• Opsi untuk dengan mudah terhubung ke CDN, termasuk RocketCDN

Studi Kasus: Percepat panggilan API dengan WP Rocket

Untuk lebih memahami bagaimana menambahkan API eksternal mempengaruhi kinerja situs - dan bagaimana plugin seperti roket WP dapat membantu - kami mengatur lingkungan pengujian yang terkontrol. Kami membuat situs web Demo WordPress dengan konten dummy dan menambahkan peta dari Google Maps menggunakan WP Go Maps.

Benar -benar tidak dioptimalkan, hasil wawasan halaman -nya adalah sebagai berikut:

Kami kemudian mengaktifkan WP Rocket dan fitur -fitur berikut:

• Minify CSS dan JavaScript

• Hapus CSS yang tidak digunakan

• Muat JavaScript Ditangguhkan

• Tunda eksekusi javascript

Ini memungkinkan perubahan berikut:

Itu adalah peningkatan besar -besaran dibandingkan dengan baseline! Meskipun dapat membuat situs web Anda jauh lebih menarik, konten dinamis seperti Google Maps hadir dengan banyak kode tambahan, yang dapat memperlambat situs Anda. WP Rocket mengurangi dampaknya - dan yang diperlukan hanyalah beberapa klik.

Tambahkan API ke WordPress tanpa hambatan pada kinerja

API Open Tanpa Berakhir Kemungkinan untuk konten yang dinamis, real-time dan integrasi yang kuat. Berkat plugin WordPress dan integrasi yang mudah, Anda bahkan dapat menambahkannya ke situs Anda tanpa menjadi pengembang.

Perlu diingat bahwa setiap panggilan API dapat memengaruhi kinerja halaman. Merasa keluar dari kedalaman Anda mengoptimalkannya? WP Rocket ada di sini untuk membantu-cobalah bebas risiko selama 15 hari!