ค้นหาอัตโนมัติอย่างง่ายใน WordPress - บทช่วยสอน

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

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

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

สิ่งที่คุณต้องการ

คุณจะต้องมีตัวจัดการข้อมูลโค้ด ความสามารถในการคัดลอกและวาง และปลั๊กอิน Live Search (ฟรีใน repo)

เราควรสังเกตสิ่งต่อไปนี้: แบบฟอร์มใดๆ ที่ใช้ <?php get_search_form() ?> จะทำงานกับโซลูชันนี้โดยอัตโนมัติ และไม่ต้องการสองขั้นตอนถัดไป เพียงข้ามไปที่ส่วนนี้หากคุณเลือกเส้นทางนั้น

อย่างไรก็ตาม นี่ไม่ใช่กรณีสำหรับธีม ตัว สร้างเพจ และเครื่องมืออื่นๆ จำนวนมาก Elementor และ Oxygen ไม่ได้ใช้แบบฟอร์มที่สร้างขึ้นโดย WordPress (เพื่อให้ผู้ใช้จัดรูปแบบได้อย่างง่ายดายทั้งในแง่ของขนาด แบบอักษร และสี) ดังนั้น ในการรับแถบค้นหาที่มีการเติมข้อความอัตโนมัติใน Elementor, Oxygen, เครื่องมือสร้างเพจอื่นๆ ส่วนใหญ่ และธีมมากมาย ให้ทำตามขั้นตอนด้านล่าง

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

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

PHP

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

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

วิธีชำระเงิน (ง่าย)

เลือก Scripts Orginizer ปลั๊กอิน WordPress ระดับพรีเมียมที่ช่วยให้จัดการโค้ดบนเว็บไซต์ WordPress ของคุณได้ง่าย (รีวิว) หลังจากติดตั้งแล้ว ให้ไปที่ Scripts Organizer -> นำเข้า ซึ่งอยู่ในเมนูผู้ดูแลระบบแถบด้านข้าง

ดาวน์โหลดไฟล์นี้ (การส่งออกของทุกอย่างที่กล่าวถึงด้านล่าง) นำเข้าและข้ามไปที่การดึงรหัสย่อ

เมื่ออยู่ที่ส่วน CSS ที่กำหนดเองแล้ว ให้ข้ามไปที่ส่วนบางส่วนของ SCORG ดาวน์โหลด JSON นั้น นำเข้า ติดตั้งปลั๊กอินการค้นหาแบบสด และพร้อมใช้งาน

คุณสามารถทำตามขั้นตอนด้วยตนเองได้ ในการเริ่มต้น ให้สร้างรายการใหม่:

ตอนนี้ เรียกใช้ผ่านสิ่งต่อไปนี้:

1. ตั้งชื่อเรื่อง
2. เปิดใช้งานการสลับการบล็อกโค้ด: เปิด
3. ตำแหน่งสคริปต์: Shortcode
4. คัดลอก/วางโค้ด PHP/HTML จากด้านบน
5. ให้การตั้งค่าอื่นๆ ทั้งหมดเป็นค่าเริ่มต้น แล้วคลิกเผยแพร่

เสร็จแล้วจะหน้าตาประมาณนี้ ️.

หยิบรหัสย่อซึ่งจะแสดงในรายการสคริปต์ที่ด้านล่างซ้ายของตัวแก้ไขโค้ด หรือ ในหน้ารายการข้อมูลโค้ด:

นำรหัสย่อนี้ไปใส่ไว้ที่ใดก็ได้ด้วย Gutenberg, TINYMCE, Elementor Shortcode Widget หรือวิธีการระบุรหัสย่ออื่นๆ

ตอนนี้ไปที่ขั้นตอนที่สอง และเพิ่ม CSS ลงในไซต์ของคุณ

ทางฟรี (ยากขึ้นเล็กน้อย)

ติดตั้งปลั๊กอิน Code Snippets ฟรี ดาวน์โหลดข้อมูลโค้ดต่อไปนี้ และนำเข้ามายังเว็บไซต์ของคุณ:

ไฟล์นี้ยังสามารถนำเข้าไปยัง Advanced Scripts (โดยพื้นฐานแล้วคือ Code Snippets เวอร์ชันพรีเมียมและง่ายกว่า) และแม้แต่ Scripts Organizer

จากนั้น เพิ่มการค้นหาโดยใช้รหัสย่อต่อไปนี้ในส่วนหน้าของคุณ:

