คุณต้องการสร้างแผนที่ที่มีหลายตำแหน่งใน WordPress ด้วย Elementor และส่วนเสริมที่จำเป็น?
สมมติว่าคุณมีธุรกิจที่มีสาขาหลายแห่งในเมือง และคุณต้องการสร้างแผนที่ดิจิทัลที่แสดงที่ตั้งของสาขาเหล่านั้น หากคุณมีเว็บไซต์ที่ใช้ WordPress คุณสามารถสร้างแผนที่ดังกล่าวได้อย่างง่ายดาย มีปลั๊กอินที่ยอดเยี่ยมที่คุณสามารถใช้เพื่อสร้างแผนที่หลายตำแหน่ง: ส่วนเสริมที่จำเป็น.
ส่วนเสริมที่จำเป็น เป็นส่วนเสริม Elementor พรีเมียม ดังนั้นคุณต้องติดตั้งด้วย Elementor ก่อนที่คุณจะสามารถใช้งานได้ คุณสามารถใช้ Elementor เวอร์ชันฟรีเพื่อสร้างการ์ดด้วยโมดูล Essential Addons
La Essential Addons รุ่นฟรี นอกจากนี้ยังมี อย่างไรก็ตาม วิดเจ็ตสำหรับสร้างแผนที่มีให้ใช้งานในเวอร์ชันที่ต้องชำระเงินเท่านั้น คุณสามารถดาวน์โหลด Essential Addons เวอร์ชันจ่ายได้ เว็บไซต์อย่างเป็นทางการ.
เราจะใช้แพลตฟอร์ม Google Maps เพื่อสร้างแผนที่บน WordPress ของคุณโดยใช้ Essential Addons ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าได้ติดตั้ง Elementor และ Essential Addons แล้ว
รวม Google Maps กับโมดูล Essential Addons
ก่อนที่คุณจะสามารถเพิ่มแผนที่ Google Maps ด้วย Essential Addons คุณต้องผสานรวมก่อน คุณต้องใช้คีย์ API เพื่อรวม Google Maps กับโมดูล Essential Addons
ขั้นแรกให้ไปที่ คอนโซล Google API และลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ สร้างโครงการใหม่โดยคลิกที่เมนูแบบเลื่อนลงที่ด้านบนแล้วคลิก โครงการใหม่.
ตั้งชื่อโครงการใหม่ของคุณแล้วคลิกปุ่ม CREATE .
เมื่อสร้างโครงการใหม่ของคุณแล้ว ให้เลือกจากเมนูแบบเลื่อนลงแล้วคลิก ห้องสมุด ที่แผงด้านซ้าย
Google แบ่ง Google Maps Platform API ออกเป็น 17 ประเภท คุณสามารถดูได้โดยคลิกที่ลิงค์ แสดงทั้งหมด ในส่วน แผนที่. คุณต้องเปิดใช้งาน API ขึ้นอยู่กับสิ่งที่คุณต้องการทำให้สำเร็จ
ค้นพบยัง: วิธีสร้างเทมเพลตผลิตภัณฑ์เดียวที่กำหนดเองใน WooCommerce ด้วย Elementor
ในกรณีของเรา คุณต้องเปิดใช้งาน API ต่อไปนี้เพื่อเพิ่มแผนที่จาก Google Maps โดยใช้ Essential Addons
- ทิศทาง API
- API การเข้ารหัสทางภูมิศาสตร์
- แผนที่ JavaScript API
- ที่นั่ง API
ในการเปิดใช้งาน API ให้เลือก API ที่คุณต้องการเปิดใช้งาน (โดยคลิกที่มัน) แล้วคลิกที่ปุ่ม เปิดใช้งาน.
เมื่อคุณเปิดใช้งาน API ที่จำเป็นเสร็จแล้ว ให้กลับไปที่แดชบอร์ดหลักของคอนโซล Google API แล้วคลิก ตัวบ่งชี้ ที่แผงด้านซ้าย คลิกที่ปุ่ม สร้างข้อมูลรับรอง และเลือก รหัส API. คัดลอกคีย์ API บนป๊อปอัปที่ปรากฏขึ้น
เข้าสู่ระบบแดชบอร์ด WordPress ของคุณและคลิก ส่วนเสริมที่จำเป็น ที่แผงด้านซ้าย คลิกที่แท็บ องค์ประกอบ และเลื่อนลงมาในส่วน แผนที่ Google ขั้นสูง. Cliquez sur การตั้งค่า และวางคีย์ API ที่คุณเพิ่งคัดลอก
คลิกที่ปุ่ม บันทึกการตั้งค่า เพื่อใช้การเปลี่ยนแปลงใหม่
เริ่มสร้างแผนที่
เมื่อรวม Google Maps และ Essential Addons แล้ว คุณสามารถเริ่มสร้างแผนที่ได้ ในการดำเนินการนี้ ให้สร้างหน้าใหม่ (หน้า – > เพิ่ม ) หรือบทความใหม่ (รายการ -> เพิ่ม) และแก้ไขด้วย Elementor
ก่อนสร้างเพจ ให้ตั้งค่าเค้าโครงโดยคลิกไอคอนรูปเฟืองที่มุมล่างซ้ายเพื่อเปิดแผงการตั้งค่า ตั้งค่าเค้าโครงจากเมนูแบบเลื่อนลง
สร้างส่วนใหม่โดยคลิกปุ่มบวกในกล่องแก้ไข หากต้องการให้แผนที่มีพื้นที่กว้างขึ้น คุณสามารถเลือกโครงสร้างคอลัมน์เดียวได้ ลากวิดเจ็ต อีเอ Google Maps จากแผงด้านซ้ายไปยังพื้นที่แก้ไข
ไปที่แผงด้านซ้ายและตั้งค่าประเภทการ์ดเป็น หลายเครื่องหมาย.
เปิดส่วน การตั้งค่าเครื่องหมายแผนที่ และคลิกที่เครื่องหมายแผนที่ที่มีอยู่เพื่อแก้ไข วางละติจูดและลองจิจูดของตำแหน่งแรกที่คุณต้องการเพิ่มลงในแผนที่ ตั้งชื่อเรื่องเป็นคำอธิบายด้วย
หากต้องการทราบละติจูดและลองจิจูดของสถานที่ ให้เปิด Google Maps แล้วค้นหาสถานที่ (สถานที่) ที่คุณต้องการรับละติจูดและลองจิจูด เมื่อพบแล้วให้คลิกด้วยการคลิกเมาส์ขวาและคลิกซ้ายที่ตัวเลขที่ปรากฏบนเมนูตามบริบท
การดำเนินการนี้ทำให้คุณสามารถคัดลอกละติจูด (ค่าแรก) และลองจิจูด (ค่าที่สอง)
เมื่อเพิ่มละติจูดและลองจิจูดของตำแหน่งแรกเสร็จแล้ว ให้คลิกปุ่ม เพิ่มองค์ประกอบ เพื่อเพิ่มสถานที่อื่นในแผนที่ของคุณ
เปิด Google Maps อีกครั้งและค้นหาตำแหน่งใหม่ที่คุณต้องการเพิ่มลงในแผนที่ และคัดลอกลองจิจูดและลองจิจูดและวางลงในช่องที่เกี่ยวข้องเช่นเดียวกับด้านบน ทำซ้ำขั้นตอนข้างต้นเพื่อเพิ่มตำแหน่งอื่นๆ ลงในแผนที่
อ่าน: วิธีใช้วิดเจ็ตโพสต์ของ Elementor
เมื่อเพิ่มสถานที่เสร็จแล้ว ให้เปิดบล็อก การควบคุมแผนที่ เพื่อเปิด/ปิดคำสั่งที่คุณต้องการระบุบนการ์ดของคุณ คุณยังสามารถตั้งค่าระดับการซูมได้ที่นี่
คุณยังสามารถเปิดบล็อก ธีมแผนที่ เพื่อเลือกธีม Google Maps ที่คุณต้องการใช้
ถึงตอนนี้ คุณสร้างแผนที่ที่มีสถานที่หลายแห่งได้สำเร็จแล้ว คุณสามารถเปิดแท็บ สไตล์ เพื่อกำหนดความสูงและความกว้างของแผนที่
หากคุณต้องการแผนที่แบบเต็มความกว้าง ให้ตั้งค่าส่วนที่มีแผนที่เป็นแบบเต็มความกว้าง ในการทำเช่นนี้ ให้คลิกที่หมายเลขอ้างอิงของส่วน
ในแท็บและบล็อก แบบ กำหนดความกว้างของเนื้อหาเป็น เต็มความกว้างr และเปิดช่องว่างของคอลัมน์ ไม่มีการเบี่ยงเบน
คลิกที่ปุ่ม ที่ตีพิมพ์ER ที่ด้านล่างของแผงด้านซ้ายเพื่อเผยแพร่เพจของคุณ
ฝังแผนที่ในเพจหรือโพสต์
หากด้วยเหตุผลบางอย่างที่คุณต้องการฝังแผนที่ของคุณบนหน้า/โพสต์ (หน้า/โพสต์ที่สร้างด้วยตัวแก้ไขเริ่มต้นของ WordPress — Gutenberg) คุณสามารถใช้ WordPress ปลั๊กอิน Elementor Blocks สำหรับ Gutenberg. ปลั๊กอินนี้จะแปลงเทมเพลต Elementor เป็นบล็อก Gutenberg
หากต้องการบันทึกแผนที่ที่คุณเพิ่งสร้างเป็นเทมเพลต Elementor ให้คลิกไอคอนลูกศรถัดจากปุ่ม เผยแพร่ / อัปเดต และเลือก บันทึกเป็นแม่แบบ.
ตั้งชื่อโมเดลของคุณและคลิกที่ปุ่ม ผู้ลงทะเบียน.
จากนั้น สร้างหน้าหรือโพสต์ใหม่ (ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง ปลั๊กอินองค์ประกอบ บล็อกสำหรับ Gutenberg) เพิ่มบล็อกใหม่แล้วเลือก ไลบรารี Elementor แล้วเลือกเทมเพลตที่คุณเพิ่งสร้างขึ้น
Remarque: หากคุณเห็นข้อความ 'เพื่อวัตถุประสงค์ในการพัฒนาเท่านั้น' เมื่อเพิ่มบัตร อย่าลืมเปิดใช้งานการเรียกเก็บเงินของ Google Cloud นโยบายใหม่ของ Google กำหนดให้นักพัฒนาเปิดใช้งานบัญชีสำหรับการเรียกเก็บเงิน (คุณยังคงสามารถใช้ Google Maps API ได้ฟรี)
รับ Elementor Pro ทันที!!!
สรุป
ดังนั้น ! สำหรับบทความนี้จะแสดงวิธีสร้างแผนที่ที่มีหลายตำแหน่งด้วย Elementor หากคุณมีข้อสงสัยเกี่ยวกับวิธีการเดินทาง โปรดแจ้งให้พวกเขาทราบใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
