วิธีเพิ่ม Live Ajax Search ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน

เผยแพร่แล้ว: 2022-08-01

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

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

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

นี่คือสารบัญที่จะช่วยคุณนำทาง:

  • ทำไมต้องเพิ่มการค้นหาสดในเว็บไซต์ของคุณ
  • ข้อเสียของการเพิ่ม Live Ajax Search โดยไม่ต้องใช้ Plugin
  • วิธีที่ง่ายที่สุดในการเพิ่ม Live Ajax Search ในเว็บไซต์ของคุณ
  • วิธีเพิ่ม Live Ajax Search ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน

เอาล่ะ!

ทำไมต้องเพิ่มการค้นหาสดในเว็บไซต์ของคุณ

การเพิ่มการค้นหาสดในไซต์ของคุณมีประโยชน์ด้วยเหตุผลหลายประการ

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

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

live search on a site

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

นอกจากนี้ยังเป็นวิธีที่ยอดเยี่ยมในการดึงดูดการเข้าชมจากเครื่องมือค้นหาให้มากขึ้น เนื่องจาก Google ให้ความสำคัญกับระยะเวลาเซสชันเฉลี่ยบนไซต์เป็นอย่างมาก

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

ข้อเสียของการเพิ่ม Live Ajax Search โดยไม่ต้องใช้ Plugin

ปัญหาหลักในการเพิ่มการค้นหาแบบสดไปยังไซต์ของคุณโดยไม่มีปลั๊กอินคือการแก้ไขโค้ดธีมของคุณ

วิธีการนี้มีข้อเสียที่ร้ายแรงสองประการที่คุณควรทราบ:

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

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

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

วิธีที่ง่ายที่สุดในการเพิ่ม Live Ajax Search ในเว็บไซต์ของคุณ

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

SearchWP logo

SearchWP เป็นปลั๊กอินการค้นหา WordPress ที่ดีที่สุดในตลาด ด้วยการติดตั้งที่ใช้งานอยู่กว่า 30,000 ครั้ง

ด้วยวิธีนี้ คุณสามารถเปิดและปิดการค้นหาแบบสดบนไซต์ของคุณได้ในไม่กี่คลิก โดยไม่ต้องเขียนโค้ด

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

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

ต่อไปนี้เป็นคุณสมบัติอื่นๆ ของ SearchWP ที่จะช่วยให้ธุรกิจของคุณเติบโต:

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

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

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน SearchWP บนเว็บไซต์ของคุณ

ในการเริ่มต้น คุณจะต้องรับสำเนาของ SearchWP

เมื่อเสร็จแล้ว ไปที่แดชบอร์ด SearchWP แล้วคลิก ดาวน์โหลด

go to the Downloads tab

จากนั้นกดปุ่ม Download SearchWP และบันทึกไฟล์ ZIP ของปลั๊กอินลงในคอมพิวเตอร์ของคุณ

click Download SearchWP

หลังจากดาวน์โหลด ให้คัดลอกคีย์ใบอนุญาต SearchWP ของคุณในหน้าเดียวกัน คุณจะต้องใช้เพิ่มเติมเพื่อเปิดใช้งานปลั๊กอินบนไซต์ของคุณ

copy your license key

ตอนนี้ คุณจะต้องอัปโหลดไฟล์ ZIP ของ SearchWP ไปยังไซต์ของคุณและติดตั้งปลั๊กอิน ตรวจสอบวิธีการติดตั้งปลั๊กอิน WordPress กวดวิชา หากคุณต้องการการเตือนเกี่ยวกับวิธีการทำเช่นนั้น

หลังจากการติดตั้ง SearchWP คุณจะต้องเปิดใช้งานสำเนาของปลั๊กอินด้วยรหัสใบอนุญาตของคุณ

ในการดำเนินการดังกล่าว ให้ชี้เคอร์เซอร์ไปที่ปุ่ม SearchWP ที่แผงด้านบนของแดชบอร์ด WordPress แล้วคลิก เปิดใช้งานใบอนุญาต

click Activate License

หลังจากที่คุณไปที่หน้า ใบอนุญาต แล้ว ให้วางคีย์ใบอนุญาต SearchWP ลงในช่อง ใบอนุญาต แล้วคลิก เปิดใช้งาน

press Activate

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

ขั้นตอนที่ 2: ติดตั้ง SearchWP Live Search Extension

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

ในการเริ่มต้น ให้ไปที่ SearchWP » Extensions ทางด้านซ้ายของแดชบอร์ด WordPress ของคุณ

go SearchWP Extensions

จากนั้นค้นหาส่วนขยาย Live Search แล้วคลิก ติดตั้ง ใต้ส่วน

click Install Live search

แค่นั้นแหละ. คุณเพิ่งเพิ่มการค้นหา Ajax แบบสดในเว็บไซต์ของคุณสำเร็จ

เรามาดูกันว่ามันทำงานอย่างไร

ขั้นตอนที่ 3: ทดสอบการค้นหาใหม่ของคุณ

โดยไปที่เว็บไซต์ของคุณและทำการค้นหา

ตัวอย่างเช่น นี่คือสิ่งที่การค้นหาแบบสดของ SearchWP Ajax บนไซต์ทดสอบของเรา:

how to add live search to your WordPress site without a plugin

ตอนนี้ มาดูกันว่าคุณสามารถเพิ่มการค้นหาสดในไซต์ของคุณโดยไม่ต้องใช้ปลั๊กอินได้อย่างไร

วิธีเพิ่ม Live Ajax Search ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

ในการเริ่มต้น ให้สร้างธีมย่อยของธีมปัจจุบันที่คุณใช้บนไซต์ของคุณ

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

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

คุณสามารถดูบทช่วยสอนนี้เกี่ยวกับวิธีสร้างธีมลูกของ WordPress ได้หากต้องการความช่วยเหลือ

หลังจากที่คุณสร้างธีมย่อยแล้ว ให้ไปที่แดชบอร์ด WordPress และไปที่ Appearance » Theme File Editor

go to the Theme Files Editor

จากนั้นค้นหาไฟล์ functions.php และคลิกเพื่อเปิดในโปรแกรมแก้ไขไฟล์

open the Theme Functions file

ถัดไป วางโค้ดต่อไปนี้ลงในไฟล์ functions.php ของคุณ:

<?php 
/*
 ==================
 Ajax Search
======================	 
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20fetch()%7B%0A%0A%20%20%20%20jQuery.ajax(%7B%0A%20%20%20%20%20%20%20%20url%3A%20'%3C%3Fphp%20echo%20admin_url('admin-ajax.php')%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'post'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%20action%3A%20'data_fetch'%2C%20keyword%3A%20jQuery('%23keyword').val()%20%7D%2C%0A%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery('%23datafetch').html(%20data%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) );
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>

        <?php endwhile;
       echo '</ul>';
        wp_reset_postdata();  
    endif;

    die();
}

เมื่อเสร็จแล้ว ให้กด Update File เพื่อบันทึกการเปลี่ยนแปลงของคุณ

press Update File

แค่นั้นแหละ. คุณได้เพิ่มการค้นหา Ajax แบบสดไปยังไซต์ WordPress ของคุณสำเร็จโดยไม่ต้องใช้ปลั๊กอิน

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

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

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

ต้องการซ่อนบางหมวดหมู่โพสต์จากการค้นหาหรือไม่ ทำตามวิธีการยกเว้นหมวดหมู่จากคู่มือการค้นหา WordPress