คู่มือฉบับสมบูรณ์: วิธีฝัง Google Maps ใน WordPress

วิธีฝังตำแหน่ง Google Maps เดียวใน WordPress

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

นี่คือวิธีการทำงานทั้งหมด:

ไปที่เว็บไซต์ Google Maps ตามปกติและค้นหาตำแหน่งที่คุณต้องการฝัง คุณสามารถค้นหาอะไรก็ได้ นั่นคือ:

• ทั้งประเทศ
• เมืองที่เฉพาะเจาะจง
• ธุรกิจเฉพาะ
• มันชื่อคุณ

ไม่เป็นไรจริงๆ!

เมื่อคุณมีตำแหน่งที่ต้องการแสดงบนแผนที่แล้ว ให้มองหาปุ่ม แชร์ ในแถบด้านข้างทางซ้าย:

คุณควรเห็นป๊อปอัปขนาดเล็กปรากฏขึ้น คลิกตัวเลือก ฝังแผนที่ ในป๊อปอัปนั้น:

จากนั้นเลือกขนาดที่คุณต้องการจากเมนูแบบเลื่อนลง และเมื่อคุณเลือกขนาดที่ต้องการแล้ว ให้คัดลอกโค้ดในกล่อง:

ตอนนี้ ไปที่โพสต์ WordPress หรือหน้าที่คุณต้องการฝังกล่อง Google Maps

ใน WordPress Editor ให้สลับไปที่แท็บ ข้อความ แล้ววางโค้ดที่คุณคัดลอกจาก Google Maps ในตำแหน่งที่คุณต้องการให้แผนที่ของคุณปรากฏ:

ตอนนี้ เผยแพร่โพสต์ของคุณตามปกติ และคุณควรเห็นกล่อง Google Maps ของคุณที่ส่วนหน้าของไซต์ WordPress ของคุณ:

ง่ายพอใช่มั้ย?

คุณยังสามารถใช้วิธีที่คล้ายกันเพื่อฝังเส้นทาง Google Maps ใน WordPress ข้อแตกต่างเพียงอย่างเดียวคืออินเทอร์เฟซเริ่มต้น แทนที่จะเห็นปุ่ม แชร์ ทันที คุณจะต้องคลิกไอคอนแฮมเบอร์เกอร์แล้วเลือกตัวเลือก แชร์หรือฝังแผนที่ :

วิธีฝัง Google Maps ด้วยเครื่องหมายตำแหน่งหลายตำแหน่งใน WordPress

หากคุณต้องการฝังกล่อง Google Maps ที่มีเครื่องหมายบอกตำแหน่งหลายอันลงใน WordPress สิ่งต่างๆ จะแตกต่างกันเล็กน้อย

แม้ว่าฉันจะแสดงปลั๊กอิน Google Maps WordPress สองตัวเพื่อช่วยให้คุณดำเนินการได้ในส่วนถัดไป แต่ จริงๆ แล้วคุณไม่จำเป็นต้องมีปลั๊กอินเพื่อดำเนินการดัง กล่าว

คุณสามารถสร้างแผนที่ของคุณเองโดยใช้ Google My Maps แล้วฝังแผนที่นั้นใน WordPress โดยใช้วิธีการเดียวกันกับที่แสดงไว้ด้านบน

ในการเริ่มต้น ให้ไปที่ Google My Maps แล้วคลิก เริ่มต้น เพื่อเปิดอินเทอร์เฟซ ในอินเทอร์เฟซ คลิกตัวเลือกเพื่อ สร้างแผนที่ใหม่ :

จากนั้น ใช้อินเทอร์เฟซเพื่อสร้างแผนที่ของคุณ การเริ่มต้นใช้งานอาจยุ่งยากเล็กน้อย แต่เมื่อคุณคุ้นเคยกับสิ่งต่างๆ แล้ว ก็ใช้งานได้ง่ายมาก คุณสามารถค้นหาสิ่งต่างๆ ได้โดยใช้ช่องค้นหา และคุณสามารถเพิ่มเครื่องหมายบนแผนที่โดยใช้ปุ่ม Marker :

เมื่อคุณพอใจกับแผนที่แล้ว ให้คลิกที่ไอคอน Three Dot ที่ด้านบนและเลือก Embed on my site

จากนั้น เหมือนกับเมื่อก่อน คุณสามารถวางโค้ดที่ Google Maps ให้ไว้ในแท็บ ข้อความ ของ WordPress Editor เพื่อแสดงแผนที่บนเว็บไซต์ WordPress ของคุณ

ปลั๊กอิน WordPress เพื่อช่วยให้คุณทำงานกับ Google Maps ได้มากขึ้น

แม้ว่าคุณจะไม่ต้องการปลั๊กอินเพื่อจัดการกับการฝัง Google แผนที่พื้นฐานอย่างที่ฉันแสดงให้คุณเห็นข้างต้น ปลั๊กอินก็มีประโยชน์หากคุณต้องการความยืดหยุ่นมากขึ้น (หรือหากคุณต้องการ วิธีที่เป็นมิตรกับผู้ใช้มากขึ้นใน การใช้ความยืดหยุ่นนั้น)

ปลั๊กอินส่วนใหญ่ไม่ได้ทำอะไรที่คุณไม่สามารถทำได้ด้วยตัวเองด้วยจาระบีข้อศอกที่เพียงพอ – แต่มันทำให้ heckuva ง่ายขึ้นและเป็นมิตรกับผู้ใช้มากขึ้น ต่อไปนี้คือปลั๊กอินบางส่วนที่จะช่วยให้คุณทำงานได้ดีขึ้นกับ Google Maps

WP Google Maps

WP Google Maps เป็นปลั๊กอิน Google Maps ฟรีที่ได้รับความนิยมมากที่สุดในไดเรกทอรีปลั๊กอิน WordPress.org

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

