Web Sitesine Google Harita Nasıl Eklenir (Elementor & Gutenberg)?

Yayınlanan: 2022-07-06

İçindekiler

Birçok işletmenin tamamen çevrimiçi tabanlı kalma dürtüsüne rağmen, fiziksel bir konuma sahip olmak hala önemlidir. Bu nedenle okuyucularımıza, özellikle Elementor ve Gutenberg olmak üzere WordPress'teki web sitesine Google Harita eklemeyi öğrenmelerini öneriyoruz.

Bir sonraki eğitimimiz hem profesyonel geliştiriciler hem de WordPress'e yeni başlayanlar için kullanışlıdır. Size Google Haritalar'ı web sitesine eklemenin en etkili 2 yolunu öğreteceğiz:

  • Ücretsiz Google Haritalar bloğu ( Gutenberg editörü için)
  • Gelişmiş Google Haritalar widget'ı ( Elementor için)

WordPress'e Neden Google Harita Eklemeliyim?

Google, tüm arama sorgularının %46'sının yerel olduğunu belirtir. Bu, potansiyel müşterilerinizin neredeyse yarısının işletmenizin bulunduğu yere en yakın konumda yaşadığı anlamına gelir. WordPress'e bir Google Haritası ekleyeceğiniz gerçeği, yerel arama motorlarında görünürlüğünüzü artıracaktır.

Metinle yazılan adresle karşılaştırıldığında, görsel bir haritanın daha iyi bir algılama etkisi vardır. Kullanıcıların konumunuzun alanını görsel olarak tespit etmelerini sağlar. Ayrıca, harita yakındaki konumları tanımlamaya ve birine giden en hızlı rotayı bulmaya yardımcı olur.

1'den fazla şirket konumu söz konusu olduğunda, etkileşimli bir harita müşterilerin mevcut konumlarına en yakın ofisi bulmalarına yardımcı olur.

WordPress'e bir google haritası ekleme ihtiyacı, özellikle perakende, hizmet, yemek ve etkinlik endüstrileri olmak üzere neredeyse tüm iş nişleri için geçerlidir. Bu durumda, haritalar yalnızca fiziksel mağazalar ve ofisler için bir rehber olarak çalışmakla kalmaz, aynı zamanda daha fazla “değer” ve meşruiyet sağlar.

Google Haritayı WordPress sayfasına eklemek için birkaç neden daha:

  • Etkileşimli arayüz. Eklenen harita ekran görüntüleri ile karşılaştırıldığında, kullanıcılar haritayı hareket ettirebilir.
  • Değiştirilebilir görünümler Ziyaretçiler, konumun gerçek hayatta nasıl göründüğünü görmek için haritalar ve sokak görünümleri arasında geçiş yapabilir.
  • Kullanışlı görünüm modu. Kullanıcılar, bir web sitesinde değil, doğrudan Google Haritalar uygulamasında haritaları kolayca görüntülemeye başlayabilir.

işaretleyici kümeleme google maps gutenberg bloğu

WordPress'e Google Haritası Nasıl Eklenir? 2 Kolay Yol

WordPress, sitenize harita eklemek için yerleşik işlevsellik içermez. Ancak bu, ekstra eklentiler dahil etmediğiniz sürece. Bu eğitimde 2 MotoPress eklentisi kullanıyoruz: biri Gutenberg blok düzenleyicisi için, diğeri ise Elementor sayfa oluşturucu için.

WordPress'e herhangi bir ek site geliştirme becerisi olmadan nasıl hızlı bir şekilde Google Haritası ekleyeceğinizi öğrenelim.

WordPress'e Google Harita Nasıl Eklenir? (Gutenberg)

Her yeni güncelleme ile Gutenberg biraz daha işlevsel ve sezgisel bir editöre dönüşüyor. Uygulama, yalnızca bu blok düzenleyicinin gücünü kullanarak güzel web siteleri oluşturmanın mümkün olduğunu gösteriyor.

Dahası, kendinizi varsayılan Gutenberg bloklarıyla sınırlamanız gerekmez. Örneğin, ücretsiz Getwid eklentisi, mevcut kitaplığınızı çok amaçlı kullanım için 40'tan fazla ekstra blok ve 35'ten fazla önceden hazırlanmış şablonla dolduracaktır.

Getwid, hem geliştiricilere hem de yeni başlayanlara yardımcı olmayı amaçlamaktadır. Gerçek zamanlı özelleştirme sunar, ancak aynı zamanda her blok için kapsamlı özellikler sağlar. Getwid blokları, temel Gutenberg bloklarıyla mükemmel bir şekilde etkileşime girer. Ayrıca, herhangi bir WordPress temasıyla uyumludurlar.

