วิธีเพิ่ม Google Map ที่ตอบสนองใน WordPress

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

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

เพิ่ม Google Maps ด้วยตนเอง

การฝังแผนที่

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

1. ไปที่ Google Maps และป้อนตำแหน่ง

2. คลิกปุ่มค้นหา

3. เลือก “แชร์” (จะเป็นตัวเลือกทางขวามือ)

4. คัดลอกโค้ดฝัง ตรวจสอบให้แน่ใจว่าได้เลือกทั้งหมดแล้วก่อนที่จะคัดลอก

การเพิ่มแผนที่ใน WordPress

ในการเพิ่มแผนที่ คุณจะต้องแก้ไขโพสต์หรือเพจ จุดที่ดีในการเพิ่มแผนที่ของคุณคือหน้าติดต่อหรือโพสต์ใดๆ ที่พูดถึงสถานที่เฉพาะที่ผู้ใช้ของคุณอาจต้องการค้นหา

5. ไปที่ โพสต์ > เพิ่ม หรือ หน้า > เพิ่ม

6. เปิดตัวแก้ไข HTML (ในโหมดข้อความ) และวางโค้ดฝังตัวที่ใดก็ตามที่คุณต้องการให้แผนที่ปรากฏ

7. เลือก บันทึกฉบับร่าง อัปเดต หรือเผยแพร่ ขึ้นอยู่กับความต้องการของคุณ

หากคุณดูหน้า คุณควรเห็นแผนที่ของคุณ หากแผนที่ไม่ปรากฏขึ้น ให้ตรวจสอบอีกครั้งว่าคัดลอกและวางโค้ดสำหรับฝังทั้งหมดลงในโปรแกรมแก้ไขแล้ว

ทำให้แผนที่ตอบสนอง

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

คุณอาจสังเกตเห็นว่ามีการวัดความกว้างและความสูงใน iframe ที่คุณวางลงในตัวแก้ไข คุณจะต้องทำการปรับเปลี่ยนบางอย่างเพื่อให้แผนที่ตอบสนอง CSS แบบธรรมดาบางตัวจะทำเคล็ดลับได้ สิ่งที่ต้องทำคือแท็ก div พิเศษรอบโค้ดฝังตัว ใช้ class responsive-map เพื่อให้โค้ดของคุณมีลักษณะดังนี้:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

เพิ่ม CSS

การเพิ่มคุณสมบัติ CSS เหล่านี้ลงในสไตล์ชีตของคุณเป็นสิ่งสุดท้ายที่ต้องทำ แน่นอน คุณอาจต้องการปรับเปลี่ยนสิ่งต่างๆ เล็กน้อยขึ้นอยู่กับการออกแบบหน้าเว็บของคุณ

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

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

ตรวจสอบรหัสทั้งหมดด้วย CodePen นี้!

การเพิ่มแผนที่ด้วย MapPress Easy Google Plugin

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

ในการเริ่มต้น คุณจะต้องติดตั้งและเปิดใช้งาน MapPress Easy Google Maps บนไซต์ WordPress ของคุณ

การตั้งค่าปลั๊กอิน

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

กำลังเพิ่มแผนที่

อีกครั้ง ในการเพิ่มแผนที่ คุณจะต้องแก้ไขโพสต์หรือเพจ

1. ไปที่ โพสต์ > เพิ่ม หรือ หน้า > เพิ่ม

2. เลื่อนลงไปที่ส่วน MapPress บนหน้าจอแก้ไขและเลือก "แผนที่ใหม่"

3. คุณจะเห็นตัวแก้ไข MapPress ซึ่งคุณสามารถป้อนที่อยู่สำหรับแผนที่ของคุณ แม้ว่าคุณจะไม่มีที่อยู่ที่แน่นอน ให้ลองป้อนชื่อสถานที่แล้วระบบจะค้นหาให้คุณเอง หากคุณต้องการแชร์ตำแหน่งของคุณ ลิงก์ "ตำแหน่งของฉัน" จะอนุญาตให้ปลั๊กอินตรวจหาตำแหน่งของคุณโดยอัตโนมัติ

4. เพิ่มชื่อลงในแผนที่ของคุณและเลือกขนาดแผนที่

หมายเหตุ: ความกว้างของแผนที่สามารถระบุเป็นเปอร์เซ็นต์ได้ในตัวแก้ไขแผนที่หรือรหัสย่อ ทำให้เหมาะสำหรับอุปกรณ์เคลื่อนที่ ความสูงมักจะคงที่ หากคุณต้องการเพิ่มความสูงและความกว้างให้กับรหัสย่อ จะมีลักษณะดังนี้: [mappress map width="100%" height="400"]

5. คลิกที่ "บันทึก" จากนั้น "แทรกลงในโพสต์" แผนที่จะอยู่ในโพสต์ของคุณ

6. อัปเดตหรือเผยแพร่โพสต์ของคุณเพื่อดูแผนที่

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

ทดสอบบน Local!

ข้อควร จำ: คุณไม่ควรทำการเปลี่ยนแปลงบนเว็บไซต์จริง แอปพัฒนาในพื้นที่ฟรีของเราจะช่วยให้คุณลดความซับซ้อนของขั้นตอนการทำงานและทดลองกับไซต์ของคุณได้อย่างปลอดภัย ลองวันนี้!

บทความนี้เผยแพร่ครั้งแรกเมื่อวันที่ 2 กุมภาพันธ์ 2016 อัปเดตล่าสุดเมื่อวันที่ 14 กุมภาพันธ์ 2018