วิธีเพิ่มแผนที่ Google Maps ใน WordPress

การเพิ่มแผนที่ Google Maps ใน WordPress ช่วยให้ผู้เข้าชมดูตำแหน่งร้าน สำนักงาน หรือสถานที่นัดหมายได้สะดวกขึ้น โดยไม่ต้องออกจากเว็บไซต์ สำหรับเว็บไซต์ ComSiam หรือธุรกิจที่มีหน้าติดต่อ การแสดงแผนที่พร้อมที่อยู่และช่องทางติดต่อช่วยให้ข้อมูลสถานที่ครบถ้วนขึ้น

วิธีที่ทำได้ง่ายคือสร้างแผนที่สำหรับฝังจาก Google Maps แล้วใช้ปลั๊กอินแผนที่ที่รองรับการวางข้อมูลฝัง วิธีนี้ไม่ต้องแก้ไขไฟล์ธีมหรือเขียนโค้ดเอง

❶ เตรียมตำแหน่งที่ต้องการแสดง

ก่อนเพิ่มแผนที่ ให้ค้นหาชื่อสถานที่หรือที่อยู่ใน Google Maps แล้วตรวจสอบหมุดให้ตรงกับตำแหน่งจริง โดยเฉพาะธุรกิจที่มีหลายสาขา ควรเลือกตำแหน่งของสาขาที่ต้องการแสดงให้ถูกต้อง

หากค้นหาชื่อธุรกิจแล้วไม่พบ ให้ลองค้นหาด้วยที่อยู่หรือชื่อถนนแทน และตรวจสอบตำแหน่งหมุดก่อนนำไปใช้

❷ สร้างข้อมูลแผนที่สำหรับฝัง

① เปิดตัวเลือกแชร์แผนที่

เมื่อเปิดตำแหน่งที่ถูกต้องแล้ว เลือกเมนู แชร์ จากนั้นเลือกตัวเลือกสำหรับฝังแผนที่ หากมีตัวเลือกขนาดแผนที่ ให้เลือกขนาดที่เหมาะกับพื้นที่บนหน้าเว็บ

② คัดลอกข้อมูลสำหรับฝัง

คัดลอกข้อมูลที่ Google Maps สร้างให้ แล้วเก็บไว้ชั่วคราวเพื่อนำไปวางในปลั๊กอินแผนที่ ขั้นตอนนี้ไม่จำเป็นต้องนำข้อมูลไปแสดงเป็นข้อความบนหน้าเว็บไซต์โดยตรง

❸ เพิ่มแผนที่ใน WordPress ด้วยปลั๊กอิน

ปลั๊กอินแผนที่แต่ละตัวมีชื่อเมนูและหน้าตาการตั้งค่าต่างกัน ให้เลือกปลั๊กอินที่มีบล็อกสำหรับแทรกแผนที่ หรือมีช่องสำหรับวางข้อมูลแผนที่ที่สร้างไว้

① ติดตั้งปลั๊กอินแผนที่

จากหน้าแอดมิน WordPress ไปที่ ปลั๊กอิน > เพิ่มปลั๊กอินใหม่ ค้นหาปลั๊กอินแผนที่ที่ต้องการ ตรวจสอบชื่อผู้พัฒนา รีวิว และการอัปเดตล่าสุดก่อนติดตั้ง จากนั้นเปิดใช้งานปลั๊กอิน

② เพิ่มแผนที่ในหน้าเว็บ

เปิดหน้าหรือบทความที่ต้องการแสดงแผนที่ เพิ่มบล็อกของปลั๊กอิน แล้ววางข้อมูลแผนที่ในช่องที่กำหนด หากปลั๊กอินมีตัวเลือกปรับขนาด ให้กำหนดความกว้างและความสูงให้เหมาะกับหน้า

③ เผยแพร่และตรวจสอบหน้าเว็บ

บันทึกหรือเผยแพร่หน้า แล้วเปิดดูจากหน้าเว็บไซต์จริง ตรวจว่าแผนที่แสดงครบ ไม่ล้นหน้าจอ และหมุดอยู่ในตำแหน่งที่ถูกต้อง ควรตรวจทั้งบนคอมพิวเตอร์และโทรศัพท์มือถือ

