Online işletmelerin patlamasıyla WordPress, özellikle son zamanlarda çok sayıda kullanıcının e-ticaret mağazalarını oluşturmasına ve işletmesine yardımcı oldu. Buna rağmen, yerel işletmeler hala pazar payının önemli bir bölümünü temsil ediyor, bu da alıcıların sizi bulması için bir yol bulmanızın hayati önem taşıdığı anlamına geliyor. Bunu yapmanın en kolay yolu, işletmenize ait WordPress web sitesine bir mağaza bulucu eklemektir.
Mağaza bulucuları, müşterilerin mağazanızı bulmak, mağazanıza nasıl ulaşacaklarına ilişkin yol tarifleri almak ve hatta konumu arkadaşlarıyla paylaşmak için kullanabilecekleri etkileşimli haritalardır. Bonus olarak, web siteniz daha fazla güvenilirlik kazanacak ve bu süreçte online varlığını büyük olasılıkla artıracaktır. Bu makalede, iki olası yöntemi kullanarak bir Google Haritalar mağaza bulucuyu nasıl ekleyebileceğinizi tartışacağız. Hangisinin sizin için daha uygun olduğuna en iyi şekilde karar verebilmeniz için her ikisini de ayrıntılı olarak ele alacağız, avantajlarını ve dezavantajlarını da ele alacağız.
Makalenin belirli bir bölümüne atlamak isterseniz, aşağıdaki bağlantılardan birine tıklamanız yeterlidir:
-
iframe gömme
-
WordPress eklentisi kullanma
-
Bonus ipucu – IP adresinizi bulma
WordPress’te bir Google Harita mağaza bulucu ekleme
Mağaza bulucuları görüntülemenin WordPress web siteniz için neden faydalı olduğu açık olsa da, bunu nasıl yapabileceğiniz sorusu hala devam ediyor. Bazı WordPress temaları, sayfalarınızda bir Google Haritası görüntülemenize izin veren kısa kodlar sunabilir. Bu durum WordPress web sitenize bir Google Harita mağaza bulucu eklemek için kullanabileceğiniz en kolay yol olacaktır. QodeInteractive’in tüm temaları, konumunuzu görüntülemenize yardımcı olacak bir Google Haritalar kısa kodu içerir.
Fakat Google Haritalar’ı web sitenize eklemenin yollarını sunan bir tema kullanmıyorsanız, uygulayabileceğiniz alternatif yaklaşımlar vardır. Bunlar, basit bir harita iframe’i yerleştirmeyi veya uygun WordPress eklentilerini kullanarak pinlerle özel haritalar oluşturmayı içerir. Bu yazıda, bu iki yöntemde size rehberlik edeceğiz. Her ikisi de tartışacağımız artıları ve eksileri ile birlikte gelir. Hangisinin ihtiyaçlarınıza uygun olduğuna karar vermeden önce her iki yöntemi de dikkatlice düşünmelisiniz.
Ayrıca Google Haritalar’a bir alternatif istiyorsanız, Bing haritalarını web sitenize eklemekle ilgili yazımıza da göz atabilirsiniz. Bunu söyledikten sonra başlayalım.
İframe gömme
Tüm WordPress kullanıcıları, kullandıkları temadan bağımsız olarak, bir Google Haritalar mağaza bulucu eklemek için sayfalarının içeriğine bir harita iframe’i yerleştirebilir. Bu yöntem, yalnızca birkaç adım gerektirdiğinden hem ücretsiz hem de uygulaması kolaydır.
Fakat bu yöntemin en büyük dezavantajı, onunla yalnızca tek bir mağaza konumunu gösterebilmenizdir. Bu yüzden birden çok mağazanız varsa veya birden fazla konumda ofisiniz varsa, bunları tek bir haritada gösteremezsiniz. Ayrıca bu yöntem, özel alanlar, ayarlar veya stilizasyon ekleme gibi ekstra harita değişikliklerine izin vermez. Fakat haritanın yalnızca tek bir konumu göstermesine ihtiyacınız varsa, sayfalarınızdan birine bir harita iframe’i nasıl yerleştireceğinizi açıkladığımız aşağıdaki adımları takip edebilirsiniz.
Öncelikle Google Haritalar sayfasını ziyaret edin ve mağazanızın adresini girin. Girdiğiniz adresi çevreleyen genel alanın haritası sağda gösterilecek ve tam adres bir raptiye ile işaretlenecektir. Haritayı paylaşmadan önce yakınlaştırma seviyesini ayarladığınızdan emin olun. Bunu yaptıktan sonra, haritayı paylaşmak için soldaki menüden Paylaş düğmesine basın.
Bu durum iki sekmeli bir açılır pencere açacaktır: Bir bağlantı gönder ve Bir Harita Yerleştir. Bir bağlantı gönder varsayılan olarak açık olacaktır. Embed a map sekmesine geçin ve ardından HTML’yi Kopyala bağlantısına basın.
Web sitenizde görüntülenecek iframe boyutunu önceden düzenleyebilirsiniz. Boyut seçenekleri arasında küçük, orta (varsayılan seçenek), büyük ve iframe’in genişliğini ve yüksekliğini girmenize olanak tanıyan özel boyut bulunur. Bu makale için büyük boyutlu bir iframe eklemeyi seçtik.
Bundan sonraki şey, kopyaladığınız HTML kodunu sayfalarınızdan birine eklemektir. Mevcut bir sayfaya eklemek ya da bu amaçla yeni bir sayfa oluşturmak size kalmış. Her iki durumda da bu kodun, kullandığınız sayfa oluşturucunun özel HTML öğesine yapıştırılması gerekir.
Gutenberg kullanıyorsanız, Özel HTML bloğunu ekleyin ve kopyalanan HTML’yi bunun içine ekleyin. Daha sonra sayfadaki değişiklikleri kaydetmek için Güncelle düğmesine basın.
Öte yandan, tercih ettiğiniz editör olarak WPBakery kullanıyorsanız, HTML kodunu bir Ham HTML öğesinin içine eklemelisiniz. Elementor kullanıyorsanız, HTML kodunu bir HTML widget’ının içine ekleyin.
Kodu ekledikten sonra, katıştırılmış haritanın web sitenizde nasıl göründüğünü görmek için sayfanızı kontrol edin. Lekker temasıyla yapılmış bir sayfada haritanın nasıl göründüğünü aşağıda görebilirsiniz.
WordPress eklentisi kullanma
Bir Google Haritalar mağaza bulucu eklemenin diğer olası yöntemi, Google Haritalar API anahtarlarını entegre eden bir WordPress eklentisi kullanmaktır. Bu yöntemin avantajı, birden çok sabitlenmiş mağaza konumuna sahip özel bir harita oluşturabilmeniz ve eklenti seçeneklerini kullanarak ek alanlarını ve stil ayarlarını özelleştirebilmenizdir.
Fakat haritanın gösterilebilmesi ve düzgün çalışabilmesi için Google API anahtarlarına ihtiyaç duyulduğu için bu yöntemin bazı maliyetleri olduğu anlamına gelir. Başlamadan önce fatura bilgilerinizi vermeniz gerekecektir. Ücretler, API çağrılarının sayısına göre hesaplanır; bu, web sitenizin çok sayıda ziyaretçisi varsa oldukça pahalı olabileceği anlamına gelir. Bu yüzden kullanmak isteyip istemediğinize karar vermeden önce bu yöntemi dikkatlice düşünmelisiniz.
Bu yöntemi kullanmaya karar verirseniz, hem ücretsiz hem de premium olmak üzere birçok WordPress mağaza bulma eklentisi olduğunu bilmelisiniz. Bu yazı için WP Store Locator eklentisini kullanmaya karar verdik.
WP Store Locator eklentisi, Google Haritalar’ı entegre eden ve kullanıcıların sağlanan ayarları kullanarak özel haritalar oluşturmasına izin veren ücretsiz bir WordPress eklentisidir. Bu ayarlar arasında yol tarifleri ve mesafe ölçümü, e-posta adresleri, telefon numaraları veya web sitesi URL’leri gibi ek verilerin görüntülenmesi, çok dilli uyumluluklar ve özel harita stilleri ekleme seçeneği yer alır.
Eklentiyi yükledikten sonra Mağaza Bulucu > Ayarlar’a gidin. Burada bu eklentide yer alan çok çeşitli seçenekleri ve iki uyarıyı göreceksiniz. Bu uyarılar, kullanmadan önce çözmeniz gereken tüm gereksinimlerle ilgilidir. [wpsl] bu eklentinin sağladığı kısa kod. Birincisi bir başlangıç noktası belirlemek içindir ve ikincisi, kısa kodun çalışması için gerekli API anahtarlarını oluşturmak içindir.
Bu yüzden bu eklentiyi kullanmaya başlamadan önce API anahtarlarını oluşturmamız gerekiyor.
Öncelikle kimlik bilgilerinizle Google Cloud Platform’a giriş yapın ve yeni bir proje oluşturun. Bu durum Ana Sayfa > Pano bölümünde bulunan Proje oluştur düğmesine tıklayarak yapılır.
Ayrıca mevcut tüm projelerinizi görmek için ekranın üst kısmındaki Bir proje seçin bağlantısına tıklayabilir ve ardından açılır pencerenin sağ üst köşesinde görünecek olan Proje oluştur seçeneğine tıklayabilirsiniz.
Daha sonra proje adını girin ve aşağıdaki Oluştur düğmesine basın. Dilerseniz proje ID’sini de düzenleyebilir ve projeye önceden bir lokasyon atayabilirsiniz.
Daha sonra soldaki gezinme menüsünden API’ler ve Hizmetler bölümüne erişin.
Daha sonra API’ler ve Hizmetler sayfasının üst kısmında bulunan API’leri ve Hizmetleri Etkinleştir düğmesini tıklayın.
Bu durum API Kitaplığı sayfasını yükleyecektir. Bir Google harita mağazası bulucuyu etkinleştirmek için Haritalar JavaScript API’sini etkinleştirmeniz gerekir. Göz atarak veya üst kısımdaki arama özelliğini kullanarak bulun. Daha sonra açmak için API’ye tıklayın.
Maps JavaScript API sayfası açıldığında, etkinleştirmek için üst kısımdaki Etkinleştir düğmesine tıklayın.
Bunu yaptıktan sonra, API kimlik bilgilerinizi oluşturmaya devam edebilirsiniz.
Fakat bazı durumlarda Geocoding API’yi de etkinleştirmeniz gerekebilir. Haritalar JavaScript API’si ile aynı bölümde bulabilirsiniz; haritayla ilgili tüm API’leri görmek için Haritalar bölümündeki Tümünü Görüntüle bağlantısını tıklamanız yeterlidir.
Daha sonra Haritalar JavaScript API’sini etkinleştirdiğiniz gibi Geocoding API’yi etkinleştirin.
Tüm API’lerinizi eklediğinizde, API kimlik bilgilerini oluşturmanız gerekecektir. Bunu yapmak için Google Cloud Platform’un kontrol paneli sayfasına dönün ve API’ler ve Hizmetler > Kimlik Bilgileri sayfasına erişin.
Daha sonra Kimlik Bilgileri sayfasının üst kısmında bulunan Kimlik bilgileri oluştur düğmesine tıklayın ve API anahtarı alt seçeneğini seçin.
Kısa bir süre sonra, API anahtarınızı görebileceğiniz bir açılır pencere açılacaktır. Bu süreçteki sonraki adımlar için API anahtarınıza ihtiyacınız olacak. Bunun dışında, açılır pencerede Kapat ve Kısıtla tuşu adı verilen iki düğme olacaktır. Bu API anahtarının kullanımını kısıtlamak için Restrict tuşuna basılmasını tavsiye ederiz.
Bu durum API anahtarı adını ve kısıtlamalarını düzenleyebileceğiniz bir sayfa açacaktır. Önceki açılır pencerede yanlışlıkla Kapat’a bastıysanız endişelenmeyin, çünkü bu sayfaya daha önce oluşturduğunuz API anahtarının yanındaki Edit API tuşu düğmesine basılarak da erişilebilir.
Bununla birlikte Uygulama kısıtlamalarını HTTP yönlendiricilerine (web siteleri) ayarlamalısınız. Daha sonra Web sitesi kısıtlamaları adı verilen yeni bölümde, izin verilen yönlendirenleri, yani API anahtarını kullanmasına izin verilen web sitelerini ekleyin. Bu web sitesi URL’lerinin doğru bir şekilde nasıl ekleneceği hakkında daha fazla bilgi için Google Cloud belgelerini, özellikle HTTP kısıtlamaları eklemeyle ilgili bölümü inceleyebilirsiniz.
Bizim durumumuzda iki giriş ekledik; birincisi, eğik çizgi olmadan web sitemiz için ve ikincisi, web sitemizdeki herhangi bir sayfadan API anahtarının kullanılmasına izin veren bir joker karakter yolu içindir.
Fakat bu URL’lerin kullanıcıdan kullanıcıya farklılık gösterdiğini unutmayın; bu nedenle, web siteniz için hangi yönlendirmelerin uygun olduğuna karar vermeden önce belgeleri kontrol etmek en iyisidir. Web sitesi kısıtlamaları bölümüne uygun URL’leri ekledikten sonra, bu kısıtlamaları uygulamak için alttaki Kaydet düğmesine tıklayın.
Ayarların geçerli olması için biraz beklemeniz gerekecek. Sayfanın alt kısmındaki bildirimden de görebileceğiniz gibi, değişikliklerin geçerli olması 5 dakika kadar sürebilir. Tamamlandığında, API anahtarının yanında yeşil bir başarı simgesi göreceksiniz.
Bu anahtar, WP Store Locator eklentisi içinde tarayıcı anahtarı olarak kullanılacaktır. Ayrıca sunucu anahtarı görevi görecek başka bir API anahtarı oluşturmanız gerekecektir.
Bu yüzden Kimlik bilgileri oluştur düğmesine bir kez daha tıklayın ve API anahtarı alt seçeneğini seçin.
Daha sonra bu API anahtarını da kısıtlamak için açılır penceredeki Kısıtlama anahtarı düğmesine tıklayın.
Bir sonraki pencerede Uygulama kısıtlamaları seçeneğini IP adresleri (web sunucuları, cron işleri vb.) olarak ayarlayın ve Bu sunucu IP adreslerinden gelen istekleri kabul et bölümüne web sunucunuzun IP adresini girin. Bu bölümdeki nottan da görebileceğiniz gibi, bir IPv4 veya IPv6 adresi veya bunlardan birinin alt ağını ekleyebilirsiniz. Bunu yaptıktan sonra, seçilen kısıtlamaları uygulamak için aşağıdaki Kaydet düğmesine basın.
Web sitelerinin IP adresinin ne olduğundan emin olmayanlar için, bunu bulmanın en kolay yolu barındırma sağlayıcınıza sormaktır. Fakat IP adresini kendi başınıza öğrenmenin yolları vardır.
Gerekli API anahtarları yapıldığından geriye kalan tek şey onları eklenti seçenekleri içine eklemek ve kalan ayarları buna göre doldurmak.
Bu yüzden bir kez daha Mağaza Bulucu > Ayarlar’a gidin ve oluşturduğunuz iki API anahtarını sırasıyla tarayıcı ve sunucu anahtarı olarak girin. Daha sonra eklenti ayarlarında API anahtarlarını kaydetmek için aşağıdaki Değişiklikleri Kaydet düğmesine basın.
Bunu takiben, herhangi bir eklenti ayarını değiştirmeye devam etmeden önce API anahtarlarını doğrulamanızı öneririz. Bu durum API anahtarlarını Doğrula seçeneğinin yanındaki Yanıtı göster düğmesine tıklayarak yapılır. Önceki tüm adımları doğru bir şekilde yaptıysanız, kısa bir süre sonra ekranınızın üst kısmında API anahtarlarında herhangi bir sorun olmadığını belirten iki mesaj görmelisiniz. Bu mesajlar, daha önce var olan uyarılardan birinin yerini alacak.
Her iki API anahtarını da doğrulayamamanız durumunda biraz beklemeniz ve ardından…