Diğer Getwid öğeleri gibi, Google Haritalar bloğu da kodla uğraşmaya gerek kalmadan görsel özelleştirme için yapılmıştır. Yani web sitesine harita eklemek istiyorsanız, artık üstüne ekstra eklentiler yüklemeniz gerekmiyor. Bir ÜCRETSİZ eklenti, kaydırıcılar, afişler, akordeonlar, son gönderiler ve daha fazlası gibi 40'tan fazla çok amaçlı bloğa erişmenizi sağlar.

Devamını oku: Getwid ile Tanışın: MotoPress'ten WordPress Gutenberg Blokları
Google Haritalar Gutenberg bloğu

Getwid Google Haritalar Bloğu: Ana Özellikler

  • Özel işaretleyicilerle harita üzerinde sınırsız konum;
  • Varsayılan harita arayüzlerini uyarlama yeteneği;
  • %100 Görsel stil ve özellik özelleştirmesi.

WordPress Blok Düzenleyicide Harita Nasıl Eklenir?

Getwid ile web sitenize Google Harita eklemek için öncelikle eklentiyi resmi WP deposundan indirin. WordPress arka ucuna gidin ve Eklentiler => Yeni Ekle => Eklenti Yükle seçeneğine tıklayın. Eklenti sekmesinde eklentiyi etkinleştirin.

Şimdi Ayarlar => Getwid'e gidin . Genel Sekmesinde Instagram Simgesini, API anahtarlarını ve daha fazlasını eklemek için alanlar göreceksiniz. API'den bahsetmezseniz, WordPress web sitesine Google Harita ekleyemezsiniz.

Google Haritalar için bir API anahtarının nasıl alınacağına ilişkin kılavuzu izleyin. Elinize geçtikten sonra, anahtarı "Getwid Ayarları"na veya doğrudan Google Haritalar bloğunu kullanırken girin:
Getwid'den Google Haritalar Bloğu
Harita, düzenleme sayfanızda görünecektir. Soldaki Ayarlar menüsünde 3 sekme görebilirsiniz: Genel, Stil ve Düzen.

Düzen Ayarları

Yerleşim ayarlarıyla başlayacağız çünkü burası özel işaretçileri ekleyeceğiniz yerdir. Gerekli konumu yakınlaştırın ve sol üst taraftaki "işaretçi" simgesine tıklayarak işaretçiyi bırakın.

Adlarını, açılır pencere içeriğini, açılır pencere genişliğini, enlem ve boylamlarını özelleştirebileceksiniz.
işaretleyici kümeleme google maps gutenberg bloğu

Genel Ayarlar

Bu sekmede, sonraki ayarları düzenleyebilirsiniz:

  • Yakınlaştırma ve Kaydırma etkileşimi (yakınlaştırmayı etkinleştirme/devre dışı bırakma)
  • Harita Merkezi ve Yakınlaştırma (merkez enlem ve boylam)
  • Google Haritalar API Anahtarı (mevcut anahtarı güncelleyin veya silin)
  • Gelişmiş (ek CSS sınıfı)

Getwid Google Haritalar bloğunun Genel Ayarları

Sınırsız özel işaretleyici ekleyin ve nasıl görünmeleri ve davranmaları gerektiğini belirleyin: açılır pencere içeriği ekleyin, genişliğini ayarlayın, vb.

Stil Ayarları

Sonunda Google Harita'yı işaretçilerle web sitesine ekledikten sonra, harita stilini yapabilirsiniz. Stil ayarları şunları içerir:

  • Harita Yüksekliği
  • Göster/Gizle (yakınlaştırma, harita stili, sokak görünümü ve tam ekran)
  • Harita stili (varsayılan, retro, koyu, gümüş, vb.)

Getwid Google Harita bloğundaki video eğitimimizi izleyin:

Google Haritayı Web Siteme Nasıl Eklerim? (Elementör)

Büyük bir Elementor hayran kitlesi olduğu için, bir sonraki eklentimiz olan Stratum Elementor Widget'larından uzak duramadık. Getwid'de bulabileceklerinizle aynı öğelere sahip 24'ten fazla Elemetor widget'ından oluşan ücretsiz bir kitaplıktır.

