WordPress'te Bir Dizin Web Sitesine Kolayca Konum Arama Ekleme

Yayınlanan: 2021-02-15

Dizin web sitenizi iyileştirmenin birçok farklı yolu vardır ve bunlardan biri konum tabanlı aramayı etkinleştirmektir. Yelp, TripAdvisor, Craigslist veya konum tabanlı arama gerektiren diğer benzer bir dizin veya ilan sitesi çalıştırıyorsanız, bunu Google Haritalar ile entegre ederek kolayca yapabilirsiniz. Bazı kullanıcılar kendi bölgelerindeki ürünleri, hizmetleri veya yerleri arayabildiklerinden önemli bir özelliktir. Ayrıca, Google Haritalar platformunun, web siteniz orta düzeyde trafik alıyorsa yeterli olması gereken ücretsiz bir aylık sınırı vardır.

Bu adım adım öğreticide, dizin web sitenize konum aramayı nasıl ekleyeceğinizi açıklayacağız. Göz açıp kapayıncaya kadar bir dizin web sitesi oluşturmanıza izin veren ücretsiz bir WordPress eklentisi olan HivePress'i kullanacağız. Ayrıca, Google Haritalar ile entegrasyon için HivePress Geolocation uzantısıyla birlikte ücretsiz bir WordPress dizin teması olan ListingHive'ı kullanacak.

Ancak, zaten başka bir eklenti veya tema ile oluşturulmuş bir dizin web siteniz varsa, ilk adımları atlayabilir ve “Nasıl Düzeltilir” bölümüne gidebilirsiniz. Hata! Bir şeyler yanlış gitti. Bu sayfa, en yaygın hataları gidermek için Google Haritalar'ı doğru şekilde yüklemedi” ” bölümü.

O halde ilk adıma geçelim!

HivePress'i Yükleme

Her şeyden önce, HivePress'i yüklemeniz gerekir. WordPress'te başka bir ücretsiz eklenti olarak yükleyebilirsiniz. Eklentiler > Yeni Ekle bölümüne gidin ve arama çubuğuyla bulun, ardından “Etkinleştir” düğmesine tıklayarak kurun ve son olarak etkinleştirin. Yüklemeyi tamamladığınızda, bir sonraki adıma, uzantıları yüklemeye geçebilirsiniz.

Ayrıca, zor bulursanız, HivePress'i doğrudan WordPress panosundan yüklemek için aşağıdaki ekran görüntüsünü takip edebilirsiniz.

Uzantıları Yükleme

Bir sonraki adım, kullanıcıların listeleri konuma göre aramasına izin vermek için Coğrafi Konum uzantısını yüklemektir. Yüklemek için HivePress bölümünün üzerine gelin ve "Uzantılar" bağlantısını tıklayın. Listeden Geolocation uzantısını bulun, “Yükle” düğmesine tıklayın ve son olarak uzantıyı etkinleştirin.

Ayrıca, aşağıdaki ekran görüntüsü, adım adım takip edebilmeniz için HivePress uzantılarını yüklemenin genel sürecini gösterir.

Yeni Proje Oluşturma

Eklenti kurulumunu ve Geolocation uzantısını tamamladığınızda, sıra Google Cloud Platform'da bir proje oluşturmaya gelir. Halihazırda bir Google hesabınız olduğunu varsayarsak, bu gösterge tablosuna sorunsuz bir şekilde erişebilmelisiniz. Ancak, bir hesabınız yoksa, bir Google hesabına kaydolmak çok önemlidir.

Şimdi “Proje Oluştur” düğmesine tıklayarak bir proje oluşturmanız, ardından adını vermeniz ve son olarak “Oluştur” düğmesine tıklamanız gerekiyor.

Google Cloud Platform'da yeni bir proje oluşturma.

Faturalandırmayı Ayarlama