❹ เพิ่มแผนที่ด้วยเครื่องมือสร้างหน้าเว็บ

หากเว็บไซต์ใช้เครื่องมือสร้างหน้าเว็บ เช่น Page Builder ให้ตรวจว่ามีวิดเจ็ต Google Maps หรือวิดเจ็ตแผนที่อยู่แล้วหรือไม่ วิธีนี้อาจตั้งตำแหน่งด้วยที่อยู่หรือพิกัด และปรับระดับการซูมได้จากหน้าตั้งค่า

บางวิดเจ็ตอาจต้องใช้ API key หรือเปิดใช้บริการเพิ่มเติม ให้ทำตามข้อกำหนดที่เครื่องมือแสดง และตรวจสอบค่าใช้จ่ายหรือเงื่อนไขการใช้งานก่อนเปิดใช้

❺ ปรับขนาดและตำแหน่งแผนที่ให้ใช้งานง่าย

วางแผนที่ใกล้กับที่อยู่ เบอร์โทรศัพท์ หรือข้อมูลการเดินทาง เพื่อให้ผู้เข้าชมเห็นข้อมูลสำคัญได้ในบริเวณเดียวกัน ตั้งความสูงให้มองเห็นพื้นที่โดยรอบ แต่ไม่กินพื้นที่มากจนกลบเนื้อหาส่วนอื่น

บนโทรศัพท์มือถือ แผนที่ควรปรับตามความกว้างหน้าจอ หากปลั๊กอินมีตัวเลือกแสดงผลแบบ Responsive ให้เปิดใช้งาน และตรวจหน้าเว็บบนอุปกรณ์จริงหลังบันทึกการตั้งค่า

❻ แก้ปัญหาเมื่อแผนที่ไม่แสดง

หากแผนที่ไม่ปรากฏหรือแสดงไม่ถูกต้อง ให้ตรวจทีละจุดดังนี้

① ตรวจข้อมูลแผนที่ที่วางไว้

กลับไปที่หน้าตั้งค่าปลั๊กอิน แล้วตรวจว่าคัดลอกข้อมูลมาครบและวางในช่องที่ถูกต้อง หากตำแหน่งผิด ให้สร้างข้อมูลฝังใหม่จากแผนที่ที่เลือกไว้

② ตรวจปลั๊กอินและแคช

ตรวจว่าปลั๊กอินยังเปิดใช้งานอยู่ และลองล้างแคชของเว็บไซต์หรือปลั๊กอินแคชก่อนเปิดหน้าเว็บใหม่ หากเพิ่งเปลี่ยนปลั๊กอินหรือธีม ให้ตรวจว่ามีการตั้งค่าชนกันหรือไม่

③ ตรวจการตั้งค่า API key

หากใช้วิดเจ็ตหรือปลั๊กอินที่กำหนดให้ใช้ API key ให้ตรวจว่ากรอกคีย์ถูกต้องและเปิดใช้บริการที่จำเป็นแล้ว ข้อกำหนดนี้ขึ้นอยู่กับปลั๊กอินและรูปแบบแผนที่ที่เลือก

❼ ดูแลความเร็วและประสบการณ์ผู้เข้าชม

แผนที่แบบโต้ตอบอาจโหลดทรัพยากรเพิ่มเติม โดยเฉพาะหน้าที่มีแผนที่หลายจุด ควรใส่เฉพาะหน้าที่ผู้เข้าชมจำเป็นต้องใช้ และหลีกเลี่ยงการแสดงแผนที่ซ้ำหลายตำแหน่งในหน้าเดียว

ควรใส่ที่อยู่เป็นข้อความไว้ใกล้แผนที่ด้วย เผื่อผู้เข้าชมใช้โปรแกรมอ่านหน้าจอ แผนที่โหลดช้า หรือมีการตั้งค่าความเป็นส่วนตัวที่ปิดกั้นเนื้อหาจากภายนอก เมื่อเพิ่มแผนที่ให้หน้าเว็บไซต์ ComSiam แล้ว ควรทดสอบการแสดงผลและตรวจความถูกต้องของตำแหน่งเป็นระยะ