วิธีปรับแต่งหน้าผลการค้นหา WordPress อย่างง่ายดาย
เผยแพร่แล้ว: 2023-02-24มีข้อโต้แย้งที่ดีในการปรับแต่งส่วนต่างๆ ของ WordPress — แต่หน้าผลการค้นหาล่ะ? มีเหตุผลอะไรที่จะเปลี่ยนแปลงสิ่งนั้นได้? หน้านี้จะแตกต่างออกไปได้อย่างไร?
ความจริงก็คือหน้าผลการค้นหาของ WordPress นั้นไม่น่าสนใจมากนัก วิธีนี้ทำให้คุณมีโอกาสเน้นบทความที่คุณต้องการให้สนใจมากขึ้น และทำให้หน้ามีประโยชน์มากขึ้น
ฉันขอเชิญคุณค้นหาพร้อมกับฉัน ลองนึกดูว่าในตอนท้ายของโพสต์นี้ เราทั้งคู่อาจฉลาดขึ้นกว่าที่เคยเป็นมา คุณอยู่ใน?

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

WordPress จะแสดงหน้าผลการค้นหาพร้อมทุกสิ่งที่สามารถค้นหาได้เกี่ยวกับข้อความค้นหานั้น

ทำไมคุณต้องสนใจเรื่องนี้? ดูเหมือนว่า WordPress จะมีส่วนนี้ครอบคลุมโดยอัตโนมัติใช่ไหม
เนื่องจากหน้าผลการค้นหาอาจมีผลกระทบอย่างมากต่อประสบการณ์ผู้ใช้ไซต์ของคุณ โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์อีคอมเมิร์ซ:
จากข้อมูลของ Econsultancy ผู้เข้าชมอีคอมเมิร์ซมากถึง 30% ใช้การค้นหาเว็บไซต์ภายใน เนื่องจากระดับความตั้งใจในการซื้อที่เพิ่มขึ้นจากผู้ค้นหา เป็นที่ทราบกันดีว่าพวกเขาทำ Conversion ได้สูงกว่าผู้เข้าชมที่ไม่ได้ค้นหาไซต์โดยเฉลี่ยถึง 5–6 เท่า
ซีเอ็กซ์แอล
สมเหตุสมผลใช่มั้ย ลองนึกถึงความถี่ที่คุณใช้ฟังก์ชันการค้นหาเมื่อคุณซื้อของออนไลน์ อย่างแน่นอน! แต่แม้แต่ไซต์ WordPress ที่ไม่มีฟังก์ชันอีคอมเมิร์ซก็สามารถได้รับประโยชน์จากการเรียนรู้วิธีปรับแต่งหน้าผลการค้นหา
สิ่งที่ควรปรับปรุงเกี่ยวกับการค้นหา WordPress?
ระหว่างการวิจัยของฉัน ฉันพบข้อร้องเรียนเกี่ยวกับฟังก์ชันการค้นหาดั้งเดิมของ WordPress ดังต่อไปนี้
ประการหนึ่ง จนกระทั่งเมื่อไม่นานมานี้ ไม่มีวิธีการแบบไม่ใช้โค้ดในการปรับแต่งรูปลักษณ์ของหน้าผลการค้นหา เว้นแต่คุณจะรู้วิธีการใช้ PHP, CSS และโปรแกรมแก้ไขโค้ด คุณเพียงแค่ต้องเชื่อมั่นว่าธีมของคุณทำงานได้ดีในการแสดงผลและพอใจกับเนื้อหาของหน้าค้นหา
ประการที่สอง ฟังก์ชันการค้นหาดั้งเดิมของ WordPress นั้นไม่ได้ดีเสมอไป มักจะไม่แสดงผลลัพธ์สำหรับการค้นหาที่มีการจับคู่ที่เหมาะสม
นอกจากนี้ มันอาจจะค่อนข้างช้า ใน PHP แบบเก่าที่ดี การค้นหา WordPress จำเป็นต้องโหลดหน้าซ้ำเพื่อที่จะแสดงผล ซึ่งไม่ใช่วิธีที่เร็วที่สุดในการทำสิ่งต่างๆ
เป็นผลให้สิ่งนี้ทำให้เรามีพื้นที่ต่อไปนี้สำหรับการปรับปรุง:
- การออกแบบ — เราจะพูดถึงวิธีควบคุมรูปลักษณ์ของหน้าผลการค้นหา WordPress รวมถึงองค์ประกอบต่างๆ ที่แสดงบนหน้านั้น
- ผลการค้นหา — ทำให้แน่ใจว่าผลลัพธ์ที่ผู้เยี่ยมชมสามารถพบได้ในหน้าค้นหานั้นมีความเกี่ยวข้องและน่าพึงพอใจ
- ประสบการณ์ของผู้ใช้ — ปรับปรุงความเร็วในการค้นหา ทำให้ใช้งานได้สะดวกขึ้น และเพิ่มฟังก์ชันบางอย่างให้กับการค้นหา WordPress ที่ผู้เข้าชมคุ้นเคยจาก Google หรือเครื่องมือค้นหาอื่นๆ
ฟังดูน่าเชื่อถือถ้าคุณถามฉัน ดังนั้นมาลงมือทำธุรกิจกันเถอะ
เพิ่มแบบฟอร์มการค้นหาในเว็บไซต์ WordPress ของคุณ
โดยปกติแล้ว การทำงานกับหน้าผลการค้นหาใน WordPress จะเหมาะสมก็ต่อเมื่อคุณให้โอกาสผู้ใช้เข้าถึง นั่นหมายความว่า คุณเสนอแบบฟอร์มการค้นหาที่ไหนสักแห่งที่พวกเขาสามารถป้อนข้อความค้นหาได้

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

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

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

