วิธีเพิ่มแผนที่ในหน้าติดต่อ WordPress ของคุณ

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

ในส่วนนี้ เราจะแสดงวิธีสร้างหน้าติดต่อและหน้าแผนที่ใน WordPress โดยใช้ปลั๊กอิน 7 แบบฟอร์มติดต่อและเทมเพลตการติดต่อธีมของเรา ต้องติดตั้งและเปิดใช้งานปลั๊กอิน Contact Form 7 บนไซต์ WordPress ของคุณจึงจะมีประสิทธิภาพ ฉันต้องทำอย่างไรเพื่อสร้าง Map ฝัง iframe ลงใน Google Maps Visual Composer ต่อไปนี้คือวิธีสร้างหน้าติดต่อและแผนที่ด้วยธีม WordPress การสนับสนุนลูกค้าให้บริการตลอด 24 ชั่วโมง 7 วันต่อสัปดาห์โดยพนักงานที่ได้รับรางวัล Visualmodo หากต้องการค้นหาละติจูด / ลองจิจูด และแปลงที่อยู่ของคุณเป็นละติจูด / ลองจิจูด ให้ไปที่ http://www.latlong.net/convert-address-to-lat-long.html นอกจากนี้ คุณต้องสร้างคีย์ Google Maps API เพื่อป้อนฟิลด์ตัวเลือกแผนที่ติดต่อบนคอมพิวเตอร์ของคุณ

ฉันสามารถเพิ่มแผนที่ไปยัง WordPress ได้หรือไม่

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

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

ปลั๊กอิน WP Google Maps ทำให้เพิ่ม Google Maps ลงในบทความและหน้าของ WordPress ได้อย่างง่ายดาย คุณสามารถสร้างแผนที่ภาพขนาดย่อด้วยไลท์บ็อกซ์สำหรับ Google แผนที่ในเวลาไม่กี่นาทีด้วยวิดเจ็ตแผนที่สำหรับ Google แผนที่ ขนาดแผนที่ที่กำหนดเองของ Google ประเภทแผนที่ (เช่น แผนที่ถนน) แบบแผนสี และไอคอนหมุดแผนที่ที่กำหนดเองเป็นคุณลักษณะที่มีอยู่ Supsystic Ultimate Maps รองรับตัวเลือกแผนที่อื่น เช่น Bing Maps, OpenStreetMap, Leaflet, Mapbox และ Thunderforest นอกเหนือจาก Bing Maps ปลั๊กอินใช้บริการ Mapbox เช่น Studio Styles และไลบรารี GL JS คุณสามารถใช้ปลั๊กอิน Interactive Geo Maps เพื่อสร้างไซต์ WordPress ที่แสดงแผนที่แบบโต้ตอบได้ คุณสามารถจับคู่ตำแหน่งร้านค้าได้อย่างง่ายดายโดยใช้ปลั๊กอิน WP Store Locator

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

ฉันจะสร้าง Google Map แบบกำหนดเองใน WordPress ได้อย่างไร

เมื่อคุณคลิกที่ Plugins ให้เพิ่มคุณสมบัติใหม่ โปรดพิมพ์ชื่อ Snazzy Maps ลงในช่องค้นหาหากคุณกำลังมองหาปลั๊กอิน หลังจากที่คุณพบมันแล้ว เพียงแค่คลิกปุ่มติดตั้ง มันจะเปิดใช้งาน ตอนนี้สามารถเข้าถึงได้ภายใต้ลักษณะที่ปรากฏ

ฉันจะเพิ่มไอคอนแผนที่ใน WordPress ได้อย่างไร

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

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

หน้าติดต่อกับแผนที่ Html

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

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

ฟังก์ชันนี้รวมอยู่ใน HTML5 สำหรับเรา เมื่อเราป้อนข้อมูลสุดท้ายในบรรทัดที่ 11 จะมีปุ่มแบบฟอร์มให้ส่ง ข้อความที่ปรากฏขึ้นเมื่อเราคลิกปุ่มส่งสามารถดูได้ในแอตทริบิวต์ค่า

วิธีเพิ่ม Google Map ในส่วนท้ายของ WordPress

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

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

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

หมวดหมู่นี้รวมถึงแผงวิดเจ็ต WordPress เมื่อคุณคลิก ” บล็อกวิดเจ็ต 'AIO Local - แผนที่' จะปรากฏขึ้น และคุณจะสามารถดูตำแหน่งของคุณบนหน้าจอวิดเจ็ตได้ จากนั้นคุณสามารถเลือกการตั้งค่าสำหรับวิดเจ็ตได้ หากคุณมีสถานที่หลายแห่ง คุณสามารถเพิ่มชื่อ เปลี่ยนความกว้างและความสูงของแผนที่ หรือเพิ่มตำแหน่งลงในแผนที่

ฉันจะเพิ่มรหัสย่อ Google Map ลงใน WordPress ได้อย่างไร

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

5 ขั้นตอนในการเพิ่มแผนที่ไปยังไซต์ WordPress ของคุณ

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

แบบฟอร์มการติดต่อ พร้อมแผนที่

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

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

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