วิธีเพิ่มแถบค้นหาในไซต์ WordPress

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

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

ทำไมต้องเพิ่มแถบค้นหาในเว็บไซต์ของคุณ?

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

ให้ฉันนำเสนอประโยชน์ที่สำคัญบางประการที่คุณสามารถเพิ่มแถบค้นหาในไซต์ของคุณด้านล่าง-

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

การเพิ่มแถบค้นหาบนเมนูด้วยวิดเจ็ตการค้นหาเริ่มต้นของ WordPress:

คุณสามารถเพิ่มแถบค้นหาบนเมนูด้วยวิดเจ็ตการค้นหาเริ่มต้นของ WordPress ได้หรือไม่ ไม่คุณไม่สามารถ เนื่องจาก WordPress ให้คุณเพิ่มแถบค้นหาได้เฉพาะในพื้นที่พร้อมวิดเจ็ตเท่านั้น

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

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

ตอนนี้ มาดูวิธีที่คุณสามารถเพิ่มแถบค้นหาในเว็บไซต์ของคุณผ่านวิดเจ็ตเริ่มต้นของ WordPress

เพิ่มแถบค้นหาด้วยวิดเจ็ตการค้นหาเริ่มต้นของ WordPress:

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

ไปที่วิดเจ็ตจากแดชบอร์ด:

ในตอนเริ่มต้น ให้ไปที่แดชบอร์ดของแผงการดูแลระบบและค้นหาลักษณะที่ปรากฏ นำทางและคลิกวิดเจ็ตจากรายการภายใต้ลักษณะที่ปรากฏ

แดชบอร์ด > ลักษณะที่ปรากฏ > วิดเจ็ต

เพิ่มวิดเจ็ตการค้นหาจากวิดเจ็ตที่มี:

ซึ่งจะนำคุณไปยังหน้าใหม่ที่ปรากฏขึ้นพร้อมกับส่วนต่างๆ ของหน้า ตอนนี้ให้กดปุ่ม "เพิ่มบล็อก" (ปรากฏพร้อมเครื่องหมาย +) เพื่อดูวิดเจ็ตที่มีอยู่ทั้งหมด

เลื่อนลงเพื่อค้นหาวิดเจ็ตการค้นหา หรือคุณสามารถเขียนคำว่า “Search” ในช่องค้นหาเพื่อค้นหาวิดเจ็ตการค้นหา

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

ทำการปรับแต่งที่จำเป็น:

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

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

ดูแถบค้นหาในหน้าของคุณ:

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

เพิ่มแถบค้นหาด้วยวิดเจ็ตการค้นหา ElementsKit:

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

เพื่อไม่ให้เป็นการเสียเวลา มาดูกันเลย -

นำทางไปยังโพสต์หรือเพจที่มีอยู่ของคุณจากแดชบอร์ด:

ก่อนอื่น ไปที่แดชบอร์ดและค้นหาโพสต์หรือเพจ ที่นี่ ฉันจะแสดงให้เห็นว่าวิดเจ็ต ElementsKit ทำงานอย่างไรกับโพสต์ชื่อ "สวัสดีชาวโลก!"

ไปที่ "โพสต์" จากนั้นเลือก "โพสต์ทั้งหมด" เพื่อให้โพสต์ทั้งหมดของคุณปรากฏขึ้น จากที่นั่น คุณสามารถเลือกโพสต์ที่คุณต้องการเพิ่มแถบค้นหา ในกรณีที่คุณไม่มีโพสต์หรือเพจ คุณต้องเพิ่มโพสต์หรือเพจใหม่

แดชบอร์ด > โพสต์ > โพสต์ทั้งหมด > โพสต์ของคุณ

สลับไปที่หน้าต่างองค์ประกอบ:

ตอนนี้คลิก "แก้ไขด้วย Elementor" ที่ด้านบนตรงกลาง ซึ่งจะนำคุณไปที่หน้าต่าง Elementor

ลากและวางวิดเจ็ตการค้นหาส่วนหัว:

ในหน้าต่าง Elementor คุณจะสามารถเข้าถึงวิดเจ็ตมากมาย พิมพ์วิดเจ็ต "Header Search" ในช่องค้นหาเพื่อค้นหาวิดเจ็ต หรือคุณสามารถเลื่อนลงและค้นหาวิดเจ็ตได้เช่นกัน

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

ตั้งค่าพารามิเตอร์ของแถบค้นหา:

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

ใต้แท็บ Style คุณจะมี 2 ส่วนคือ Header Search และ Search Container จากส่วนการค้นหาส่วนหัว คุณสามารถปรับพารามิเตอร์ต่างๆ เช่น สีพื้นหลัง ประเภทเส้นขอบ เงาของช่องค้นหา ระยะขอบ ฯลฯ ของแถบค้นหา

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

ในที่สุดคุณก็พร้อมแล้ว!

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

เพิ่มช่องค้นหาด้วยโค้ด CSS:

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

ไปที่ตัวแก้ไขธีม:

ก่อนอื่น คลิก "ลักษณะที่ปรากฏ" จากแดชบอร์ดและไปที่ "ตัวแก้ไขธีม"

เปิดไฟล์ header.php หรือ sidebar.php:

ด้วยเหตุนี้ คุณจะย้ายไปที่ไฟล์ style.css ตามค่าเริ่มต้น จากที่นั่น ให้เปิด ไฟล์ header.php หรือ sidebar.php ขึ้นอยู่กับตำแหน่งที่คุณต้องการให้แถบค้นหาปรากฏขึ้น

เพิ่มฟังก์ชันแถบค้นหา:

ตอนนี้ เพิ่มฟังก์ชันนี้ <?php get_search_form(); ?> ในรหัสไฟล์ header.php หรือ sidebar.php ฉันได้เพิ่มฟังก์ชั่นในรหัสไฟล์ header.php

ดูแถบค้นหาบนเว็บไซต์ของคุณ:

สุดท้าย เปิดหน้าใด ๆ ที่คุณเผยแพร่แล้วคุณจะสังเกตเห็นแถบค้นหาปรากฏที่ด้านบน หากคุณเพิ่มฟังก์ชันในไฟล์ sidebar.php แถบค้นหาจะปรากฏบนแถบด้านข้าง

ไขลาน:

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

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