วิธีเพิ่มแบบฟอร์มการค้นหาในโพสต์ WordPress ด้วยรหัสย่อ

เผยแพร่แล้ว: 2021-11-24

คุณต้องการเพิ่มแบบฟอร์มการค้นหาในโพสต์ WordPress หรือไม่?

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

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

วิธีเพิ่มแบบฟอร์มการค้นหาในโพสต์ของคุณด้วยรหัสย่อการค้นหาของ WordPress

เหตุใดจึงต้องเพิ่มแบบฟอร์มการค้นหาในโพสต์และเพจของคุณ

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

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

ผู้เยี่ยมชมของคุณมีแนวโน้มที่จะเข้าร่วมรายชื่ออีเมลของคุณ แสดงความคิดเห็น ซื้อสินค้า และติดตามคุณบนโซเชียลมีเดีย

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

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

  • วิธีที่ 1: การเพิ่มแบบฟอร์มการค้นหาด้วย Plugin
  • วิธีที่ 2: การเพิ่มแบบฟอร์มการค้นหาโดยใช้รหัส

วิธีที่ 1: การเพิ่มแบบฟอร์มการค้นหาด้วย Plugin

วิธีที่ง่ายที่สุดในการเพิ่มแบบฟอร์มการค้นหาในบทความของคุณคือการใช้ปลั๊กอิน SearchWP เป็นปลั๊กอินการค้นหาที่ดีที่สุดสำหรับ WordPress ที่ใช้โดยไซต์มากกว่า 30,000 แห่ง

การตั้งค่า SearchWP

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

เมื่อเปิดใช้งาน คุณต้องไปที่หน้า การ ตั้งค่า » SearchWP จากนั้นคลิกที่ตัวเลือกเมนู 'ใบอนุญาต'

ป้อนคีย์ใบอนุญาต SearchWP

จากนั้นคุณต้องป้อนรหัสใบอนุญาตของคุณในกล่องใบอนุญาต คุณสามารถค้นหาข้อมูลนี้ได้ในบัญชีของคุณบนเว็บไซต์ SearchWP หลังจากนั้นคุณควรคลิกปุ่มเปิดใช้งาน

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

การตั้งค่าเอ็นจิ้น SearchWP

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

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

ปรับการตั้งค่าตัวเลื่อน SearchWP

หลังจากที่คุณปรับการตั้งค่าเสร็จแล้ว อย่าลืมคลิกปุ่ม 'บันทึกเครื่องยนต์' เพื่อบันทึกเครื่องมือค้นหาเริ่มต้น

การเพิ่มแบบฟอร์มการค้นหาในโพสต์

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

คุณจะต้องไปที่เว็บไซต์ส่วนขยาย SearchWP Shortcodes Extension แล้วคลิกปุ่ม 'ดาวน์โหลดพร้อมใบอนุญาตที่ใช้งานอยู่'

ดาวน์โหลดส่วนขยาย SearchWP Shortcodes

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

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

แทรกบล็อก HTML ที่กำหนดเอง

ถัดไป พิมพ์ 'html' ลงในช่องค้นหา จากนั้นเลือกบล็อก 'HTML ที่กำหนดเอง'

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

[searchwp_search_form]
   
<div class="search-results-wrapper">
 [searchwp_search_results]
  <h2>[searchwp_search_result_link]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous"]
 [searchwp_search_results_pagination direction="next" link_text="Next"]
</div>

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

อย่าลืมคลิกเผยแพร่หรืออัปเดตเพื่อบันทึกโพสต์และเผยแพร่

คลิกเผยแพร่หรืออัปเดตเพื่อบันทึกโพสต์ของคุณ

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

ค้นหาตัวอย่างแบบฟอร์ม WP

สำหรับเคล็ดลับเพิ่มเติมในการปรับแต่งการค้นหาของคุณ โปรดดูคำแนะนำในการปรับปรุงการค้นหา WordPress ด้วย SearchWP

วิธีที่ 2: การเพิ่มแบบฟอร์มการค้นหาโดยใช้รหัส

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

ในวิธีนี้ คุณจะต้องแก้ไขไฟล์ functions.php ของธีมของคุณ

หากคุณไม่เคยแก้ไขไฟล์ functions.php มาก่อน ให้อ่านคู่มือเริ่มต้นของเราเกี่ยวกับการวางตัวอย่างข้อมูลจากเว็บลงใน WordPress

สิ่งที่คุณต้องทำคือเปิดไฟล์ functions.php ของธีมหรือปลั๊กอินเฉพาะไซต์แล้ววางโค้ดต่อไปนี้:

add_shortcode('wpbsearch', 'get_search_form');

นี่คือลักษณะที่ปรากฏบนเว็บไซต์สาธิตของเราเมื่อใช้ WordPress Theme Editor เพื่อเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของธีม Twenty Twenty-One

การแก้ไข functions.php ในตัวแก้ไขธีม

หลังจากนั้น คุณเพียงแค่เพิ่มรหัสย่อ [wpbsearch] ลงในโพสต์หรือหน้าที่คุณต้องการให้แบบฟอร์มการค้นหาปรากฏ

ค้นหารหัสย่อแบบฟอร์ม

ซึ่งจะแสดงแบบฟอร์มการค้นหาเริ่มต้น หากต้องการดูแบบฟอร์มการค้นหา เพียงแค่ดูโพสต์บนเว็บไซต์ WordPress ของคุณ

ดูตัวอย่างแบบฟอร์มการค้นหา

หากคุณต้องการแสดงแบบฟอร์มการค้นหาที่กำหนดเอง คุณควรใช้รหัสนี้แทน

function wpbsearchform( $form ) {
  
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
  
    return $form;
}
  
add_shortcode('wpbsearch', 'wpbsearchform');

ปรับเปลี่ยนโค้ดเพื่อปรับแต่งแบบฟอร์มการค้นหาได้ตามต้องการ

เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่มการค้นหาในโพสต์ของคุณด้วยรหัสย่อการค้นหาของ WordPress

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook