Dijital varlık çoğu işletme için bir zorunluluk haline gelse de, gerçek mekanda bulunduğunuz yeri gösteren bir haritanın hala yararlı olmaktan çok daha fazlası olduğunu söylemeye gerek yok. Bundan en iyi şekilde yararlanmak için, Google haritanızın stilini web sitenizin genel tasarımına uyacak şekilde bile ayarlayabilirsiniz. Etkileşimli bir haritayla bir adım daha ileri gidiyorsunuz: Kullanıcılarınıza size ulaşmak için kendi yollarını keşfetmeleri ve seyahatlerini istedikleri zaman planlamaları için daha fazla özgürlük tanıyorsunuz. Etkileşimin, ziyaretçilerinizi daha uzun kullanıcı oturumları için çekerek daha tatmin edici bir kullanıcı deneyimi sağladığından bahsetmiyorum bile. Bu makalede, size WordPress web sitenize etkileşimli bir harita eklemenin iki yolunu göstereceğiz – Google Haritalarım’ı kullanarak ve özel bir eklenti kullanarak.
Google Haritalarım’ı Kullanarak WordPress’te Etkileşimli Harita Nasıl Eklenir?
Etkileşimli bir harita kurmanın en basit yolu, Google’ın Haritalarım hizmetini kullanmaktır. Yapmanız gereken ilk şey Google Haritalarım’a gidip +Yeni Harita Oluştur’a tıklamak.
Bu sizi harita düzenleyiciye götürecektir. Üstteki menüyü kullanarak rotalar, işaretler, çizgiler, yönler ekleyebilir ve mesafeleri ölçebilirsiniz. Her haritada en fazla 10.000 çizgi, şekil veya yer bulunabilir. Soldaki ana bölüm, katmanlar eklemenize (katman başına en fazla 2.000 çizgi, şekil veya yer ile), dokuz seçenek arasından bir Temel harita modu seçmenize ve son olarak haritanızı adlandırmanıza olanak tanır.
Haritamıza “Bize nasıl ulaşırsınız” adını verip kısa bir açıklama ekleyeceğiz ve ardından değişikliklerimizi kaydedeceğiz.
Daha sonra konumumuzu işaretlemek için bir raptiye yapıştıracağız. Buna “Konumumuz” adını vereceğiz ve kısa bir açıklama ekleyeceğiz. Bizde olduğu gibi raptiyenin stilini bir yıldıza veya bizim yapmadığımız bir renge dönüştürmek için menüyü kullanabilirsiniz. Ayrıca konumunuza resim veya video ekleyebilirsiniz.
Daha sonra, tren için siyah ve otobüs durağı için kırmızı kullanarak en yakın toplu taşıma duraklarından oraya nasıl gidileceğini göstermek için yerel otobüs durağı ve tren istasyonundan bazı çizgiler çizeceğiz.
Son olarak onu web sitemize yerleştirmemiz gerekiyor. Bunun için öncelikle haritamızı herkese açık hale getirmemiz gerekiyor. Ana komut panelinden paylaşım menüsüne girerek, erişim kontrolünü Kısıtlı’dan Bağlantıya sahip olan herkes’e ayarlayacağız. Bu durum haritayı herkese açık hale getirir.
Daha sonra ana düzenleme panelinden yerleştirme koduna erişmeniz gerekir. Harita adınızın yanındaki üç noktayı tıklayın, Web siteme yerleştir’i seçin ve aldığınız HTML’yi kopyalayın.
Web sitenize yerleştirmek için, Gutenberg kullanıyorsanız, haritayı eklemek (veya yeni bir tane oluşturmak) istediğiniz sayfaya erişin, bir blok eklemek için + işaretini tıklamanız, ardından Özel HTML bloğunu seçip yapıştırmanız yeterlidir. kodu bloğun alanına girin.
Elementor ile çalışıyorsanız, Özel HTML widget’ını sürüklemeniz ve ardından kodu alanına yapıştırmanız gerekir. WPBakery Sayfa Oluşturucu kullanıyorsanız, Ham HTML öğesini kullanmanız ve yapıştırdığınız kodu sağlamanız gerekir. Klasik düzenleyici için, düzenleyicinizin Metin sekmesinde ayarlandığından emin olun ve kodu istediğiniz yere yapıştırın.
Ve haritanız, yapılandırdığınız gibi hazır.
Eklenti Kullanarak WordPress’te Etkileşimli Harita Nasıl Eklenir?
Etkileşimli bir harita oluşturmak için bir eklenti de kullanabilirsiniz. Çoğunu en iyi Google Haritalar eklentileri hakkındaki makalemizde tartıştığımız bu veya benzer işlevlere sahip birçok WordPress eklentisi vardır. Bu tanıtım için WP Google Maps kullanacağız, fakat siz dilediğinizi seçebilirsiniz. Eklentiyi kurup etkinleştirdikten sonra, Yüklü Eklentiler listenizde eklenti ayarlarını bulun ve oluşturmak için Harita Düzenleyiciyi bulun. harita.
Oradayken, eklentinin size izin verdiği düzenlenebilir tek haritayı bulacaksınız. Düzenlemeniz gerekecek.
Harita Adını, bizim yaptığımız gibi, Neredeyiz olarak değiştirebilirsiniz. Ayrıca Yakınlaştırma Düzeyi kontrolünü biraz sağa kaydırarak haritamızı yön arayan insanlar için kullanışlı hale getireceğiz. Bu gösterimin amaçları doğrultusunda seçeneklerin geri kalanını kullanmayacağız, fakat dikkatinizi Genişlik kontrolüne çekeceğiz. Haritanızın duyarlı olmasını istiyorsanız, onu %100’de bırakmalısınız.
Daha sonra İşaretçileriniz bölümüne kaydıracağız ve varsayılan işaretçiyi sileceğiz. Bunu menüden seçip çöp kutusu simgesine tıklayarak yapabilirsiniz. Daha sonra konumu bularak ve haritaya sağ tıklayarak, Saint Matthews, Güney Karolina’daki Bridge Caddesi merkezli kendi işaretçimizi kuracağız. Son olarak hem İşaretçimizi hem de Haritamızı bu sırayla kaydedeceğiz.
Haritanızı oluşturun bölümüne tekrar geri kaydırarak, haritanızın kısa kodunu Genel Ayarlar sekmesinde bulacaksınız. Panonuza kopyalamak ve bir gönderide kullanmak için tıklayın.
Kısa kodunuzu yapıştırmaya hazır hale getirdikten sonra, haritanızı yerleştirmek istediğiniz bir gönderi veya sayfa açın. Gutenberg kullanarak bunu nasıl yapacağınızı bir gönderide göstereceğiz. Önce, bir kısa kod bloğu eklemek için + işaretini tıklayın ve ardından harita kısa kodunuzu bloğun alanına yapıştırın.
Ve haritanız gönderinizde yapılandırıldığı gibi görünecektir.
WP Google Haritalar eklentisinin, haritanızı ihtiyaçlarınıza göre tamamen özelleştirmek için keşfetmenizi tavsiye ettiğimiz bu gösterimde çok az değindiğimiz çok sayıda seçeneğe sahip olduğunu unutmayın. Aynısı ve hatta daha fazlası Pro sürümü için de geçerli.
Çözüm Yolu
Ziyaretçilerinize fiziksel dünyanın neresinde olduğunuzu bildirmek istiyorsanız, gösterdiğimiz yöntemlerden herhangi birini kullanarak web sitenize etkileşimli bir harita ekleyerek bunu kolayca yapabilirsiniz. Etkileşimli bir harita, size ulaşmak için en iyi rotayı bulmaları için etrafta gezinmelerine ve yakınlaştırma yapmalarına olanak tanır, fakat yalnızca birkaç tıklamayla onları doğru yöne yönlendirerek bunu daha da kolaylaştırabilirsiniz. Herhangi bir tuğla ve harç konumunuz varsa, neden ziyaretçilerinizin burayı bulmasını çok kolay hale getirmiyorsunuz?