WordPress'e üçüncü taraf API'ler nasıl eklenir (eklenti ve eklenti yok)

API'lar, WordPress sitenizi üçüncü taraf hizmetlerine ve veri kaynaklarına bağlamanıza olanak tanır. Bu, yeni özellikler ve işlevsellik eklemenize, web sitenizi daha etkileşimli ve bilgilendirici hale getirmenize veya analitik, e -posta pazarlama sağlayıcıları veya CRM'ler gibi araçlarla entegre etmenize olanak tanır.

WordPress, eklentileri ve özel kodları kullanarak hem basit hem de karmaşık API entegrasyonlarını işleyebilir. Bu öğreticide, hem API entegrasyonlarının potansiyel performans etkisini hem de bunların nasıl hafifletileceğini nasıl tartışacağınızı öğreteceğiz.

API nedir ve neden WordPress'e bir tane ekler?

API "Uygulama Programlama Arayüzü" anlamına gelir. Hesaplamada, bir arayüz iki veya daha fazla bileşeni birbirine bağlayan bir şeydir. Bu durumda, bileşenler farklı sistemler veya uygulamalardır.

API'ler, verileri güvenli, gerçek zamanlı olarak ve her birinin bunu anlayabilmesi ve işleyebileceği bir şekilde değiştirmelerine izin verir. Web'de çok yaygındırlar. Google veya Facebook hesabınızı kullanarak bir web sitesine giriş yaptıysanız, kimlik doğrulama API'sı sayesinde gerçekleşti.

WordPress'te, WordPress sitenize harici hizmetlerden bilgi çekmek veya veri göndermek için API'leri kullanabilirsiniz. Örneğin, bunları şu şekilde kullanabilirsiniz:

• Sitenizde canlı hava durumu, döviz kurları veya borsa güncellemelerini gösterin.

• Sosyal medya yayınlarını sergileyin.

• İçeriğinizi otomatik olarak sosyal ağlara gönderin.

• Sitenizi Stripe veya PayPal gibi bir ödeme ağ geçidi ile entegre edin.

• Çevrimiçi mağazanızda gerçek zamanlı nakliye oranlarını gösterin.

• Bir depo sisteminden ürün bilgilerini çekin.

• Bir web formundan abone verilerini bir e -posta pazarlama hizmetine gönderin.

API'ler ayrıca sitenizdeki işlemleri otomatikleştirmenize izin verir. Örneğin, görüntü optimizasyonunu Imagify gibi bir hizmete dış kaynak kullanabilirsiniz. Kısacası, API'lar web sitelerini daha işlevsel ve kullanıcı dostu hale getirir.

Önemli API bileşenleri

Herhangi bir API kullanmak için genellikle birkaç temel parçaya ihtiyacınız vardır:

• Uç noktası URL : İsteğinizi gönderdiğiniz URL. Bu, API'ye ne istediğinizi söyler (örn. Mevcut hava, blog yayınlarının listesi vb.).

• Parametreler: Bunlar, konum, kimlik, arama terimleri veya tarih aralığı gibi isteği özelleştirmek için aktardığınız isteğe bağlı değerlerdir. Parametreler API'nın size ne verdiğini rafine etmeye yardımcı olur.

• Veri biçimi: Bu, verilerin iletildiği biçimdir. En yaygın format JSON'dur çünkü hem JavaScript hem de PHP'de hafif ve kullanımı kolaydır. XML veya düz metin de seçeneklerdir.

• Kimlik Doğrulama: Birçok API, verilere erişmenize izin verildiğini doğrulamak için bir API anahtarı veya jeton gerektirir. İsteğinizi meşrulaştırmak için birlikte göndermeniz gerekir.

Her API, bu parçaların her birinin size yanıt vermesini gerektirmez. Gerçek örnekleri aşağıda daha fazla tartışacağız.

WordPress Rest API

WordPress'in kendisinin entegre API'leri var. En belirgin olanı geri kalan API'dır. Dinlenme “temsili durum transferi” anlamına gelir, bu da API'nın belirli bir format ve mimari kullandığı anlamına gelir.

REST API'sının amacı, WordPress verilerini diğer sistemler için erişilebilir hale getirmektir. Bu, örneğin, sitenizi yönetmek için mobil uygulamalar oluşturmak için yararlıdır. Geri kalan API ayrıca başsız WordPress kurulumlarını da sağlar. Burada, API üzerinden WordPress arka ucuyla özel, genellikle JavaScript tabanlı bir kullanıcı arayüzü bağlarsınız.

Bu önemli bir konudur, ancak buradaki odak noktamız değil. Bunun yerine, WordPress sitenize nasıl harici API'ler ekleyebileceğinizle ilgileneceğiz.

