Siz veya işe aldığınız web tasarımcısı, yepyeni sitenizdeki her şeyi mükemmel hale getirmek için çok çalıştınız. Unsurların her biri halledildi. Yazı tipi ailesi, yazı tipi boyutları, ana renk, diğer renkler, boşluklar, resimler, çizimler… her şey mükemmel görünüyor. Peki ya haritalar?
Haritalar, ziyaretçilerin işletmenizi bulmasını kolaylaştırmak için vardır. İşlevsel kısımları açıktır, peki ya görsel izlenim? Konum görüntüleme söz konusu olduğunda Google Haritalar neredeyse herkesin tercihidir. Ve bazen varsayılan görünümleri web sitenizin stiline mükemmel şekilde uyar. Fakat çoğu durumda, tasarımın geri kalanıyla uyum sağlamak ve iyi çalışmak için biraz ayarlanması gerekecektir.
WordPress’te Google Haritalar’ı özelleştirmenin birkaç farklı yolu vardır. Hepsi oldukça basittir ve herhangi bir özel teknik bilgi gerektirmez. Okumaya devam edin ve hangisinin sizin için en uygun olduğunu bulun.
-
Bir Eklenti Kullanarak Haritalarınızı Şekillendirme
-
WordPress Interactive Temalarında Google Haritalarını Özelleştirme
-
Gutenberg için WordPress Bloklarını Kullanarak Google Haritalarını Ekleme ve Şekillendirme
Hatta WordPress temalarından herhangi birini kullanarak Google haritalarını ayarlama hakkındaki kullanışlı video eğitimimize de göz atabilirsiniz.
Bir Eklenti Kullanarak Haritalarınızı Şekillendirme
Google haritalarınızı özelleştirmenin en basit yollarından biri, tam da bu amaç için oluşturulmuş eklentilerden birini kullanmaktır. Seçimimiz, yüzlerce ücretsiz stile sahip hafif ve basit bir eklenti olan Snazzy Maps.
Eklentiler > Yeni Ekle’ye giderek başlayın.
Aradığımız eklentinin adı Snazzy Maps, bu yüzden arama formuna bu adı yazın. Bulduğunuzda, Yükle düğmesine tıklayın ve ardından etkinleştirin.
Eklenti yüklenip etkinleştirildiğine göre Appearance > Snazzy Maps altından ulaşabilirsiniz.
Web siteniz için stilleri keşfetmek ve seçmek için bir API Anahtarı almak üzere bir Snazzy Maps hesabı oluşturmanız gerekir.
Başarıyla bir hesap oluşturduğunuzda, profil sayfanıza gidin ve Kodu almak için Geliştirici bölümünde API Anahtarı Oluştur düğmesine tıklayın.
Şimdi, Snazzy Maps Ayarlarında API Anahtarınızı girin ve Kaydet düğmesine basın.
Artık stilleri keşfetmeye ve haritalarınızı özelleştirmeye hazırsınız. Keşfet sekmesine geri dönün. Orada birçok harita stili bulacaksınız. Önerilenleri kullanabilir veya kendi benzersiz stillerinizi oluşturabilirsiniz.
Web siteniz için mükemmel şekilde çalışan bir harita stili bulduğunuzda, daha sonra kullanabilmek için Stili Kaydet düğmesine tıklayın.
Ve kendi özel stilinizi oluşturmak için Snazzy Maps hesabınıza gidin ve menüden Bir Stil Oluştur’a tıklayın.
Artık belirlediğiniz renkler ve özelleştirmek için seçtiğiniz tür ile kendi tarzınızı yaratma şansınız olacak. Stilinizin hazır olduğunu hissettiğinizde, yeşil Stili Uygula düğmesine basın, özel stilinize benzersiz bir ad verin ve kaydedin.
Özel stillerinizi sitenizin yöneticisinde bulmak için, Şık Haritalar Keşfet sekmesindeki açılır listeden Stillerim’i seçin.
Etkinleştir’e tıklayın ve WordPress stili doğrudan web sitenizdeki Google haritalarına uygulayacaktır.
WordPress Interactive Temalarında Google Haritalarını Özelleştirme
Google haritaları için önceden tasarlanmış bir kısa kodla birlikte gelen WordPress Interactive’in premium WordPress temalarından birini kullanıyorsanız işinizin yarısı sizin yerinize yapılmıştır.
Temanıza bağlı olarak kısa kod farklı özelleştirme seçenekleriyle gelir. Örneğin bazı temalar, kısa kod ayarlarında bir yer paylaşımı ekleme veya renkleri değiştirme özelliğini içerirken, diğerleri Snazzy Maps kodunu eklemek için bir formla birlikte gelir.
Örneğin WordPress temamız Gluck, özel Şık Haritalar stillerini etkinleştirmenize izin veren ve kod eklemek için bir alan içeren bir Google Haritalar kısa koduyla birlikte gelir.
Bu kodu almak için aslında Snazzy Maps eklentisini yüklemeniz gerekmez. Tek yapmanız gereken Snazzy Maps web sitesine gitmek, giriş yapmak veya bir hesap oluşturmak, kendi stilinizi oluşturmak veya mevcut stillerden birini seçip benzersiz kodunu kopyalamak.
Kodu almak için Kodu görüntüle bölümünü seçin.
Benzersiz kodunuz solda görünecektir. Kodun tamamını kopyalayın.
Snazzy Map kodunuzu kısa koddaki uygun alana girin, sayfanızdaki harita tam olarak tasarladığınız gibi görünecektir.
Gutenberg için WordPress Bloklarını Kullanarak Google Haritalarını Ekleme ve Şekillendirme
Gutenberg için WordPress Blokları, blok düzenleyici deneyiminizi geliştirmek için kullanabileceğiniz 80’den fazla mükemmel blok koleksiyonumuzdur. Bu bloklar, Gutenberg’de ilerleme çubukları, çizelgeler ve grafikler oluşturmak, fotoğrafları sergilemek ve web sitenize Google Haritalar eklemek gibi harika şeyler yapmanıza yardımcı olabilir.
Haritayı web sitenizde çalışır duruma getirmek için Google Map Gutenberg bloğuna güvenebilirsiniz. Yalnızca eklentinin Premium sürümüyle kullanılabilen bir bloktur. Eklentinize Google haritalarını eklemek ve biçimlendirmek için onu nasıl kullanacağınızı göstereceğiz, bu nedenle takip etmek istiyorsanız, önce eklentinin yüklendiğinden ve etkinleştirildiğinden emin olun. Tercihiniz buysa, aynı konudaki eğitim videomuzu da izleyebilirsiniz.
Başlamak için önce web sitenizin kontrol paneline gitmeniz ve WordPress Blokları > Entegrasyon Sayfası altında bir Google Haritalar API Anahtarı girmeniz gereken alanı bulmanız gerekir.
Bu anahtarı almak için bir Google Cloud projesi oluşturmanız gerekir. Fakat bir faturalandırma hesabı oluşturmanız ve Haritalar JavaScript API’sini etkinleştirmeniz gerekir.
Anahtar yerindeyken, harita bloğunu istediğiniz herhangi bir sayfaya veya gönderiye ekleyebilirsiniz. Hemen bir harita açtığını göreceksiniz ve sağ taraftaki menüde bloğun içeriğini değiştirme seçeneğiniz olacak. Bu durum raptiye simgesini değiştirebileceğiniz ve haritada gösterilmesi gereken bir veya daha fazla adres ekleyebileceğiniz anlamına gelir.
Raptiye simgemizi seçtikten ve tek bir adres ekledikten sonra, bir sonraki adım olan haritayı şekillendirmeye geçmeye hazırdık. Bunun için, kendi haritanızı oluşturabileceğiniz, istediğiniz gibi şekillendirebileceğiniz ve ardından kodunu kopyalayıp bloğa yapıştırabileceğiniz şık editörü için bir kez daha Snazzy Maps web sitesine döndük.
Harita yüksekliğini 585px ve harita yakınlaştırmasını 13 olarak ayarladık. Kalan seçenekler, harita sürükleme, kaydırma, sokak görünümü, tip kontrolü ve tam ekran etkinleştirmenizi sağlar. Orada hiçbir şeyi değiştirmedik.
Elbette, web sitenize uyan en iyi ayar kombinasyonunu denemekten ve bulmaktan çekinmeyin.
Son düşünceler
Haritaların sayfalarınızda görüntülenme biçimini özelleştirmek için ister bir eklenti seçin, ister yerleşik Google Haritalar kısa koduna sahip bir tema kullanın, önemli olan varsayılan görünümle yetinmek zorunda değilsiniz. Web sitesi tasarımınızı mükemmelleştirmek için çok fazla zaman ve çaba harcadıktan sonra, haritaların genel ton ve atmosfere tam olarak uyduğundan emin olmalısınız. Stillerle oynamaktan korkmayın. Eğlenceli, kolay ve kesinlikle zaman ayırmaya değer.