ในบทความนี้ ฉันจะแสดงวิธีเพิ่มแผนที่ Google Maps แบบตอบสนองไปยังหน้าเว็บ WordPress (เช่น สำหรับหน้าติดต่อ) โดยไม่ต้องใช้ปลั๊กอิน ฉันจะใช้ WordPress 6.0 สำหรับบทช่วยสอนนี้ เช่นเดียวกับธีม Twenty Twenty Two ซึ่งเป็นธีมเริ่มต้นสำหรับ WordPress เวอร์ชันนี้
คุณลักษณะของ Google แผนที่ทำให้คุณสามารถแสดงตำแหน่งของธุรกิจของคุณบนแผนที่แบบโต้ตอบได้ ทำให้ผู้เยี่ยมชมไซต์สามารถดูตำแหน่งของคุณได้อย่างง่ายดาย และโต้ตอบกับแผนที่เพื่อดูว่ามีอะไรอีกบ้างที่อยู่รอบตัวคุณ ขอเส้นทาง ฯลฯ ซึ่งแสดงให้ผู้เยี่ยมชมไซต์เห็น ว่าคุณเป็นธุรกิจในท้องถิ่นและมีสถานที่ตั้งจริง เป็นเรื่องปกติที่ธุรกิจจะมีแผนที่ในหน้าติดต่อของตน
มีปลั๊กอิน Google Maps อยู่มากมาย แต่หลายปลั๊กอินนั้นใช้งานไม่ได้และต้องชำระเงินสำหรับฟีเจอร์ปลั๊กอินแบบเต็มหรือบัญชีนักพัฒนาซอฟต์แวร์ Google ที่มีขั้นตอนที่ซับซ้อนซึ่งให้ผลลัพธ์ที่น้อยกว่าที่ต้องการ
ทั้งหมดที่กล่าวมานี้ มีวิธีง่ายๆ ในการเพิ่ม Google Maps ให้กับหน้า WordPress 6.0 ของคุณโดยไม่ต้องใช้ปลั๊กอินและไม่ต้องมีขั้นตอนที่ซับซ้อนมากมาย มาดำดิ่งลงไปกันเถอะ
ขั้นตอนที่ 1: สร้าง HTML Block
สำหรับผู้เริ่มต้น ให้เข้าสู่ระบบในส่วนผู้ดูแลระบบของไซต์ WordPress ของคุณและไปที่ส่วน "หน้า" (ลูกศรสีแดงในภาพด้านบน)
คลิกที่เพจที่คุณต้องการเพิ่มคุณลักษณะ Google Maps ของคุณ (คุณสามารถคลิกที่ชื่อเพจ ในกรณีของฉันคือ “ติดต่อ” – ลูกศรสีน้ำเงินในภาพด้านบน – หรือเพียงคลิก “แก้ไข” ใต้ชื่อเพจ)
หากคุณกำลังใช้ธีมบล็อก เช่น Twenty Twenty Two คุณจะอยู่ใน Block Editor สำหรับเพจของคุณ เลื่อนลงไปยังตำแหน่งที่คุณต้องการแทรกแผนที่ของคุณ
จากนั้นคลิกไอคอน "+" ("Block Inserter" – ลูกศรสีแดงในภาพด้านบน) เพื่อแทรกบล็อก
ค้นหา "กลุ่ม" ในช่องค้นหา (มีสีเขียวในภาพ) แล้วคลิกเพื่อเพิ่มบล็อกกลุ่ม (ลูกศรสีแดง) วิธีนี้จะช่วยให้คุณเพิ่มการตั้งค่าแบบกำหนดเองบางอย่างให้กับองค์ประกอบบล็อกได้
ตัวอย่างเช่น คลิกที่ตัวเลือก "เปลี่ยนการจัดแนว" (ลูกศรสีแดง) และเลือก "เต็มความกว้าง" (ลูกศรสีเขียว) ซึ่งจะทำให้ความกว้างของบล็อกที่จะมีแผนที่เชิงโต้ตอบของ Google แผนที่เต็มความกว้าง
จากนั้นคลิกปุ่ม "+" ขนาดใหญ่ภายในกลุ่ม (ลูกศรสีแดงในรูปด้านบน) ค้นหา "HTML" ในแถบค้นหา (เส้นสีเขียว) และคลิกที่บล็อก "HTML ที่กำหนดเอง" (ลูกศรสีน้ำเงิน)
คุณจะเห็นข้อความว่า “เขียน html…” (ลูกศรสีแดง) นี่คือที่ที่เราจะเพิ่มแผนที่ของเรา
ขั้นตอนที่ 2: สร้าง Google Maps Embed HTML
ตอนนี้เราจำเป็นต้องสร้างแผนที่ของเราด้วย Google Maps ในการดำเนินการนี้ ให้เปิดแท็บเบราว์เซอร์ใหม่และไปที่ Google.com หากไม่ใช่เบราว์เซอร์การค้นหาเริ่มต้นของคุณ
ถัดไป พิมพ์ที่อยู่ที่คุณต้องการแสดงบนแผนที่ของคุณ สำหรับตัวอย่างนี้ ฉันจะใช้ตึกเอ็มไพร์สเตท (ลูกศรสีแดง) คุณสามารถใช้ที่อยู่ที่แน่นอนของธุรกิจของคุณสำหรับส่วนนี้ (เช่น หมายเลขถนน เมือง รัฐ และรหัสไปรษณีย์ หรืออะไรก็ได้ที่คุณพิมพ์สำหรับที่อยู่ระหว่างประเทศ หากคุณไม่ได้อยู่ในสหรัฐอเมริกา)
คลิกที่ภาพแผนที่ที่ปรากฏสำหรับที่อยู่ของคุณในหน้าผลลัพธ์ของเครื่องมือค้นหา (ลูกศรสีแดงในภาพ – จะอยู่ตรงกลางของหน้าหรือปิดทางด้านขวา ขึ้นอยู่กับว่าคุณพิมพ์ที่อยู่หรือชื่อ สถานที่เหมือนฉัน)
ที่อยู่ของคุณจะปรากฏเป็นเครื่องหมายบนแผนที่แบบเต็มหน้าจอ (ลูกศรสีแดงในภาพด้านบน) นอกจากนี้ คุณจะเห็นไอคอนหลายไอคอนอยู่ใต้ที่อยู่หรือชื่อของสถานที่ที่คุณค้นหา ไอคอนเหล่านี้รวมถึง "เส้นทาง" "บันทึก" "ใกล้เคียง" "ส่งไปที่โทรศัพท์" และ "แชร์" คลิกที่ไอคอน "แบ่งปัน" (ลูกศรสีน้ำเงิน)
ในแท็บ "แชร์" ที่ปรากฏขึ้น ให้คลิกที่แท็บ "ฝังแผนที่" (ลูกศรสีน้ำเงินในภาพด้านบน)
ในแท็บนี้ คุณจะเห็นตัวอย่างวิดเจ็ต Google Maps ที่ฝังไว้ มีดรอปดาวน์ขนาดที่ด้านซ้ายของโค้ด (ลูกศรสีเขียว) คุณสามารถเลือกขนาดที่สร้างไว้ล่วงหน้าหรือเลือก "กำหนดเอง" เพื่อกำหนดขนาดของคุณเองได้ ฉันจะเลือกตัวเลือก "กำหนดเอง" (ลูกศรสีแดง)
ที่นี่ คุณจะเห็นมิติข้อมูลสำหรับแผนที่ที่กำหนดเองของฉัน ฉันจะกำหนดความสูงหรือมิติแรกเป็น 1200 (ลูกศรสีแดง) ฉันจะปล่อยให้ความกว้างตั้งไว้ที่ 600 คุณสามารถคลิก "ดูตัวอย่างขนาดจริง" (ลูกศรสีเขียว) เพื่อแสดงแผนที่ในหน้าต่างป๊อปอัปใหม่ในขนาดเต็ม (อย่าลืมปิดการใช้งานตัวบล็อกป๊อปอัปถ้าคุณมี เปิดเพื่อหลีกเลี่ยงการปิดกั้นหน้าต่าง) ออกจากหน้าต่างแสดงตัวอย่างเมื่อคุณทำเสร็จแล้ว
จากนั้นคลิกลิงก์ "คัดลอก HTML" (ลูกศรสีน้ำเงิน) นี่คือรหัสที่เราจะนำเข้าสู่หน้า WordPress ของเรา
ขั้นตอนที่ 3: วางโค้ด HTML ลงในหน้า WordPress
กลับไปที่แท็บเบราว์เซอร์ที่มีเว็บไซต์ WordPress ของคุณ คลิกที่บล็อก HTML ว่างที่มีข้อความว่า “เขียน HTML ที่นี่…” และวางโค้ด (ลูกศรสีแดง) โดยกดปุ่ม ctrl+v บนแป้นพิมพ์ (cmd+v บน Mac)
หากคุณคลิกตัวเลือก "ดูตัวอย่าง" ในแถบเครื่องมือบล็อก (ลูกศรสีแดง) คุณจะเห็นแผนที่แสดงบนหน้าเว็บของคุณ (ลูกศรสีเขียว) คลิกกลับไปที่ตัวเลือก “HTML” เพื่อกลับไปยังโค้ด HTML (ลูกศรสีน้ำเงิน)
เรามีแผนที่ฝังอยู่ในหน้าเว็บของเรา แต่ไม่ตอบสนอง หมายความว่าหากเราดูแผนที่บนหน้าจอที่เล็กกว่า เช่น แท็บเล็ตหรือโทรศัพท์ แผนที่จะไม่ปรับขนาดให้พอดีกับหน้าจอ ในการแก้ไขปัญหานี้ เราต้องเพิ่มรูปแบบที่กำหนดเองลงในโค้ด HTML
ขั้นตอนที่ 4: ทำให้ Google Maps ตอบสนอง
ฉันจะ โดยใช้โค้ดที่ได้รับจากเว็บไซต์นี้ เพื่อทำให้ Google Maps ฝังแบบตอบสนอง เลื่อนลงไปที่หัวข้อ "วิธีการฝัง Google Maps แบบตอบสนอง" (ลูกศรสีแดง) จากนั้นเลื่อนลงไปที่โค้ดชุดที่สอง (ลูกศรสีน้ำเงิน)
คัดลอกทุกอย่างจาก “ ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
กลับไปที่ WordPress คลิกเมาส์ที่ด้านหน้าสุดของโค้ด HTML เพื่อแทรกโค้ดใหม่นี้ที่จุดเริ่มต้น (ลูกศรสีแดง) กด ctrl+v เพื่อวางโค้ดของคุณ
สุดท้าย ให้คลิกที่ส่วนท้ายสุดของโค้ด HTML (ลูกศรสีแดง) แล้วพิมพ์ “ ” เพื่อปิดทุกอย่าง โดยพื้นฐานแล้ว สิ่งที่คุณเพิ่งทำคือการห่อโค้ด HTML ของคุณในรูปแบบที่กำหนดเอง รูปแบบนี้บอกให้เบราว์เซอร์ของผู้เยี่ยมชมปรับขนาดแผนที่ตามขนาดของหน้าต่างที่พวกเขากำลังดูอยู่
ขั้นตอนที่ 5: ปรับอัตราส่วนภาพของแผนที่แบบโต้ตอบ
มีสิ่งสุดท้ายที่เราต้องทำ – เลื่อนกลับไปที่ด้านบนของโค้ดจนกว่าคุณจะเห็น “padding-bottom: 75%;” (ลูกศรสีแดง). โค้ดชิ้นนี้กำหนดอัตราส่วนกว้างยาวของแผนที่
เนื่องจากฉันปรับขนาดแผนที่ของฉันเป็น 1200 x 600 แผนที่จึงมีอัตราส่วนกว้างยาว 2: 1 สำหรับสิ่งนี้ ฉันต้องเปลี่ยนเปอร์เซ็นต์เป็น “50%” (ลูกศรสีแดง)
หากคุณไม่แน่ใจว่าควรใช้เปอร์เซ็นต์ใดสำหรับแผนที่ของคุณ ให้ใช้อัตราส่วนกว้างยาว (เช่น 16:9) แล้วหารตัวเลขที่สองด้วยตัวแรกเพื่อให้ได้เปอร์เซ็นต์ของคุณ (9 หารด้วย 16 คือ 56.25%)
คลิก "อัปเดต" เพื่อใช้การเปลี่ยนแปลงของคุณ (ลูกศรสีน้ำเงินในภาพด้านบน) จากนั้นคลิก "ดูหน้า" ที่มุมล่างซ้ายเพื่อดูผลลัพธ์
ตอนนี้คุณควรเห็นวิดเจ็ต Google Maps ของคุณปรากฏขึ้น (ลูกศรสีแดงในภาพด้านบน)
คุณสามารถทดสอบการตอบสนองโดยย่อขนาดเบราว์เซอร์ของคุณ จากนั้นเลื่อนกลับไปที่พื้นที่ของหน้าเว็บที่มีแผนที่
เพียงเท่านี้สำหรับบทช่วยสอนนี้! หากคุณชอบและต้องการเรียนรู้วิธีสร้างเว็บไซต์ WordPress แบบมืออาชีพตั้งแต่เริ่มต้น คุณสามารถลงทะเบียนใน my หลักสูตร WordPress 6.0 สำหรับ Non-Coders บน Udemyหรือดูบทแนะนำอื่นๆ ของฉัน!