Bir eklenti ile WordPress'e API nasıl eklenir

API'leri WordPress sitenize entegre etmenin iki ana yolu vardır:

• Kod: Becerilere sahipseniz veya yapan birini işe alıyorsanız, sitenizi genellikle PHP veya JavaScript olmak üzere özel kod kullanarak bir API'ya bağlayabilirsiniz.

• Eklentiler: WordPress, web sitenizde API'leri ekleme ve yapılandırma gibi neredeyse her şey için eklenti çözümlerine sahiptir.

Eklenti çözümlerinden başlayarak her ikisini de gözden geçireceğiz. Bunlar geliştiriciler için rahattır, çünkü bunları bir kullanıcı arayüzü aracılığıyla yapılandırabilir ve verilerini kod veya web sitesi dosyalarıyla uğraşmak yerine kısa kodlar, widget'lar veya bloklarla görüntüleyebilirsiniz.

Google Haritalar API'sına erişin

İlk örneğimiz için, web sitenize bir Google Haritalar Haritası ekleyeceğinizi öğreneceğiz. Haritalar yerleştirmenize, mağaza konumları gibi işaretleyiciler eklemenize ve harita tasarımını değiştirmenize olanak tanıyan Google Haritalar API'sı sayesinde bu yetenek mümkündür.

İhtiyacınız olan ilk şey, faturalandırma etkinken ücretsiz bir Google Cloud hesabı oluşturmaktır. Bunu aldıktan sonra giriş yapın ve en üstte yeni bir proje oluşturun.

Projenize erişin ve Navigasyon Menüsü veya Gösterge Tablosu'ndaki kısayol üzerinden API'lere ve Hizmetlere gidin.

Kütüphaneye tıklayın, ardından Haritalar JavaScript API'sını bulun.

Erişin ve etkinleştirin. İşlem sırasında bir API anahtarı alacaksınız, ancak daha sonra anahtarlar ve kimlik bilgileri altında bulabilirsiniz. Kullanımını güvenlik için alan adınızla sınırladığınızdan emin olun.

Ardından, WordPress eklentileri menüsünden WP Go Haritalar eklentisini yükleyin ve etkinleştirin. Hazırlandıktan sonra Haritalar> Ayarlar> Gelişmiş Ayarlar'a gidin, Google Haritalar API tuşunuza yapıştırın ve ayarları kaydedin.

Bundan sonra, eklentinin arayüzünü kullanarak yeni bir harita oluşturabilirsiniz.

Memnun olduğunuzda kaydedin. Daha sonra, harita bloğunu kullanmak istediğiniz yerde veya eklentinin özel haritanız için oluşturduğu kısa kodla sitenizde görüntülenebilirsiniz.

Tebrikler, WordPress sitenize bir API eklediniz.

Hemen hemen her API için wpgetapi kullanın

Yukarıdaki örnek yalnızca belirli bir API için çalışır. API'leri sitenize entegre etmek için daha genel bir eklenti çözümü istiyorsanız, en popüler olanlardan biri WPGetApi'dir.

İşte böyle çalışır: Bu örnek için, openweathermap.org adresinden hava durumu bilgilerini görüntülemek istiyoruz. Bunun ilk adımı, bu hizmet için bir hesap oluşturmak ve bir plana kaydolmaktır (test için kullanabileceğiniz günde 1000 ücretsiz aramaya sahip bir tane vardır).

Sitenin API'sını kullanmak için tüm bilgiler belgelerde mevcuttur.

API çağrısını ayarlayın

Başlamak için WPGETAPI'yi yüklemek ve etkinleştirmek için, panelinizde WPGetApi> Kurulumu'na gidin.

İlk ekrandaki bilgileri aşağıdaki gibi doldurun:

• API Adı: Yani her API'nın ne için olduğunu biliyorsunuz.

• Benzersiz Tanımlayıcı: API'nin WordPress-Internal Adı onu görüntülemek. Sadece küçük harf ve alt çizgiler kullanın, örneğin “open_weather_map”.

• Temel URL: API'nın genel adresi, uç noktası olmadan. Bu örnekte https://api.openweathermap.org .

Hazırlandıktan sonra devam etmek için kaydedin.

Uç noktanızı ve parametrelerinizi yapılandırın

Ardından, API çağrısının geri kalanını yapılandırmak için API'nın sekmesini tıklayın.

İşte bunu nasıl yapacağınız:

• Benzersiz Kimlik: Kullanacağınız uç noktanın adı.

• Son nokta: Bu, temel adrese eklenir (burada “Veri/3.0/OneCall”).

