MAPSVG eklentisi: WordPress’te etkileşimli harita
MAPSVG, WordPress sitenizde etkileşimli ve duyarlı haritalar yapmanıza yardımcı olan iyi bir WordPress eklentisidir. Bir dizi iyi özellik sayesinde, herhangi bir SVG dosyasını etkileşimli bir haritaya dönüştürebilirsiniz. Sadece bu değil, ayrıntılı bir kat planı, infografik, Google haritası, kloroplet haritası, resim haritası ve daha fazlası yapabilirsiniz. Bu derlemede, MAPSVG’yi Web’de WordPress için en iyi eşleme eklentilerinden biri haline getiren özellikler görüyoruz. Ayrıca sürücü eklentisini test ediyoruz, bu yüzden burada kalın ve sonuna kadar okuyun. Bu açıkça iyi bir anlaşmadır, bu yüzden bir fincan kahve alın ve başlayalım.
WordPress için MAPSVG Etkileşimli Harita Olağanüstü Geliştiriciler Romanov tarafından sunuldu, Mapsvg interaktif haritayı kolay ve eğlenceli hale getiriyor. Önce belgeleri okumak zorunda kalmama rağmen çeşitli seçeneklerle oynarken eğleniyorum. Bu nedenle, MAPSVG’de bulunan özelliklere bakalım. 100+ harita hazır
Ve çoğu harita kalibre edildiğinden, adresi veya koordinatları kullanarak haritaya işaretler ekleyebilirsiniz. Buna ek olarak, kendi SVG haritanızı yapabilir ve MAPSVG’ye yükleyebilirsiniz. Tek yapmanız gereken, Inkscape veya Adobe Illustrator gibi herhangi bir vektör düzenleme yazılımını kullanarak bir SVG görüntüsü oluşturmak, yüklemek ve ayarlamaktır. Bunun ne anlama geldiğini biliyor musun? Bu, interaktif diyagramlar tasarlayabileceğiniz ve istatistikleri görselleştirebileceğiniz (ve genellikle kullanıcı deneyimini geliştirebileceğiniz) anlamına gelir. DatamapsVG Temel Nesnesi, bir nesne oluşturmanıza ve haritanızdaki belirli bir alana eklemenize olanak tanır. Bu, web ziyaretçileriniz için derinlemesine bir deneyim sunan bilgilerle haritanızı zenginleştirmenizi sağlar. İllüstrasyon amacıyla, bir an için ülke çapında satılacak bir emlakçı olduğunuzu varsayalım. Bunu çok iyi yapıyorsunuz ve haritada bulunan özellikleri görüntülemek istiyorsunuz. Boyut, adres, fiyat, fotoğraf ve bunun gibi şeyler gibi bilgileri görüntülemek istiyorsunuz. MAPSVG, bu ayrıntıları veritabanına eklemenize ve ardından haritanızın bir veya birkaç alanına bilgi eklemenize olanak tanır. Kullanıcı belirttiğiniz alanı her tıkladığında, durumu diyelim, ayrıntılar iyi bir popover, ayrıntılı ekran veya araç ipucu içinde görüntülenir.
Filtrelenebilen ve aranabilen kir
Yetersiz bir veritabanı nesnesi ekliyormuş gibi, MAPSVG bir dizin oluşturmanıza ve haritanızın yanında görüntülemenize olanak tanır. Gayrimenkul benzetmemizle, belirli eyaletlerde bulunan tüm mülkleri (veya aracıları) görüntülemek isteyebilirsiniz. MAPSVG bunu çok mümkün kılar. Kullanıcılar, açılır filtre veya arama kutusu kullanarak dizindeki öğeleri filtreleyebilir. Ayrıca, kullanıcılar haritadaki belirli alanları tıklayarak nesneleri filtreleyebilir. Bu dizin özelliği, en karmaşık diyagramları ve haritaları anlaşılmasını kolaylaştırır. Ayrıca, kullanıcılar UX’iniz için ek bir değer olan bilgileri kolayca bulabilir. Mükemmel Google Haritalar MAPSVG’yi Google Haritalar ile entegre edebileceğinizden bahsediyor muyum? Evet, yapabilirsiniz ve yalnızca Google API’sini kilitlemeniz gerekir. Genellikle, Google Haritaları kapsamlı bir şekilde ayarlayamazsınız, bu da çeşitli senaryolarda sınırlandırılabilir veya sınırlandırabilir. MAPSVG bu zorluğun üstesinden gelmenizi sağlar. Nasıl? Vektör haritasını her türlü Google harita (arazi, uydu, yol veya hibritler) üzerine kaplayabilirsiniz. Vektör görüntüsü etkileşimli olduğundan, düşene kadar Google haritanızı değiştirebilirsiniz. Buradaki nihai sonuç, daha fazla kullanım sağlayabileceğinizdir.
Google haritasının bir dizi kontrol ile birlikte geldiğini unutmayın. Bu kontrolü MAPSVG özellikleriyle eşleştirin ve kullanıcılarınızı heyecan konusunda deli edeceksiniz. “Bunu nasıl yapıyorlar?” Bu özellik, düzenli depolama alanını vurgulayarak ve herhangi bir şeyi tıklatarak Google haritanızı mükemmelleştirmenizi sağlar. CSS, JavaScript ve Şablon Editörleri Ayarlayamayacağınız veya genişletemediğiniz bir haritanın kullanımı nedir? Roman bunu iyi bir CSS ve JavaScript editörü ile anlıyor gibi görünüyor. Kodun yolunu bildiğiniz sürece, etkileşimli resminizi sınırlarına teşvik edebilirsiniz. Bir başlangıç olarak, haritanızı ve diyagramınızı CSS ile istediğiniz gibi ve terlemeden düzenleyebilirsiniz. Araç ipuçları, popoVers ve diğer bilgi kaplarının birçok öğesini ayarlayabilirsiniz. Ayrıca, varsayılan harita işlevini genişletmek için JavaScript’in gücünü kullanabilirsiniz. Ayrıca, popover, işaretleyiciler ve araç ipuçları için özel bir şablon oluşturmanıza yardımcı olan bir şablon düzenleyicisi alırsınız. Şablon editörünün kullanımı kolaydır, herhangi bir sorun yaşamanızı beklemiyoruz. Doğrudan önizleme ile sezgisel kontrol panelleri
MAPSVG ile çalışmak, haritayı kolaylaştıran sezgisel yönetici gösterge paneli sayesinde oldukça kolaydır. Mapsvg ile haritaları ve diğer etkileşimli resimleri baştan sona kolayca birleştirin. Buna ek olarak, bu eklenti, gerçek zamanlı olarak değişiklikleri görmenizi sağlayan doğrudan önizleme özellikleri ile donatılmıştır. Şimdi haritanızın bittikten sonra nasıl görüleceğini merak etmenize gerek yok. Ardından, harita ekranınızı görmek için ileri geri gitmenize (veya sayfayı yenilemenize) gerek yoktur. Ne kadar tatlı? Resim haritası
Birkaç dakika önce görüntü haritasından bahsediyoruz, ancak bu özelliğin kendisini tartışmalıyım çünkü bence bu etkileyici. MAPSVG’nin SVG dosyalarını otomatik olarak etkileşimli haritalara dönüştürdüğünü zaten biliyoruz. Sadece SVG dosya görüntüsü, yükleyin ve ayarlayın. Ama PNG ve JPEG görüntülerinin bir haritasını da yapabileceğinizi biliyor muydunuz? Şimdi ilginç geliyor, değil mi? MAPSVG, raster görüntülerinden etkileşimli haritalar yapmanızı (tıklandı) yapmanızı sağlayan parlak bir çizim aracı ile birlikte gelir. Bu nasıl yararlı? Etkileşimli ev planları, planlar, rotalar, şehir planları, oturma listeleri ve daha fazlasını çizebilirsiniz. Bu özellikler ve olağanüstü destek sayesinde, hiçbir şey bu galaksinin haritalarını ve etkileşimli çizimlerini yapmanızı engellemez. MAPSVG, WordPress için mantıksız bir harita eklentisidir (ve belki de en iyisi). MapsVG’yi nasıl yönetir ve haritalar MAPSVG’yi diğer tipik WordPress eklentilerini yüklemek kadar kolay hale getirir. Eklentiyi yüklediğinizde ve etkinleştirdiğiniz anda etkileşimli bir harita yapmaya hazırsınız. MAPSVG doğrudan işlev gördüğü için hiçbir şeyi yapılandırmanız gerekmez. Petasvg Alın Doğrudan Deneyim Alalım. MAPSVG’nin bir kopyasını alın ve aşağıdaki talimatları izleyin. WordPress Yönetici Gösterge Tablonuza giriş yapın ve Eklentiler> Yeni Ekle’ye gidin.
Ardından, Yükle düğmesine (1) basın, dosyayı (2) seçin ve aşağıda gösterildiği gibi şimdi Yükle düğmesine (3) basın. Kurulum işleminin bitmesini bekleyin, ardından Eklenti Etkinleştir düğmesini tıklayın.
Ve hepsi bu; Eklenti etkinleştirildikten sonra kullanıma hazırdır. Bir kontrol paneli başlatmak için WordPress yöneticisindeki MAPSVG öğesini tıklayın.
Şimdiye kadar iyi, bence sürecin basit olduğunu kabul edeceksiniz. Kontrol panelinde, daha önce yapılmış olan haritalardan birini seçebilir, bir Google haritası oluşturabilir (önce entegre edilmemiz, yangın anahtarını kopyalamak kadar kolay), bir resim haritası oluşturabilir, SVG dosyalarını yükleme veya SVG dosyalarını indirebilirsiniz. Google Haritalar ile. Bir harita yapmak için yardıma ihtiyacınız varsa, kontrol panelinin üst kısmındaki öğretici bağlantısını veya desteği tıklayarak hızlı yardım alabilirsiniz. Daha önce var olan haritalardan birini seçelim. Çin ile gideceğim çünkü şu anda orada her şey yapıldı N/B: Geliştirici, kalibre edilmemiş bir harita yerine kalibre edilmiş bir harita kullanmanızı önerir çünkü coğrafi olarak daha kalibre edilmiş haritalar bölgesel Başlıklar ve coğrafi (enlem/boylam) koordinatları olan veya yalnızca otomatik olarak koordinat olarak değiştirilen adresi girerek işaretleyiciler ekleyebilirsiniz. -Mapsvg öğreticisi yeni SVG haritasından Çin’i (veya istediğiniz diğer haritaları) seçin. Kaydırma çubuğundan nefret ediyorsanız, lütfen arama kutusunu kullanın. Bir sonraki ekranda, başlığı doldurun ve isterseniz ön yükleyici metnini değiştirin. Aynı ekranda, haritanızın boyutunu ayarlayabilir, duyarlı tasarımı devre dışı bırakabilir (varsayılan olarak etkinleştirilir, bu nedenle döner düğmeye dokunmayın), araç ipuçlarını ve Popover’ı etkinleştirebilirsiniz. Ayrıca haritanın birkaç bölgeye ayrıldığını göreceksiniz (bizim durumumuzda Çin eyaleti) ve bunlar tıklanabilir! Ayrıca, açılır menü de dahil olmak üzere diğer kontrollerle kendinize bir alışkanlık haline getirin. Birkaç rengi değiştirelim ve eklentiyi hissedelim. Aşağıda gösterildiği gibi Menü> Renkler’e gidin. Renk ekranı hayalinizi seçmenize yardımcı olur. Demek istediğim, kullanmak istediğiniz renk sınırı yok. Sevdiğiniz bir şey olana kadar renk seçmenlerini yapın. Mavi bir his kullanacağım çünkü wordpress bae renkinizi seçin ve aşağıda gösterdiğimiz gibi CTRL+S düğmesine basmayı unutmayın. Bak? MapsVG’nin kullanımı kolay olduğunu söyledim. Birkaç tıklamayla, haritamın rengini değiştirdim ve yıllar önce Google’da birincilik aldığımda sadece böyle eğlenceli hissettim. Haritanın diğer bölümlerini düzenlemek o kadar kolay ve niyetimi kanıtlamak için, eğlenceli olacağı için araç ipuçları ekleyeceğim. MapsVG’ye araç ipuçları ekleyin, böylece fareyi haritanızdaki bir alana yönlendirdiğinizde görünen araç ipuçları nasıl eklersiniz? Çok kolay ve size ne kadar yakında göstereceğim. Bu arada, bir nedenden dolayı belirsiz bir şey varsa, MapsVG’nin resmi öğreticilerini ve belgelerini görmekten çekinmeyin. Daha da iyisi, bu yazının sonundaki yorum bölümüne basın ve Thor’u sadece sizin için arayacağım. Çekiç, şablonların eklenmesini içeren araç ipuçları ekleyerek bunun yanı sıra her şeyi çözdü (daha önce bahsettiğimiz şablon düzenleyicisini hatırlıyor musunuz?). Bu nedenle Menü> Şablonlar’a gidin ve ardından Bölge Araç İpucuunu seçin. Ardından, şablon düzenleyicisine aşağıdaki kodu ekleyin ve yukarıda gösterildiği gibi CTRL+S Kaydet düğmesine basın. İl: {{title}} Yukarıdaki kod, gidon etiketlerine sahip basit bir HTML’dir. Yalnızca bölgenizin başlığını görüntülemek istiyorsanız, {{Title}} etiketini kullanın. Kendi özel alanınızı da belirleyebilirsiniz, çünkü yakında öğreneceksiniz. Ama önce, araç ipuçları özelliğini etkinleştirelim. Menü> ayarlarına gidin ve aşağıda gösterdiğimiz gibi Araç İpuçları özelliğini açın. Yukarıdaki ekran görüntülerinde görebileceğiniz gibi, araç ipuçlarımız etkin. Ancak, araç ipuçlarınızı hayal edilemez bir şekilde zenginleştirebilmeniz için size özel alanlar ekleyeceğinizi göstereceğimi söylüyorum. Araç ipuçlarınıza daha fazla fotoğraf ve bilgi eklemek istediğinizi varsayalım. Bunu nasıl yapıyorsun? Bu nedenle, daha önce bahsettiğimiz veritabanı nesnesini aradık. MAPSVG veritabanı nesneleri aracılığıyla özel bir düzlem eklemek, haritanıza özel alanlar eklemenizi sağlar. Zaten {{title}} alanına sahibiz, ancak nasıl daha özel alanlar ekleyebileceğimizi görelim. Metin, metin alanı, onay kutusu, resim vb. Nei Mongol eyaletine birkaç resim ekleyelim. Menü> Bölgeleri Açın ve aşağıdaki resimde vurguladığımız gibi Alanı Düzenle düğmesini tıklayın.
Bir sonraki ekranda, görüntü düğmesine basın ve ardından aşağıda gösterildiği gibi Alan düğmesini kaydedin.
CTRL+S Kaydet düğmesini tıklayarak değişikliklerinizi kaydedin. Her zaman değişikliklerinizi kaydetmeyi unutmayın. Ardından aşağıdaki resimde gösterildiği gibi Liste düğmesine basın. Haritanızı alan düzenlemeye alın ve bir alana tıklayın (Nei Mongol’u seçiyoruz). Yeni özel alanınızı (resim) sağda göreceksiniz. Arama düğmesine basın. Aşağıdaki resme bakın. Bir sonraki ekranda, resminizi ekleyin ve Resimler Seç düğmesine basın. Tamam düğmesini (1) tıklamanız gereken Bölgeler Düzenleme ekranına yönlendirileceksiniz. Ardından, CTRL+S (2) Kaydet düğmesini tıklayın, ardından aşağıda gösterildiği gibi önizleme moduna (3) dönün. Bu noktada fareyi Nei Mongol’a yönlendirmeye çalışırsanız, görüntü araç ipuçunda görünmez. Neden? Niye? Resimler için bir şablon yapmadık. Bunu şimdi yapalım. Menü> Şablonlar> Bölge Araç İpucuuna gidin ve kodu buna değiştirin: il: {{Title}}İlk resim:
Tüm görüntüler:
{{#Eeach Images}}}
{{/Her}} İşte daha ileri resimler için görüntüler. Kaydet düğmesine basmayı unutmayın. Şimdi, fareyi seçtiğiniz bölgeye yönlendirmeye çalışın (bizim durumumuzda Nei Mongol). Ne gördüğünü söyle. Ekranımda olan bu. Oldukça temiz, değil mi? MAPSVG haritanıza nasıl özel alanlar ekleyeceğinizi öğrendiniz. Popover ve işaretleyiciler eklemek de pasta kadar kolaydır. Buna ek olarak, bu temel bilgileri bildiğiniz sürece, güneşte herhangi bir etkileşimli harita/diyagram yapabilirsiniz. MAPSVG ile çalışmak, dördüncü sınıf öğrencilerin görevidir, özellikle Roman Stepanov öğreticiler aracılığıyla olağanüstü destek ve olağanüstü rehberlik sunmaktadır. Haritanızı WordPress sitenizde görüntülemek için değişikliklerinizi kaydedin ve sayfa> Yeni Ekle’ye gidin. Ardından, yukarıda gösterildiği gibi MAPSVG düğmesine basın ve haritanızı seçin. Bu, WordPress sayfanıza kısa bir kod [MAPSVG ID = “17” Title = “China”] ekler. Herhangi bir şekilde, kısa bir kod kullanarak sitenizde bir harita eklemekten çekinmeyin. Endişelenmeyin, MAPSVG ile yaptığınız harita% 100 duyarlı, haritanın çeşitli cihazlarda iyi görüneceği anlamına gelir. Ardından, Publish tuşuna basın ve ön uçtaki sonuçları görün. Sonuç, var olan her özelliği kontrol edersek bütün gün burada olacağız, ancak kendi WordPress MapsVG haritanızın bir kopyasını almanızı ve denemenizi öneririm. Siz ve ben arasında, ihtiyacınız olan tek WordPress haritası eklentisi bu. Sorularınız veya önerileriniz var mı? Aşağıdaki yorumlar bölümünden iletişim kurmaktan çekinmeyin. Kızarmış ekmek!