การทำเช่นนั้นจะนำคุณไปสู่หน้าจอนี้:

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

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

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

บันทึกการเปลี่ยนแปลงของคุณและจะปรากฏบนหน้า

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

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

หากคุณไม่พอใจกับตัวเลือกของคุณ คุณสามารถเพิ่มพื้นที่วิดเจ็ตให้กับธีมของคุณได้

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

คลิกเพื่อเข้าสู่เครื่องมือแก้ไขเทมเพลต

คุณสามารถทำการเปลี่ยนแปลงทั้งหมดที่คุณต้องการได้ที่นี่ ตัวอย่างเช่น นี่คือลักษณะของหน้าผลการค้นหาใน Twenty Twenty-Two ตามค่าเริ่มต้น:

หนึ่งในสิ่งที่ง่ายที่สุดที่ฉันสามารถทำได้เพื่อปรับเปลี่ยนรูปลักษณ์คือการแลกเปลี่ยนบล็อก Query Loop ที่เป็นค่าเริ่มต้นด้วยรูปแบบบล็อก หลังจากนั้นจะมีลักษณะดังนี้:

แตกต่างกันมาก คุณว่ามั้ย?
การปรับแต่งหน้าผลการค้นหาด้วยโค้ด
ในกรณีที่คุณไม่ได้ใช้ธีม WordPress ที่ให้คุณปรับแต่งหน้าผลการค้นหาตามภาพ คุณก็สามารถทำได้ด้วยโค้ด ในการแสดงผลหน้า ธีมจะใช้ search.php
หากมีอยู่ หรือใช้ index.php
แทน (ดูลำดับชั้นของเทมเพลต WordPress เพื่อทำความเข้าใจวิธีการทำงาน)
เมื่อคุณสร้างธีมย่อยแล้ว ให้คัดลอก search.php
ของธีมหลักไปที่ธีมนั้น หรือทำสำเนาของ index.php
เปลี่ยนชื่อเป็น search.php
และวางไว้ในธีมย่อย หลังจากนั้นให้เปิดด้วยโปรแกรมแก้ไขรหัสที่คุณชื่นชอบและปรับแต่งตามความต้องการของคุณ

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

