วิธีเพิ่มการค้นหาตำแหน่งไปยังเว็บไซต์ไดเร็กทอรีใน WordPress . อย่างง่ายดาย

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

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

อย่างไรก็ตาม หากคุณมีเว็บไซต์ไดเรกทอรีที่สร้างด้วยปลั๊กอินหรือธีมอื่นอยู่แล้ว คุณสามารถข้ามขั้นตอนแรกและเลื่อนไปที่ “วิธีแก้ไข “อ๊ะ! อะไรบางอย่างผิดปกติ. หน้านี้ไม่ได้โหลด Google Maps อย่างถูกต้อง” ” สำหรับการแก้ไขปัญหาข้อผิดพลาดที่พบบ่อยที่สุด

มาเริ่มกันเลยดีกว่า!

การติดตั้ง HivePress

ก่อนอื่น คุณต้องติดตั้ง HivePress คุณสามารถติดตั้งเป็นปลั๊กอินฟรีอื่นๆ ใน WordPress ได้ เพียงไปที่ส่วน เสริม > เพิ่มใหม่ และค้นหาด้วยแถบค้นหา จากนั้นติดตั้งและเปิดใช้งานในที่สุดโดยคลิกที่ปุ่ม “เปิดใช้งาน” เมื่อคุณติดตั้งเสร็จแล้ว คุณสามารถไปยังขั้นตอนถัดไป – ติดตั้งส่วนขยาย

นอกจากนี้ หากคุณพบว่ามันยาก คุณสามารถทำตาม screencast ด้านล่างเพื่อติดตั้ง HivePress ได้โดยตรงจากแดชบอร์ดของ WordPress

การติดตั้งส่วนขยาย

ขั้นตอนต่อไปคือการติดตั้งส่วนขยายตำแหน่งทางภูมิศาสตร์เพื่อให้ผู้ใช้สามารถค้นหารายชื่อตามสถานที่ตั้งได้ ในการติดตั้ง เพียงวางเมาส์เหนือส่วน HivePress แล้วคลิกลิงก์ "ส่วนขยาย" ค้นหาส่วนขยายตำแหน่งทางภูมิศาสตร์ในรายการ คลิกที่ปุ่ม "ติดตั้ง" และสุดท้ายเปิดใช้งานส่วนขยาย

นอกจากนี้ screencast ต่อไปนี้ยังแสดงกระบวนการทั่วไปในการติดตั้งส่วนขยาย HivePress เพื่อให้คุณสามารถทำตามขั้นตอนทีละขั้นตอนได้

การสร้างโครงการใหม่

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

ตอนนี้คุณต้องสร้างโครงการโดยคลิกที่ปุ่ม "สร้างโครงการ" จากนั้นตั้งชื่อและสุดท้ายคลิกที่ปุ่ม "สร้าง"

การตั้งค่าการเรียกเก็บเงิน

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

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

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

การสร้างคีย์ API

ขั้นตอนต่อไปคือการสร้างคีย์ API สำหรับเว็บไซต์ของคุณ โดยไปที่หน้าข้อมูลรับรองและเลือกโครงการของคุณ

ในหน้าข้อมูลรับรอง คุณจะเห็นคีย์ API ที่สร้างขึ้นแล้ว หากคุณเพิ่งสร้างบัญชีสำหรับการเรียกเก็บเงิน ระบบอาจสร้างคีย์โดยอัตโนมัติ ในกรณีนี้ คุณสามารถคลิกเพื่อแก้ไขได้ อย่างไรก็ตาม หากไม่มีคีย์ API ในหน้า คุณสามารถสร้างใหม่ได้ในส่วน Create Credentials > API key

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

ตอนนี้คุณต้องตั้งค่าข้อจำกัด API ในช่องถัดไป คลิก จำกัดคีย์ และเลือก Maps JavaScript API, Places API, Geocoding API จากเมนูแบบเลื่อนลง หากบาง API ที่กล่าวถึงไม่อยู่ในรายการ คุณต้องเปิดใช้งานบนหน้าไลบรารี Maps API ก่อน เมื่อเปิดใช้งานและเลือก Google API ทั้งสามในเมนูแบบเลื่อนลงแล้ว ให้คลิกปุ่ม "บันทึก"

การเปิดใช้งาน Google Maps Integration

แค่นั้นแหละ! คุณเพิ่งสร้างคีย์ API และขั้นตอนสุดท้ายคือการเปิดใช้งาน Google Maps บนเว็บไซต์ของคุณ ก่อนอื่นให้คัดลอกคีย์ API ในหน้า APIs & Services > Credentials ตอนนี้ หากคุณใช้ปลั๊กอิน HivePress ให้ไปที่แดชบอร์ด WordPress และไปที่ส่วน HivePress > การตั้งค่า > การผสานการทำงาน > Google Maps จากนั้นวางคีย์ API ของคุณลงในช่องที่เหมาะสมแล้วคลิกปุ่ม "บันทึกการเปลี่ยนแปลง" เพื่อเพิ่มการค้นหาตำแหน่งลงในเว็บไซต์ของคุณ

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

การแก้ไขปัญหา

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

หากต้องการทราบสาเหตุของข้อผิดพลาดนั้น คุณต้องเปิด JavaScript Console คุณสามารถเปิดได้ด้วยการกดแป้น 2-3 ครั้งที่แตกต่างกันไปตามเบราว์เซอร์ของคุณ ตรวจสอบคำตอบใน StackOverflow ที่อธิบายวิธีเปิด JavaScript Console หากคุณใช้เบราว์เซอร์ Chrome คุณสามารถกด CTRL+Shift+I เพื่อเปิด เมื่อคุณเปิดขึ้นมา คุณควรเห็นข้อความแสดงข้อผิดพลาด ประมาณนี้

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

• MissingKeyMapError;
• InvalidKeyMapError;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError

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

MissingKeyMapError

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

InvalidKeyMapError

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

หากคุณใช้ปลั๊กอิน HivePress และส่วนขยายตำแหน่งทางภูมิศาสตร์ ให้ไปที่ แดชบอร์ด WordPress > HivePress > การตั้งค่า > การผสานการทำงาน > Google Maps วางคีย์ API ของคุณลงในฟิลด์ที่เหมาะสม แล้วคลิกปุ่ม "บันทึกการเปลี่ยนแปลง"

ApiNotActivatedMapError

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

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

RefererNotAllowedMapError

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

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

สิ่งสำคัญคือต้องเพิ่มส่วน “/*” ในตอนท้ายเพื่ออนุญาตคำขอ API จากหน้าย่อยของเว็บไซต์ ดังนั้น Google Maps จึงทำงานในทุกหน้าของเว็บไซต์ของคุณ

ยังใช้งานไม่ได้

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

บทสรุป

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

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

นอกจากนี้ โปรดตรวจสอบบทความของเรา:

• ปลั๊กอินไดเรกทอรี WordPress ยอดนิยมฟรี
• ธีมไดเรกทอรี WordPress ยอดนิยม
• ข้อผิดพลาดที่ควรหลีกเลี่ยงเมื่อสร้างไซต์ไดเร็กทอรี WordPress