• Yöntem: Uç noktada bir şey gönderip göndermeyeceğini, okumaya, oluşturulacağını, güncelleneceğini veya silip silmeyeceğini belirten HTTP isteği. Bir şey almak istiyoruz, bu yüzden Get kullanıyoruz.

• Sonuçlar Biçimi: Verileri API'dan PHP veya JSON formatında almak istiyorsanız, JSON'u burada kullanıyoruz.

• Zaman aşımı: Bağlantının ne kadar açık kalması gerektiği.

Bunun altında parametreleri ayarlayın. Açık Hava Durumu Haritası API'si üç gerektirir:

• LAT: Hava durumu bilgisini istediğiniz konumun enlemi.

• Lon: Muhtemelen tahmin edebileceğiniz gibi, bu hedef konumunuzun boylamıdır.

• Appid: Hesabınızda bulabileceğiniz API anahtarınız.

OpenWeathermap API'si de isteğe bağlı parametreleri kabul eder:

• EXTREP: Hava durumu verilerinin bazı bölümlerini atlamanızı sağlar, örneğin günlük veya saatlik tahminler.

• Birimler: Tercih ettiğiniz ölçüm birimlerini ayarlayın.

• Lang: Çıktı dilinizi seçin.

Sorgu dizesi bölümündeki parametreleri anahtar değer çiftleri, örneğin solda “LAT” ve sağda “48.8542” olarak ayarlayın.

Kaydet, ardından üstteki son noktayı test edin. Çalışıp çalışmadığını görebilir ve yanıtı gözden geçirebilirsiniz.

Çıktıyı görüntüleyin

Her şey yolundaysa, WPGetApi'nin sitenizde görüntülemesi için sağladığı şablon etiketini veya kısa kodunu kullanabilirsiniz.

Şimdi sayfayı veya gönderiyi önizlediğinizde, verilerin göründüğünü görürsünüz.

Tabii ki, şu anda RAW JSON verileri, bu yüzden bakmak bilgilendirici değil. Eklentinin ücretli sürümü, çıktıyı daha fazla biçimlendirmek ve özelleştirme işlevselliğine sahiptir.

WordPress'te API'lere manuel olarak erişmek

Eklenti yoluna gitmek istemiyorsanız, API çağrıları elle oluşturabilirsiniz. Bu size daha fazla kontrol sağlar, çünkü talep ettiğiniz verileri ve çıktısını hemen özelleştirebilirsiniz.

PHP kullanarak

Açık hava haritası örneği ile devam ederek, yukarıdaki hava bilgilerini almak için bir PHP işlevi:

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

İşte ne yapıyor:

• Aynı koordinatları ve diğer parametreleri çağırır.

• HTTP GET isteğini sağlamak için wp_remote_get () kullanır.

• Sadece akım sıcaklığını JSON tepkisinden çeker.

• Gerekirse stil yapabilmeniz için çıkışı bazı HTML'deki sarar.

• WordPress'teki verileri çıkarmak için “[hava durumu]” adlı bir kısa kodu kaydeder.