ปลั๊กอินนี้แทนที่ฟังก์ชันการค้นหา WordPress มาตรฐานอย่างสมบูรณ์และทำการเปลี่ยนแปลงต่อไปนี้:
- เรียงลำดับผลการค้นหาตามความเกี่ยวข้อง ไม่ใช่วันที่
- เปิดใช้งานการจับคู่แบบคลุมเครือ หมายความว่ายังแสดงการจับคู่บางส่วนกับข้อความค้นหาด้วย
- รองรับการใช้ตัวแก้ไขข้อความค้นหา AND และ OR รวมถึงเครื่องหมายคำพูดสำหรับการค้นหาแบบตรงทั้งหมด
- เน้นข้อความค้นหาในข้อความที่ตัดตอนมาจากการค้นหาและในผลลัพธ์เมื่อคุณคลิกที่ข้อความเหล่านั้น
- ความสามารถในการค้นหาอนุกรมวิธาน ความคิดเห็น ฟิลด์ที่กำหนดเอง รวมถึง WooCommerce SKU และเนื้อหาฟิลด์ที่กำหนดเองขั้นสูง
- ค้นหาคำแนะนำเมื่อไม่มีผลลัพธ์ (“คุณหมายถึง…?”)
เวอร์ชันฟรีมีคุณสมบัติมากมายและมีเวอร์ชันพรีเมียมที่มีมากกว่านั้น โปรดระวัง: Relevanssi ต้องการพื้นที่ฐานข้อมูลจำนวนมากสำหรับดัชนี ดังนั้นโปรดแน่ใจว่าคุณมีที่ว่างในโฮสติ้งของคุณก่อนที่จะติดตั้งปลั๊กอิน
2. การค้นหางาช้าง

หนึ่งในฟังก์ชันหลักของ Ivory Search คือช่วยให้คุณสร้างแบบฟอร์มการค้นหาได้ไม่จำกัด และแสดงได้ทุกที่ที่คุณต้องการ ตำแหน่งที่ใช้ได้ ได้แก่ ส่วนหัวของไซต์ ส่วนท้าย พื้นที่วิดเจ็ต การนำทาง และทุกที่ที่คุณสามารถวางรหัสย่อได้ คุณสามารถออกแบบและปรับแต่งฟอร์มของคุณได้ตามต้องการหรือใช้เทมเพลตที่ให้มา นอกจากนี้ คุณสามารถปรับแต่งเนื้อหาที่ต้องการค้นหาได้
นอกจากนั้น ปลั๊กอินยังปรับปรุงฟังก์ชันการค้นหาบนไซต์ของคุณด้วยวิธีต่อไปนี้:
- ค้นหาได้เร็วขึ้นผ่านเครื่องมือค้นหาแบบอิงดัชนี
- ค้นหารูปภาพ ไฟล์และไฟล์แนบ เนื้อหารหัสย่อ ผลิตภัณฑ์ WooCommerce และอื่นๆ
- ฟังก์ชันการค้นหาสด
- ค้นหาเนื้อหาเฉพาะหรือแยกเนื้อหาออกจากผลลัพธ์
- ติดตามการค้นหาบนเว็บไซต์ของคุณในการวิเคราะห์การค้นหา
- ค้นหาหลายภาษา
มีรุ่นพรีเมี่ยมพร้อมคุณสมบัติเพิ่มเติม
3. การค้นหาที่ดีขึ้น