ไม่ว่าคุณจะเพิ่มการค้นหาด้วยวิธีใด หากคุณใช้ HTML และ PHP พื้นฐานจากส่วนนี้ CSS ในส่วนถัดไปจะให้รูปแบบที่ดี

CSS

หากคุณรักษาโครงสร้างและคลาสไว้เหมือนเดิม เพียงเพิ่ม CSS ที่กำหนดเองนี้ลงในเว็บไซต์ของคุณเพื่อรับแบบฟอร์มการค้นหาที่มีสไตล์ที่ดีพร้อมความสามารถในการเติมข้อความอัตโนมัติ

หมายเหตุ: รหัสนี้เข้ากันไม่ได้กับวิธีการแทรกแถบค้นหา <?php get_search_form() ?> อย่างไรก็ตาม ขึ้นอยู่กับธีมของคุณ การแทรกแบบฟอร์มการค้นหาด้วยวิธีนี้หมายความว่าจะรับช่วงสไตล์ของธีมของคุณ

คุณสามารถเพิ่ม CSS นี้ในยูทิลิตี้ตัวสร้างเพจของคุณ ผ่านลักษณะที่ปรากฏ -> ปรับแต่ง -> CSS เพิ่มเติม หรือโดยใช้ SCORG

เราขอแนะนำ SCORG เพิ่มบางส่วนของ CSS ใหม่ วางโค้ดใน และเผยแพร่ (หรือนำเข้าไฟล์นี้) ไปที่ Shortcode Snippet ที่สร้างในขั้นตอนก่อนหน้า ไปที่ส่วน "SCSS Partials Manager" และเลือก show ค้นหาชื่อของบางส่วนและเลือก อัพเดทครับ ตอนนี้ ไม่ว่าคุณจะวางรหัสย่อไว้ที่ใด CSS ก็จะโหลดเช่นกัน มันจะ โหลดเฉพาะตำแหน่งที่ใส่รหัสย่อ ไม่ใช่ global ซึ่งเหมาะสำหรับประสิทธิภาพ

ตอนนี้ ทั้งหมดที่เราต้องการคือ Magic Sauce

ซอสวิเศษ (SearchWP Live Ajax Search)

นี่เป็นปลั๊กอินที่น่าทึ่งที่สร้างโดยทีมงานที่อยู่เบื้องหลังชุดปลั๊กอิน SearchWP ได้ฟรีและในที่เก็บ WordPress แทนที่จะใช้โครงสร้างโค้ดที่ซับซ้อน เราสามารถติดตั้งสิ่งนี้และค้นหาแบบสดและใช้งานได้ภายในเวลาไม่ถึงนาที

เมื่อติดตั้งแล้ว ให้คลิกที่แบบฟอร์มการค้นหาที่คุณใส่ด้วยรหัสสั้น รหัสดิบ หรือรูปแบบที่ใช้การแทรก WordPress PHP ดั้งเดิม และคุณควรเห็นลักษณะการทำงานต่อไปนี้:

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

ขยายการค้นหาสดนี้ใน WordPress

SearchWP Live Ajax Search เป็นปลั๊กอินฟรีที่ให้คุณทำตามชื่อที่แนะนำ: เพิ่ม Live Ajax Search มันจะทำงาน โดยมีหรือไม่มี คอลเลกชันพรีเมียมของ SearchWP และส่วนขยายที่เกี่ยวข้อง หากคุณไม่ได้ใช้ SearchWP จะใช้เครื่องมือค้นหา WP มาตรฐาน

การค้นหา WordPress มาตรฐานจะจัดเรียงตามความเกี่ยวข้อง (เมื่อก่อนไม่ธรรมดา!) โดยดูจากชื่อโพสต์ ตามด้วยเนื้อหา แต่นี่ยังคงเป็น Elementor และมีตัวเลือกที่ดีกว่า อันที่จริง เราได้เขียนบทความอื่นเกี่ยวกับทางเลือกที่ดีกว่า ซึ่งคุณสามารถอ่านได้ที่นี่: Better Search Solutions For WordPress

อย่างไรก็ตาม เนื่องจาก Live Search สร้างขึ้นโดย Search WP มันจะใช้เอ็นจิ้นนั้นโดยอัตโนมัติหากติดตั้งไว้ การค้นหา WP นั้นเหนือกว่า เนื่องจากมีการรวมคำหลัก การจับคู่ที่แม่นยำยิ่งขึ้น การจัดทำดัชนีเอกสาร รองรับ WooCommerce การปรับแต่งอัลกอริทึม และอื่นๆ เราขอแนะนำอย่างยิ่งให้สร้างการค้นหาสดของคุณและใช้คุณลักษณะอื่นๆ ของปลั๊กอินพรีเมียมเพื่อให้ผลการค้นหาที่ดียิ่งขึ้น