Stratum, 24 widget'ın tümüne ücretsiz erişim sağlar. Stratum PRO'nun amacı, her bir widget için ekstra işlevsellik sağlamaktır. Stratum widget'ları, mevcut temanızın görsel stilini devralır, web sitenizi yavaşlatmaz ve Elementor şablon kitaplığı ile kolayca entegre olur.

Gelişmiş Google Haritalar widget'ı, Elementor için varsayılan bir Google Haritalar widget'ından çok daha ilginç özellikler sunar.

Stratum Google Haritalar Elementor widget'ı

Stratum Advanced Google Haritalar: Ana Özellikler

  • Sınırsız konum
  • Özel işaretleyiciler (işaretleyici kümeleme)
  • Kullanıcı etkileşimi ile ilgili varsayılan harita arayüzü (yakınlaştırma, tam ekran vb.)

Elementor'da Google Haritalar Web Siteme Nasıl Eklenir?

İlk olarak, resmi WP deposundan Stratum'u indirin veya MotoPress web sitesinde Stratum PRO'yu satın alın. WordPress arka ucuna gidin ve Eklentiler => Yeni Ekle => Eklenti Yükle seçeneğine tıklayın. Eklenti sekmesinde eklentiyi etkinleştirin.

Şimdi Stratum'a gidin => Ayarlar => API => Google Haritalar API anahtarı => anahtarınızı girin . Google Haritalar'ı sitenizde görsel olarak görüntülemek için bir API anahtarı ekleyeceğiniz yer burasıdır.
Katman Google Haritalar 1
Elementor düzenleyicisine dönün ve şimdi haritaları bir widget olarak görebileceksiniz.

Şimdi özelleştirmeye geçelim. Her Elementor widget'ı gibi, Gelişmiş Google Haritalar da İçerik, Stil ve Gelişmiş ayarlar sunar.

İçerik ayarları

İçerik ayarları, sonraki özelleştirme seçeneklerini sağlar:

  • Genel Ayarlar (Google Harita türü, Yakınlaştırma ve Kaydırma etkileşimi, Yakınlaştırma düzeyi, Merkez Enlem ve Boylam)
  • Harita İşaretleyici Ayarları (Başlık, Adres Türü, Coğrafi Adres, İçerik, Açılır Pencere genişliği, Özel Simge, vb.)
  • Harita Kontrolleri
  • Harita Teması

Gelişmiş Google Haritalar Elementor widget'ı yakınlaştırma düzeyi
Genel ayarlar, yakınlaştırmayı ayarlamanıza ve haritadaki işaretçi sayısını seçmenize yardımcı olur.

Harita İşaretleyici ayarlarında, işaretçinin başlığı, adresi ve açılır pencere içeriğiyle ilgili her şeyi düzenleyebilirsiniz. Açılır pencere genişliğini ayarlayabilir, özel bir simge kullanabilir ve varsayılan olarak açılmasına izin verebilirsiniz.

Harita kontrolleri, sokak görünümü, yakınlaştırma kontrolü vb. gibi Google Haritalar'da bulunan seçenekleri ekler.

Ve son olarak, Harita Teması ayarları geliyor. Burada tercih ettiğiniz harita stilini (Google standardı, Snazzy Maps) seçebilir veya özel bir tane oluşturabilirsiniz.
Gelişmiş Google Haritalar Elementor Harita teması

Stil Ayarları

Stil Ayarları, Genel Stil sekmesini, özellikle harita yüksekliğini düzenleme ayarlarını içerir.

Gelişmiş Ayarlar

Herhangi bir Elementor widget'ıyla aynı olan Gelişmiş sekmesi, düzen, hareket efektleri, dönüştürme, arka plan, kenarlık, maske, duyarlı seçenekler, nitelikler ve özel CSS için ayarları içerir.

Stratum'un Gelişmiş Google Haritalar widget'ındaki video eğitimimizi izleyin:

Son sözler

Artık “ WordPress'te web siteme Google Haritasını nasıl eklerim ” sorusuna kafa yormayacaksınız. Elementor veya Gutenberg'de WordPress web siteleri oluşturmayı seçerseniz, kesinlikle çok amaçlı öğelerden oluşan bir kitaplıktan yararlanacaksınız.

Hem Stratum hem de Getwid, birkaç WordPress eklentisini yalnızca tek bir çözümle değiştirecek. Birden çok işaretçi ve harika stil seçenekleriyle Google Harita'yı web sitesine eklemenize izin veriyorlar.

Stratum Elementor Eklentilerini İndirin

Getwid Gutenberg Bloklarını İndirin