İşlevi ((alt) temanızın veya özel bir eklentinizin functions.php dosyasına koyun. Ardından, kısa kodu eskisi gibi kullanın. İşte sayfada neye benziyor:

Javascript

API'lere bağlanmak için JavaScript'i de kullanabilirsiniz. Bu özellikle dinamik içerik güncellemeleri, AJAX istekleri veya tek sayfalık uygulamalar için kullanışlıdır.

İşte Cat Facts API'sinden kediler hakkında rastgele bilgileri görüntülemek için Fetch () yöntemini kullanan çok basit bir örnek:

 <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>

WordPress'te hemen görüntülemek için bunu özel bir HTML bloğuna girebilirsiniz.

Üçüncü taraf API'ler ve web sitesi performansı

WordPress'e üçüncü taraf API'leri eklemek, sitenizin performansını ve yükleme sürelerini düzgün bir şekilde ele alamazsa etkileyebilir. Bir sayfa her yüklediğinde ve bir API çağrısı yaptığında, yüklemek için bilgi ekler ve sunucu işleme süresini artırır. Yavaş veya tepkisiz API yanıtları, sayfa oluşturma işleminizi geciktirebilir, boş sayfa bölümlerini gösterebilir veya sitenizi kırabilir.

Bu sorunlardan kaçınmak için, API yanıtlarını her sayfa yüküne getirilmemeleri için önbelleğe almak önemlidir. WPGetApi gibi birçok API eklentisi bunun için yerleşik seçeneklere sahiptir. API çağrılarını elle yazarsanız, kendi önbellekleme mekanizmalarınızı ayarlamanız gerekir.

Ayrıca, API çağrılarını her sayfa yükü yerine belirli olaylarla sınırlandırarak performans etkisini azaltabilirsiniz. Başka bir seçenek de API çağrılarını wp_cron () kullanarak planlamak ve sonuçları daha sonra ekran için saklamaktır.

Bir eklenti ile performansı geliştirmek

API çağrılarının site performansı üzerindeki etkisini en aza indirmek için bir başka etkili adım WP roketi kullanmaktır.

Her şeyden önce, eklenti sitenize önbellekleme ekler (ayrı bir mobil önbellek dahil). Bu, oluşturulan sayfalarınızın statik sürümlerini oluşturur ve ziyaretçilerin API yanıtlarını beklemek yerine önceden yüklenmiş içeriği görmelerini sağlar. Bu, özellikle kısa kodlar veya sunucu tarafı PHP kullanılarak görüntülenen API verileri için iyi çalışır.

API içeriğini JavaScript aracılığıyla yüklerseniz, WP Rocket yükleme süresini iyileştirmeye yardımcı olur:

• Dosyaları daha küçük hale getirmek için JavaScript Minifiation (varsayılan olarak etkinleştirilir)

• Daha hızlı indirmeler için birkaç dosyayı bir araya getirmek

• Dosyaları ertelemek ve eşzamansız yükleme

• JavaScript yürütmeyi geciktirme

API içeriğinizin görüntülenmesine müdahale etmesi durumunda, tek tek komut dosyalarını, eklentileri ve dosyaları optimize edilmekten hariç tutma seçeneğiniz vardır. Ayrıca, Dosya Optimizasyonu menüsünde birkaç kutuyu kontrol ederek yukarıdakilerin hepsini yapabilirsiniz.

Dahası, WP Rocket arka planda bir dizi otomatik performans iyileştirmesi ile birlikte gelir: örneğin:

• GZIP Sıkıştırma

• Önbellek ve bağlantılar için önceden yükleme

• En büyük memnun boyayı iyileştirmek için kritik görüntü optimizasyonu (tembel yüklemeden katlanan görüntüleri hariç tutar)

• Web sayfalarınızda daha hızlı görünen öğeleri yüklemek için otomatik tembel oluşturma

Eklentiyi yüklemek ve etkinleştirmek, sitenizin performans en iyi uygulamalarının% 80'inden yararlanmasını ve sizden herhangi bir çaba harcamadan hemen hızlandırmasını sağlar. Ayrıca, site hızınızı artırmak için manuel olarak etkinleştirebileceğiniz birçok özellik vardır:

• CSS arka planları, videolar ve iframes dahil görüntüler için tembel yükleme

• Harici dosyaları ve yazı tiplerini önceden yükleme

• Kendi kendine barındıran Google Yazı Tipleri

• Veritabanı optimizasyonu

• Rocketcdn dahil bir CDN'ye kolayca bağlanma seçenekleri

Vaka çalışması: WP Roket ile API çağrılarını hızlandırın

Harici bir API eklemenin site performansını nasıl etkilediğini ve WP roket gibi bir eklentinin nasıl yardımcı olabileceğini daha iyi anlamak için kontrollü bir test ortamı oluşturduk. Kukla içeriğe sahip bir Demo WordPress web sitesi oluşturduk ve WP Go Haritalar'ı kullanarak Google Haritalardan bir harita ekledik.

Tamamen optimize edilmemiş, sayfa içgörü sonuçları aşağıdaki gibidir:

Daha sonra WP roketini ve aşağıdaki özellikleri etkinleştirdik:

• Minify CSS ve JavaScript

• Kullanılmayan CSS'yi kaldırın

• Yük javascript ertelenmiş

• Gecikme JavaScript Yürütme

Bu aşağıdaki değişikliklere izin verdi:

Bu, taban çizgisine kıyasla büyük bir gelişme! Web sitenizi çok daha ilgi çekici hale getirebilse de, Google Haritalar gibi dinamik içerik, sitenizi yavaşlatabilecek çok fazla ekstra kodla birlikte gelir. WP Roket etkisini azaltıyor - ve gereken tek şey birkaç tıklama.

Performansta sürükleme olmadan WordPress'e API'ler ekleyin

API'lar dinamik, gerçek zamanlı içerik ve güçlü entegrasyonlar için sonsuz olasılıklar açar. WordPress eklentileri ve kolay entegrasyonlar sayesinde, bunları geliştirici olmadan sitenize bile ekleyebilirsiniz.

Her API çağrısının sayfa performansını etkileyebileceğini unutmayın. Optimize etme derinliğinizden mi çıkıyorsunuz? WP Rocket yardım etmek için burada-15 gün boyunca risksiz deneyin!