ข้อเสียเพียงอย่างเดียวคือเวอร์ชันฟรีให้คุณสร้างแผนที่เดียวเท่านั้น หากคุณต้องการหลายแผนที่ คุณจะต้องซื้อเวอร์ชันพรีเมียมหรือใช้โซลูชันอื่น

ในการเริ่มต้น ให้ติดตั้งและเปิดใช้งาน WP Google Maps เนื่องจากมีการระบุไว้ที่ WordPress.org คุณจึงทำได้โดยตรงจากแดชบอร์ด WordPress ของคุณ

เมื่อคุณเปิดใช้งานแล้ว ให้ไปที่ตัวเลือก แผนที่ ใหม่ในแถบด้านข้างของคุณเพื่อเริ่มต้น

ก่อนที่คุณจะสร้างแผนที่แรกได้ คุณจะต้องรับคีย์ JavaScript API ของ Google Maps และป้อนลงในการตั้งค่าของปลั๊กอิน คุณสามารถทำได้โดยทำตามคำแนะนำเหล่านี้:

เมื่อคุณป้อนคีย์ API ของคุณแล้ว คุณสามารถแก้ไขค่าเริ่มต้น แผนที่แรกของฉัน ได้ ( โปรดจำไว้ว่า – เวอร์ชันฟรีของปลั๊กอินนี้ช่วยให้คุณสร้างแผนที่เดียวเท่านั้น ):

ใช้อินเทอร์เฟซเพื่อสร้างแผนที่ของคุณ เมื่อเสร็จแล้ว คุณสามารถฝังไว้ที่ใดก็ได้ในไซต์ของคุณโดยใช้รหัสย่อ:

มันง่ายและยืดหยุ่นมาก – ข้อเสียเพียงอย่างเดียวคือข้อจำกัดแผนที่เดียวในเวอร์ชันฟรี

ตัวสร้างแผนที่

อีกตัวเลือกที่ดีในการสร้าง Google Maps ที่ฝังด้วยปลั๊กอิน WordPress คือ Maps Builder

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน คุณจะได้รับแท็บ Google แผนที่ ใหม่ในแถบด้านข้างของแดชบอร์ด เช่นเดียวกับ WP Google Maps คุณจะต้องเพิ่มคีย์ Google Maps API ก่อนจึงจะสามารถเริ่มต้นใช้งานปลั๊กอินได้

เมื่อคุณทำเช่นนั้น คุณสามารถไปที่ Google แผนที่ → เพิ่มใหม่ เพื่อสร้างแผนที่ใหม่ ในอินเทอร์เฟซนั้น ให้คลิกปุ่ม Open Map Builder เพื่อเปิดอินเทอร์เฟซที่เป็นมิตรต่อผู้ใช้:

ที่นั่น คุณสามารถสร้างแผนที่โดยใช้แถบด้านข้างของปลั๊กอิน:

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

WP Store Locator

หากคุณต้องการใช้ Google Maps เพื่อแสดงที่ตั้งร้านค้าหลายแห่งบนไซต์ WordPress ของคุณโดยเฉพาะ ( เป็นความต้องการทั่วไป! ) คุณควรเลือกใช้ปลั๊กอินระบุตำแหน่งร้านโดยเฉพาะ

แม้ว่าคุณจะพบปลั๊กอินหลายตัวที่จะทำสิ่งนี้ แต่ฉันชอบ WP Store Locator เพราะมันยืดหยุ่นและดูดี

ใช้โมดูล Google Maps ของตัวสร้างเพจโปรดของคุณ

ผู้สร้างเพจ WordPress ส่วนใหญ่ มีองค์ประกอบ/โมดูล Google Maps โดยเฉพาะเพื่อช่วยให้คุณฝังเนื้อหา Google Maps ในการออกแบบของคุณ

ตัวอย่างเช่น ปลั๊กอิน Divi Builder ยอดนิยมรวมถึงโมดูล Google Maps ที่คุณสามารถปรับแต่งบิตที่เหมาะสมผ่านอินเทอร์เฟซของปลั๊กอิน:

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

A Fun Tweak สำหรับผู้ใช้ขั้นสูง

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

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

ตัวอย่างเช่น คุณสามารถสร้างฟิลด์บนแบ็กเอนด์ของ WordPress ซึ่งผู้ใช้เพียงแค่ต้องวางที่อยู่ในตำแหน่ง

จากนั้น ด้วยการประมวลผลล่วงหน้าเล็กน้อยเพื่อลบช่องว่าง คุณสามารถแทรกที่อยู่นั้นลงในสิ่งที่ต้องการด้านล่างใน iframe ในไฟล์เทมเพลตของธีมของคุณ:

แล้วโว้ย! ทั้งหมดที่ผู้ใช้ต้องทำคือป้อนที่อยู่ใน WordPress Editor และการฝัง Google Maps จะปรากฏขึ้นที่ส่วนหน้าของตำแหน่งนั้นโดยอัตโนมัติ

อีกครั้ง – วิธีนี้ต้องใช้ความรู้พื้นฐานเกี่ยวกับ PHP และฟิลด์ที่กำหนดเองอย่างแน่นอน – แต่เป็นแฮ็คที่ยอดเยี่ยมที่จะช่วยประหยัดเวลา

ห่อของ

ไม่ว่าคุณจะต้องการทำสิ่งพื้นฐาน เช่น ฝังตำแหน่ง Google แผนที่ปกติลงใน WordPress หรือก้าวไปสู่ขั้นสูงขึ้นด้วยเครื่องหมายแผนที่หลายอันหรือการสร้างแผนที่อัตโนมัติ คุณมีตัวเลือกมากมาย

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

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