Jika Anda menggunakan layanan seperti Google Maps, Anda hanya perlu memilih lokasi dan menyematkan peta di situs web Anda. Namun, Anda tidak dapat mengedit peta dengan cepat, begitu pula rekan kerja Anda - yang seringkali diperlukan untuk proyek kolaboratif.
Di sinilah peta interaktif berperan. Mereka memungkinkan Anda menempatkan penanda yang dapat dipindahkan yang dapat diedit semua orang di tim Anda.
Dalam tutorial ini, kita akan berbicara tentang kapan jenis kartu ini berguna. Selain itu, kami akan menunjukkan cara menambahkannya dengan dua cara ke WordPress.
Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPress, Berapa banyak plugin saya harus menginstal pada WordPress.
Lalu, mmari kita mulai bekerja!
Apa itu peta interaktif (dan kapan menggunakannya?)
Menambahkan peta ke situs web cukup mudah. Alat seperti Google Maps memungkinkan Anda untuk menyematkan peta di halaman Anda dalam hitungan menit. Keuntungan dari pendekatan ini adalah pengunjung dapat bergerak di sekitar peta, memperbesar, memperkecil, dll.
Jenis peta ini lebih interaktif daripada sekadar gambar, tetapi tidak memungkinkan Anda membuat perubahan apa pun setelah menambahkannya ke situs web Anda.
Di sisi lain, peta interaktif memungkinkan Anda (dan dalam beberapa kasus, kolega Anda) untuk menambahkan penanda, ikon, teks baru, dan lainnya. Bayangkan, misalnya, Anda merencanakan pertemuan untuk anggota situs web Anda. Anda dapat mengonfigurasi peta dengan banyak pin untuk menyarankan lokasi.
Temukan dengan cara Plugin 5 WordPress untuk menambahkan geolokasi ke Blog Anda
Anda juga dapat menggunakan peta interaktif sehingga pengguna Anda dapat membagikan lokasi mereka atau menavigasi ke tempat-tempat yang ingin mereka kunjungi. Lebih tepatnya, ini adalah aplikasi khusus. Namun, peta interaktif bisa berguna dalam berbagai situasi.
Selain itu, mereka tidak selalu lebih sulit untuk ditambahkan daripada rekan-rekan mereka.
Cara menambahkan peta interaktif ke situs WordPress Anda
Jika menyangkut peta interaktif, Anda dapat menyematkannya di situs web Anda atau menggunakan plugin untuk membantu Anda melakukannya. Pendekatan pertama lebih sederhana, tetapi plugin sering kali mengemas lebih banyak fitur, seperti yang Anda duga. Mari kita bahas pendekatan plugin untuk menunjukkan apa saja fitur-fitur ini.
1. Gunakan plugin Peta Marker Pro
Plugin Peta Marker Pro adalah solusi premium satu atap untuk menambahkan peta ke WordPress. Ini menawarkan lusinan fitur lanjutan, seperti yang memungkinkan Anda melihat peta dari berbagai departemen, dan menambahkan jumlah penanda yang hampir tidak terbatas ke peta Anda dan mengaturnya. Selain itu, pengunjung dapat memfilter jenis penanda yang ingin mereka lihat di peta Anda.
Hal menyenangkan lainnya yang dapat Anda lakukan menggunakan plugin ini adalah menambahkan informasi jarak dan rute antar penanda. Anda bahkan dapat membagikan lokasi Anda sendiri secara real time melalui peta situs web Anda, jika Anda ingin melakukannya. Menyiapkan plugin dapat memakan sedikit waktu, mengingat banyaknya fitur yang ditawarkannya.
Namun, ternyata tidak sesulit yang Anda bayangkan.
Untuk memulai, konfigurasikan dan aktifkan plugin seperti yang Anda lakukan pada plugin lainnya. Jika Anda baru mengenal WordPress, cari tahu Cara menginstal plugin di WordPress
Setelah plugin siap, Anda perlu menambahkan peta atau lapisan baru, yang dapat Anda lakukan dari tab Maps Marker Pro> Tambahkan layer baru. Di sini, tetapkan nama yang dapat Anda kenali untuk lapisan Anda dan masukkan lokasi yang Anda inginkan untuk ditampilkan, seperti yang Anda lakukan dengan alat pemetaan online lainnya:
Sekarang Anda dapat menyesuaikan ukuran dan tingkat zoom yang ingin Anda tetapkan sebagai default, menggunakan menu kiri. Ada juga opsi yang disebut Pengelompokan marker , yang akan menampilkan ikon dengan jumlah penanda di suatu area jika Anda memperbesar terlalu jauh, seperti pada contoh di bawah ini:
opsi Cari Penanda, di sisi lain cukup eksplisit. Ini dapat bermanfaat jika Anda ingin memasukkan informasi tambahan tentang spidol Anda:
Sekarang gulir ke bawah dan temukan opsi « Tambahkan penanda baru di layer ini« . Pada layar berikutnya, Anda akan dapat menentukan nama dan lokasi untuk penanda Anda, menggunakan peta yang sama seperti yang sebelumnya.
Temukan juga Cara kompres dan mengubah ukuran gambar pada WordPress
Anda juga dapat memilih ikon dan mengatur teks pop-up untuk penanda Anda. Ini akan muncul ketika pengunjung mengeklik penanda itu sendiri, atau memilihnya dari daftar jika Anda memilih untuk memasukkannya.
Bagaimanapun, jangan lupa untuk menekan tombol menerbitkan setelah Anda selesai. Setelah menambahkan beberapa penanda, lapisan awal Anda akan terlihat seperti ini:
Saat Anda siap untuk menambahkan peta interaktif baru Anda ke salah satu halaman Anda, Anda harus menggunakan Kode pendek. Gulir ke atas tab Edit layer dan cari ID yang sesuai:
Sekarang, tempatkan shortcode [mapsmarker layer = "X"] di postingan atau halaman Anda. Jangan lupa untuk mengganti placeholder X dengan ID "lapisan" Anda sebelumnya.
Kartu Anda sekarang harus operasional di situs web Anda! Lebih penting lagi, Anda atau siapa pun di tim Anda dapat mengeditnya dan menambahkan penanda baru kapan saja, tanpa meninggalkan dasbor Anda.
2. Menggunakan fitur Built-In Embed dari Google Map
Google Maps tidak terlalu membutuhkan perkenalan - ini adalah layanan yang memungkinkan Anda mengekstrak peta dari seluruh dunia untuk berbagi tempat dengan orang lain, menemukan alamat, dan bahkan berbagi lokasi Anda. Untuk situs web, ada banyak cara untuk mengintegrasikan Google Maps ke dalam halaman Anda.
Namun, sebagian besar kartu menawarkan interaktivitas dalam jumlah terbatas. Mereka memungkinkan Anda untuk menavigasi melalui mereka, memperbesar, keluar dan mengubah pandangan Anda, tetapi tidak lebih.
Faktanya adalah bahwa Google Maps menawarkan lebih banyak fitur daripada pemetaan sederhana. Misalnya, Anda juga dapat menambahkan beberapa penanda, mengukur jarak, dan memasukkan arah di peta Anda. Untuk mencoba fitur ini, buka Google Maps saya dan klik tombol + Buat Peta Baru :
Pada layar berikutnya, tetapkan judul untuk peta Anda dan lapisan pertamanya, yang akan kita bangun. Sekarang temukan lokasi yang ingin Anda bagikan menggunakan bilah pencarian Google Map di bagian atas layar:
Saat memperbesar, Anda dapat menggunakan simbol penanda di bagian atas layar untuk mulai menyorot lokasi di peta Anda. Cukup klik di mana Anda ingin meletakkan penanda Anda, lalu tetapkan nama dan ikon untuk itu:
Setelah Anda memiliki banyak penanda, Anda dapat menggambar garis di antara mereka untuk menampilkan jarak:
Saat kartu Anda sudah siap, klik tombolnya Saham di menu sebelah kiri. Di sana, ubah pengaturan akses de pribadi à publik :
Anda juga dapat mengundang anggota tim untuk menggunakan email mereka, sehingga mereka dapat segera mengakses peta:
Bagaimanapun, Anda harus selalu menyematkan kartu baru Anda di situs web Anda. Anda dapat melakukan ini dengan mengklik ikon tiga titik di sebelah judul peta Anda dan mengklik opsinya Sematkan peta ini :
Sekarang Anda dapat menyalin dan menempelkan kode semat di halaman Anda. Kartu baru Anda akan muncul di mana pun Anda meletakkannya. Selain itu, rekan Anda akan dapat mengeditnya dan menambahkan penanda baru melalui Google Maps jika perlu.Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Captcha Matematika Ultimate
Captcha Matematika Utama adalah WordPress Plugin 100% efektif captcha premium. Hal ini memungkinkan untuk menambahkan captcha matematis pada bentuk Login WordPress, pendaftaran, pemulihan kata sandi, komentar, WooCommerce, Unduhan Digital Mudah, dan aux bentuk dari bbPress.
Fitur-fiturnya meliputi: instalasi dan konfigurasi yang mudah, menambahkan captcha ke banyak bentuk, dukungan untuk beberapa captcha Matematika di halaman yang sama, penyesuaian pesan kesalahan, dan banyak lainnya.
Download | Demo | Hébergement Web
2. Gateway Pembayaran Standar PayPal untuk Formulir Ninja
Gateway Standar PayPal untuk Formulir Ninja memungkinkan Anda membuat formulir yang terintegrasi secara mulus dengan gateway pembayaran PayPal. Anda akan dapat membuat formulir pesanan yang dipersonalisasi dan menerima pembayaran menggunakan akun Paypal standar.
Fitur utamanya adalah: integrasi yang mudah dan cepat, integrasi IPN, kemampuan untuk mengaktifkan / menonaktifkan gateway PayPal pada formulir individu, dukungan untuk pembayaran reguler, dll.
Download | Demo | Hébergement Web
3. Bentuk Gravitasi - Daftar & Edit
dengan ini WordPress Plugin premium, dimungkinkan untuk mengubah atau menghapus entri yang dikirimkan dalam bentuk situs web Anda. Sebuah fitur yang sangat kurang dalam plugin Gravity Forms, itulah sebabnya ekstensi ini dibuat.
Di antara fitur-fiturnya kami akan menyebutkan antara lain: mmengedit dan menyimpan data yang direkam, filepenindasan data yang dimasukkan,modifikasi dan penghapusan artikel yang sudah diterbitkan, iIntegrasi sempurna dengan plugin jQuery Datatables dan Gravity-Bentuk, yangdukungan logika kondisional, simple dan cepat untuk menginstal, dan banyak lagi.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- gambar tidak ditampilkan dengan SSL? Berikut adalah solusi
- Cara menambahkan widget ke header blog WordPress Anda
- Cara kompres dan mengubah ukuran gambar pada WordPress
- Bagaimana cara menyajikan dan membagikan PDF di WordPress?
Kesimpulan
Sini! Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda membuat peta interaktif di WordPress. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...