Şimdi, Google'da bir faturalandırma hesabınız yoksa, proje faturalandırmasını etkinleştirmek için yeni bir tane oluşturmanız gerekir. Ancak endişelenmeyin, artık herhangi bir ödeme yapmanıza gerek yok, bu, Google Haritalar API'sini kullanmak için gerekli koşullardan yalnızca biri. Bağlantıyı takip edin ve ödeme yöntemi ayrıntıları da dahil olmak üzere tüm form alanlarını doldurun.

Her ay 200 ABD doları tutarında ücretsiz kredi alırsınız ve çoğu durumda bu, web sitenizde Google hizmetlerini kullanma masraflarını karşılamaya fazlasıyla yeterlidir. Ayrıca, ücretsiz krediyi asla aşmamanız için limitler ve bildirimler ayarlamak mümkündür. Nasıl çalıştığı hakkında daha iyi bir fikir edinmek ve haritaları ücretsiz olarak kullanabilmenizi sağlamak için Fiyatlandırmayı kontrol edebilirsiniz.

Fatura bilgilerinizi ekledikten sonra etkinleştirmek istediğiniz API türlerini içeren bir açılır pencere göreceksiniz. Aşağıdaki ekran görüntüsündeki gibi Haritalar ve Yerler'i seçin ve “Etkinleştir” düğmesine tıklayın. Ayrıca, açılır pencere yoksa, bu API'leri Google API Kitaplığı sayfası aracılığıyla etkinleştirebilirsiniz.

Google API'lerini etkinleştirme.

API Anahtarı Oluşturma

Bir sonraki adım, web siteniz için bir API anahtarı oluşturmaktır. Bunu yapmak için, Kimlik Bilgileri sayfasına gidin ve projenizi seçin.

API anahtarı oluşturma.

Kimlik Bilgileri sayfasında, önceden oluşturulmuş API Anahtarını görebilirsiniz. Faturalandırma hesabınızı yeni oluşturduysanız, otomatik olarak bir anahtar oluşturulabilir. Bu durumda, düzenlemek için üzerine tıklamanız yeterlidir. Ancak sayfada API Anahtarı yoksa, Kimlik Bilgileri Oluştur > API anahtarı bölümünde yeni bir tane oluşturabilirsiniz.

API Anahtarının nasıl oluşturulacağına ilişkin örnek.

Ardından, Uygulama kısıtlamalarını ayarlayarak API Anahtarınızı ayarlamanız gerekir. Bu önemlidir çünkü anahtarı basitçe gömerseniz, web sitenizin kaynak kodunda düz metin olarak görünecektir. Bu nedenle, başkalarının projeleri için API Anahtarınızı kullanamaması için bunu kısıtlamanız gerekir. Bunu yapmak için, yalnızca web sitenizden API isteklerine izin vermek için HTTP yönlendiricisini eklemeniz yeterlidir. Google Haritalar'ın web sitenizin tüm sayfalarında çalışması için web sitesi adresinizi ayarlayın, ancak web sitesi alt sayfalarından herhangi birinden API isteklerine izin vermek için sonuna “/*” bölümünü ekleyin.

Uygulamanın kısıtlamalarının nasıl ekleneceğine dair örnek.

Şimdi bir sonraki alanda API kısıtlamaları ayarlamanız gerekiyor. Anahtarı kısıtla'yı tıklayın ve açılır menüden Maps JavaScript API, Places API, Geocoding API'yi seçin. Bahsedilen API'lerden bazıları listelenmemişse, önce bunları Haritalar API Kitaplığı sayfasında etkinleştirmeniz gerekir. Açılır menüde üç Google API'sinin tümü etkinleştirilip seçildikten sonra, "Kaydet" düğmesini tıklayın.

API kısıtlamalarının nasıl ekleneceğine ilişkin örnek.

Google Haritalar Entegrasyonunu Etkinleştirme

Bu kadar! Az önce bir API Anahtarı oluşturdunuz ve son dokunuş, web sitenizde Google Haritalar'ı etkinleştirmektir. Öncelikle API'ler ve Hizmetler > Kimlik Bilgileri sayfasında API Anahtarını kopyalayın. Şimdi, HivePress eklentisini kullanıyorsanız, WordPress kontrol panelinize gidin ve HivePress > Ayarlar > Entegrasyonlar > Google Haritalar bölümüne gidin. Ardından API Anahtarınızı uygun alana yapıştırın ve web sitenize konum araması eklemek için "Değişiklikleri Kaydet" düğmesini tıklayın.

