3 วิธีในการสร้างฟอร์มการค้นหา WordPress แบบกำหนดเองที่ยอดเยี่ยม

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

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

จะไม่ทำ!

ในบทความนี้ เราจะแสดงวิธีรวมแบบฟอร์มการค้นหา WordPress แบบกำหนดเองเข้ากับเว็บไซต์ของคุณ

• แบบฟอร์มการค้นหา WordPress แบบกำหนดเองคืออะไร?
• # 1 ใช้ปลั๊กอิน
• #2 แก้ไขรหัส
• #3 ใช้ CSS แบบกำหนดเองเพื่อจัดรูปแบบแบบฟอร์มการค้นหาและหน้าผลลัพธ์

แบบฟอร์มการค้นหา WordPress แบบกำหนดเองคืออะไร?

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

ฟังก์ชันการค้นหาเริ่มต้นของ WordPress เพียงพอสำหรับหน้าเว็บใหม่หรือหน้าเว็บขนาดเล็กที่มีเนื้อหาไม่มากนัก

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

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

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

ฟังก์ชัน get_search_form คืออะไร

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

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

วิธีปรับแต่งแบบฟอร์มการค้นหาใน WordPress

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

# 1 ใช้ปลั๊กอิน

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

นอกจากนี้ ด้วยรหัสย่อ คุณสามารถวางตำแหน่งแถบค้นหาได้ทุกที่ที่คุณต้องการบนเว็บไซต์ (เช่น ในส่วนหัว ส่วนท้าย แถบเมนู ฯลฯ)

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

#2 แก้ไขรหัส

มีสองวิธีในการสร้างฟอร์มการค้นหาตั้งแต่เริ่มต้นภายในไฟล์หลัก .php ของไซต์ WordPress ของคุณ: ไม่ว่าจะด้วยฟังก์ชันหรือด้วยเทมเพลต

ด้วยฟังก์ชั่น

คุณสามารถแทนที่เครื่องมือค้นหา WordPress เริ่มต้นด้วยเครื่องมือที่กำหนดเองได้โดยใช้ add_filter hook ในไฟล์ functions.php ของคุณ ให้เพิ่มโค้ดต่อไปนี้ลงในสแต็ก:

 ฟังก์ชัน custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '">
<div class="custom-form"><label class="screen-reader-text" for="s">' __( 'ค้นหา:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'ค้นหา' ) .'" />
</div>
</form>';
คืนฟอร์ม $;
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

สิ่งที่รหัสนี้ทำคือจัดเก็บแบบฟอร์มที่กำหนดเองของคุณภายในตัวแปร $form ซึ่งจะแทนที่เครื่องมือค้นหาเริ่มต้นของ WordPress ด้วย add_filter hook

คุณสามารถปรับแต่งโค้ดด้านบนเพิ่มเติมได้โดยแก้ไขป้ายกำกับ ข้อความ รหัส และองค์ประกอบอื่นๆ ในค่าของตัวแปร $form

ด้วยเทมเพลต

หากคุณไม่ต้องการแก้ไขไฟล์ functions.php อีกทางเลือกหนึ่งคือใช้เทมเพลตสำหรับแบบฟอร์มการค้นหา สร้างแบบฟอร์มการค้นหา WordPress แบบกำหนดเอง จากนั้นเพิ่มเป็น searchform.php ในไดเร็กทอรีหลักของคุณ WordPress จะใช้แบบฟอร์มการค้นหาที่กำหนดเองโดยอัตโนมัติแทนที่จะเป็นค่าเริ่มต้น

ในการทำเช่นนี้ ให้เปิด IDE ที่คุณเลือกและสร้างไฟล์ใหม่ ตั้ง ชื่อว่า “searchform.php” วางรหัสต่อไปนี้ลงในตัวแก้ไข:

 <?php
/* แบบฟอร์มการค้นหาที่กำหนดเอง */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query()); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-ค้นหาข้อความปิดเสียง"></i>
</span>
</div>
</div>
</แบบฟอร์ม>

แก้ไขโค้ดด้านบนตามความต้องการของคุณ!

#3 ใช้ CSS แบบกำหนดเองเพื่อจัดรูปแบบแบบฟอร์มการค้นหาและหน้าผลลัพธ์

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

หากคุณต้องการเปลี่ยนแปลง ทางเลือกที่ดีที่สุดคือใช้โค้ด CSS สองสามบรรทัด

เทมเพลตโค้ด CSS นี้เข้ากันได้กับธีม WordPress ส่วนใหญ่ เพียงคัดลอกและวางผ่านแผงผู้ดูแลระบบ WordPress ของคุณ

 .searchform {
ตระกูลแบบอักษร:arial;
ขนาดตัวอักษร:16px;
พื้นหลัง:#ace5e3;
สี:#ffffff;
เส้นขอบ:1px ทึบ #61c3c0;
ช่องว่างภายใน: 10px;
ความสูง:90px;
ความกว้าง:600px;
}

.ผลการค้นหา {
ตระกูลแบบอักษร:arial;
ขนาดตัวอักษร:16px;
พื้นหลัง:#ace5e3;
สี:#000000;
เส้นขอบ:1px ทึบ #61c3c0;
ช่องว่างภายใน: 10px;
ความกว้าง:600px;
}

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

ตัวอย่างเช่น หากคุณไม่ต้องการเปลี่ยนตระกูลฟอนต์ของแบบฟอร์มการค้นหาของคุณ ให้ลบ “ตระกูลฟอนต์:arial” ออก ไลน์.

สร้างแบบฟอร์มการค้นหา WordPress ของคุณเองวันนี้!

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

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

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการเพิ่มการค้นหาผลิตภัณฑ์ WooCommerce อัจฉริยะได้ที่นี่

เราหวังว่าคำแนะนำนี้จะเป็นประโยชน์ และคุณจะได้รับแบบฟอร์มการค้นหาที่กำหนดเองแล้วและเริ่มทำงานเมื่อคุณอ่านบทความนี้!