หากคุณกำลังมองหาทางเลือกอื่นแทน SearchWP Ivory Search เป็นปลั๊กอินราคาถูกที่มีคุณสมบัติคล้ายกัน และ LTD! ปลั๊กอิน Live Search (การเติมข้อความอัตโนมัติการค้นหา WP) นี้ควรใช้งานได้ทันทีด้วย Ivory Search คุณสามารถใช้เครื่องมือค้นหาอื่นได้เช่นกัน ตามเอกสาร สิ่งที่คุณต้องทำคือ:

เพิ่มแอตทริบิวต์ต่อไปนี้ในการ input แบบฟอร์ม: data-swpengine="supplemental" แทนที่ 'supplemental' ด้วยชื่อเครื่องมือค้นหาที่คุณต้องการ

รายการคำถามที่พบบ่อย

ง่ายขึ้นด้วยออกซิเจน

ไม่ใช่เรื่องแปลกที่เรารัก Oxygen Builder ดังนั้นนี่จึงเป็นวิธีที่ง่ายยิ่งขึ้นในการเพิ่ม AJAX Live Search (เติมข้อความอัตโนมัติ) ด้วยเครื่องมือนั้น

หมายเหตุ: บทช่วยสอนและปลั๊กอิน นี้ใช้ไม่ได้ กับ Oxygen Search Form Widget เนื่องจากตามที่กล่าวไว้ในส่วนก่อนหน้า จะไม่ใช้วิธี PHP มาตรฐานในการแทรกแบบฟอร์มการค้นหา และไม่มีแอตทริบิวต์ข้อมูลที่จำเป็น

ขั้นตอนง่ายๆ:

1. เพิ่มบล็อกโค้ดทุกที่ที่คุณต้องการแบบฟอร์มการค้นหา วางใน PHP ที่ด้านล่าง (หรือวางในรหัสย่อของไฮโดรเจนซึ่งจะทำให้โค้ดบล็อกโดยอัตโนมัติ)
2. เพิ่ม CSS ด้านล่างไปยัง Oxygen Global CSS เปลี่ยนตามที่คุณต้องการ (ส่วนใหญ่เป็นสี)
3. ติดตั้งและเปิดใช้งานปลั๊กอิน Live Search ฟรีบน repo ที่นี่
4. ดื่มด่ำกับความรุ่งโรจน์ของการค้นหาสด

เนื่องจากเราสามารถวาง PHP ลงในเทมเพลตและหน้าเว็บได้โดยตรงด้วย Page Builder เราจึงสามารถวาง PHP ต่อไปนี้ลงในบล็อกโค้ด เพิ่ม CSS ผ่านการตั้งค่าส่วนกลาง และเรียกมันว่าไนท์ (โปรดแน่ใจว่าคุณได้เพิ่ม ปลั๊กอินการค้นหาสด พบได้ที่นี่)

คุณยังสามารถคัดลอก/วาง Hydrogen Shortcodes ต่อไปนี้ (ถ้าคุณมี Hydrogen Pack (ตรวจสอบที่นี่))

เพียงคลิกคัดลอก ติดตั้งไฮโดรเจน แล้ววางลงในเพจของคุณ CSS จะถูกรวมไว้ในบล็อคโค้ด

สุดท้าย ใช้ CSS (นำมาจากด้านบน):

เราแนะนำให้แทรก CSS นี้ผ่าน Global CSS ของ Oxygen

ผลลัพธ์สุดท้ายควรมีลักษณะดังนี้:

หากคุณต้องการนำส่วนนี้กลับมาใช้ใหม่ คุณสามารถทำให้เป็นส่วนที่ใช้ซ้ำได้ ตราบใดที่คุณติดตั้งปลั๊กอิน Live Search คุณควรใช้แถบค้นหา AJAX ที่ดีสำหรับผู้เยี่ยมชมของคุณ

<?php get_search_form() ?>

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

บทสรุป

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

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

มีคำถามเพิ่มเติมไหม? อย่าลังเลที่จะปล่อยให้พวกเขาในส่วนความคิดเห็นด้านล่าง