WordPress web sitesine konum aramanın nasıl ekleneceğine dair örnek.

Tebrikler! Bu andan itibaren web siteniz Google Haritalar ile entegredir ve artık Listeler bölümünde mevcut listelemelere konum ekleyebilirsiniz. Ayrıca, kullanıcıların yeni eklenen listeler için konum belirlemesi gerekecektir. Ek olarak, web sitenizde bir konum arama alanı ve bir Google Haritası vardır, böylece bunu deneyebilir ve bazı listeleri konumlarına göre arayabilirsiniz.

WordPress tarafından oluşturulmuş web sitesinde konum tabanlı arama.
Konum tabanlı arama özelliği örneği.

Sorun giderme

Oluşturduğunuz API anahtarıyla ilgili herhangi bir sorun varsa, harita "Hata! Bir şeyler yanlış gitti. Bu sayfa Google Haritalar'ı düzgün yükleyemedi” hatası. Bir API anahtarı ayarlamak çok kullanıcı dostu bir süreç olmadığından ve kullanıcılar genellikle bazı kurulum adımlarını atladığından bu oldukça yaygın bir hatadır. Ancak, sorunun köklerini biliyorsanız, hemen düzeltebilirsiniz.

Bu hatanın nedenini bulmak için JavaScript Konsolunu açmanız gerekir. Tarayıcınıza bağlı olarak değişen birkaç tuşa basarak açabilirsiniz. JavaScript Konsolunun nasıl açılacağını açıklayan StackOverflow'daki yanıtı kontrol edin. Chrome tarayıcı kullanıyorsanız, açmak için CTRL+Shift+I basmanız yeterlidir. Açtığınızda, bunun gibi bir hata mesajını görmelisiniz.

"Hata! Bir şeyler yanlış gitti. Bu sayfa Google Haritalar'ı düzgün yüklemedi" hatası

Düzeltebilmeniz için hataya tam olarak neyin neden olduğunu bilmek önemlidir. Birkaç farklı hata olabilir, ancak en sık görülenlerin nasıl çözüleceğini göstereceğiz:

  • EksikKeyMapError;
  • GeçersizKeyMapError;
  • ApiNotActivatedMapError;
  • RefererNotAllowedMapError.

Ancak, yukarıda listelenmeyen bir hatanız varsa, neyin yanlış olduğunu ve nasıl düzeltileceğini öğrenmek için Google Haritalar API Hata Mesajları belgelerine bakın.

EksikKeyMapHatası

Bu hata, hiç API anahtarı olmadığı anlamına gelir, bu nedenle web sitenizde Google Haritalar'ı etkinleştirmek istiyorsanız bir tane oluşturmanız gerekir. Bu hatayı alırsanız, bir API Anahtarı oluşturmak ve haritaları doğru bir şekilde kurmak için ilk adımdan başlayarak bu öğreticiyi izlemenizi öneririz.

GeçersizKeyMapError

Bu hata, yanlış API Anahtarını kullandığınızda görünür. Büyük olasılıkla onu oluşturdunuz, ancak web sitenize doğru şekilde eklemediniz. Bu hatayı düzeltmek için Kimlik Bilgileri sayfasına gidin ve API Anahtarını kopyalayın.

Google API Anahtarı örneği.

HivePress eklentisini ve Geolocation uzantısını kullanıyorsanız, WordPress Kontrol Paneli > HivePress > Ayarlar > Entegrasyonlar > Google Haritalar bölümüne gidin, API Anahtarınızı uygun alana yapıştırın ve "Değişiklikleri Kaydet" düğmesini tıklayın.

ApiNotActivatedMapError