ปลั๊กอินนี้ก็แทนที่การค้นหา WordPress เริ่มต้นเช่นกัน สร้างผลลัพธ์ตามชื่อและเนื้อหาของโพสต์ หน้า และประเภทโพสต์ที่กำหนดเอง คุณยังสามารถควบคุมตำแหน่งที่ปลั๊กอินค้นหา รวมถึงเมตาฟิลด์ ผู้เขียน อนุกรมวิธาน แม้กระทั่งความคิดเห็น
ยิ่งไปกว่านั้น Better Search จะแสดงผลลัพธ์ตามความเกี่ยวข้องและอนุญาตให้คุณปรับแต่งผลลัพธ์การค้นหา กำหนดน้ำหนักให้กับชื่อเรื่องหรือเนื้อหามากขึ้น และเสนอตัวกรองและการกระทำอื่นๆ สุดท้าย คุณสามารถแสดงเนื้อหาการค้นหายอดนิยมในรูปแบบของวิดเจ็ต และปรับแต่งผลการค้นหาด้วยเทมเพลตของคุณเองและ CSS ที่กำหนดเอง
4. ปลั๊กอินการค้นหาแบบชำระเงิน
นอกเหนือจากปลั๊กอินข้างต้นแล้ว ยังมีข้อเสนอแบบชำระเงินอีกมากมาย:
- WP Fastest Site Search — แม้ว่าจะอยู่ในไดเร็กทอรี WordPress แต่จริง ๆ แล้วนี่เป็นปลั๊กอินแบบชำระเงินที่มีระยะเวลาทดลองใช้งาน 14 วัน ส่วนที่ฟรีเพียงอย่างเดียวคือฟังก์ชัน การค้นหาด้วยเสียง ซึ่งมีประโยชน์สำหรับอุปกรณ์เคลื่อนที่ นอกเหนือจากนั้นยังมาพร้อมกับการปรับแต่ง UI แบบไม่ใช้โค้ด การค้นหา PDF และรูปภาพ คำเหมือนและการเติมข้อความอัตโนมัติ และอื่นๆ
- SearchWP — จัดเรียงผลลัพธ์ตามตำแหน่งที่พบ ปลั๊กอินสามารถค้นหาฟิลด์ที่กำหนดเอง ผลิตภัณฑ์และรายละเอียดอีคอมเมิร์ซ หมวดหมู่ แท็ก และอนุกรมวิธานอื่นๆ เนื้อหาของเอกสารบนไซต์ของคุณ (เช่น PDF, docx) และอื่นๆ คุณสามารถปรับความสำคัญที่กำหนดให้กับแอตทริบิวต์การค้นหาต่างๆ และไม่รวมการจัดหมวดหมู่ได้ บริษัทเดียวกันยังปรับปรุงฟรีสำหรับการค้นหาสด
- YITH WooCommerce AJAX Search — ปรับปรุงการค้นหาบนเว็บไซต์ WooCommerce โดยเฉพาะ อนุญาตให้ค้นหาภายในหมวดหมู่เฉพาะ ตามผู้ขาย หรือตาม SKU สามารถแสดงราคาในผลการค้นหาและมีเค้าโครงแบบฟอร์มการค้นหาต่างๆ รวมถึงแบบเต็มหน้าจอ
5. ปลั๊กอินการค้นหาอื่นๆ
สุดท้าย ต่อไปนี้คือปลั๊กอินบางส่วนที่ทำการเปลี่ยนแปลงเล็กๆ น้อยๆ ให้กับฟังก์ชันการค้นหาของ WordPress:
- ค้นหาและกรอง — ปลั๊กอินฟรีที่ช่วยให้ผู้ค้นหาปรับแต่งการค้นหาโดยเลือกหมวดหมู่ แท็ก หรือประเภทโพสต์ที่ต้องการค้นหา นอกจากนี้ ยังแสดงข้อความค้นหาที่ด้านบนของหน้าการค้นหาอีกด้วย ด้วยวิธีนี้ ผู้ใช้สามารถมั่นใจได้ว่าการค้นหาเสร็จสิ้น แม้ว่าการค้นหาจะว่างเปล่าก็ตาม
- ไฮไลต์ข้อความค้นหา — ปลั๊กอินขนาดเล็กและน้ำหนักเบาที่ทำเพียงสิ่งเดียว: ไฮไลต์ข้อความค้นหาในผลการค้นหาและในหน้าที่พบหลังจากคลิกผ่าน มันเข้ากันได้กับ BuddyPress/bbPress เช่นกัน
ความคิดสุดท้าย: ผลการค้นหา WordPress
และคุณก็มีทั้งเหตุผลที่คุณอาจต้องการปรับแต่งหน้าผลการค้นหา WordPress และวิธีการดำเนินการ ฉันรู้สึกฉลาดขึ้นนิดหน่อย แล้วคุณล่ะ? ฉันหวังว่าคุณจะใช้ข้อมูลข้างต้นเพื่อปรับปรุงส่วนที่สำคัญนี้ของเว็บไซต์ WordPress ของคุณ
คุณรู้วิธีอื่นในการปรับแต่งหน้าผลการค้นหา WordPress หรือไม่? มีอะไรเพิ่มเติมที่จะเพิ่ม? แจ้งให้เราทราบในความคิดเห็น!