Bu tür bir hata alırsanız, gerekli API'leri etkinleştirmemişsiniz demektir. Google Haritalar API Kitaplığı'nda birçok farklı API vardır, bu nedenle Kitaplığa gitmeniz ve projeniz için gerekli olanları etkinleştirmeniz gerekir. Bunları etkinleştirdikten sonra, Kimlik Bilgileri bölümündeki API anahtarı ayarlarınızdaki API Kısıtlamaları bölümüne de eklemeyi unutmayın.

Örneğin, HivePress eklentisini Geolocation uzantısıyla kullanıyorsanız ve dizin web sitenize konum araması eklemek istiyorsanız, şu Google API'lerini etkinleştirmeniz ve bunlara erişim izni vermeniz gerekir: Maps JavaScript API, Places API, Geocoding API . Gerekli API'ler ile ekran görüntüsüne göz atabilirsiniz.

RefererNotAllowedHarita Hatası

Bu hata, API yönlendiren kısıtlamaları doğru ayarlanmadığında oluşur. Örneğin, haritalar web sitenizin bir sayfasında çalışıyor ve diğerlerinde çalışmıyorsa, büyük olasılıkla aynı sorunla karşılaşmışsınızdır.

İyi haber şu ki, bir API Anahtarını doğru bir şekilde ayarlayıp girdiniz ve düzeltmeniz gereken yalnızca küçük bir ayrıntı var. Kimlik Bilgileri sayfasına gidin ve düzenlemek için API Anahtarınızı tıklayın. Uygulama kısıtlamaları bölümünde, "HTTP yönlendiricileri (web siteleri)" öğesini seçin. Ardından, aşağıda gösterildiği gibi web sitesi kısıtlamalarını doldurun, ancak “örnek” i alan adınızla değiştirin ve “Kaydet” düğmesine tıklayın. Ayarların geçerlilik kazanması 5 dakika kadar sürebilir.

API Anahtarı için web sitesi kısıtlamalarının nasıl ekleneceğine ilişkin örnek

Google Haritalar'ın web sitenizin tüm sayfalarında çalışması için, web sitesi alt sayfalarından herhangi birinden API isteklerine izin vermek için sonuna “/*” bölümünün eklenmesi önemlidir.

Hala Çalışmıyor

  • API Anahtarı kısıtlamalarınızda bir şeyi değiştirirseniz – ayarların etkinleşmesi için 5 dakikaya kadar bekleyin;
  • Hâlâ bir hata varsa – daha fazla ayrıntı için JavaScript konsolunu tekrar kontrol edin. İlkini çözdükten sonra bir hata olabilir;
  • Tarayıcı önbelleğini temizlemeyi de deneyebilirsiniz.

Çözüm

Bu kadar! Bir vasiyet varsa, bir yol vardır derler. Dizin web sitenize bir konum arama özelliği eklediniz ve artık kullanıcılarınız listeleri konuma göre arayabilir. Dizinlerin çoğu için gerçekten önemli bir özellik. Google Haritalar'ı eklemek biraz karmaşık bir süreç gibi görünse de, buna değer. Web sitenize konum aramayı eklediğinizde, kullanıcı deneyimini olumlu yönde etkileyecektir. UX, iyi trafiğin temel taşlarından biri olduğu için herhangi bir web sitesi için son derece önemlidir.

Gördüğünüz gibi, herhangi bir kodlama becerisi olmadan Google Haritalar'ı web sitenize entegre edebilirsiniz. Dizin web sitenizi oluşturmak için hangi eklentiyi kullanacağınıza henüz karar vermediyseniz, HivePress'i düşünebilirsiniz. Her türden dizin ve listeleme web sitesi oluşturmanıza olanak tanır. Ayrıca, konum tabanlı aramayı etkinleştiren ücretsiz bir uzantı ve yararlı bulabileceğiniz birkaç ücretsiz özellik daha içerir.

Ek olarak, makalelerimize göz atmaktan çekinmeyin:

  • En popüler ücretsiz WordPress dizin eklentileri
  • En iyi WordPress dizin temaları
  • WordPress dizin sitesi oluştururken kaçınılması gereken hatalar