플러그인 없이 WordPress에 라이브 Ajax 검색을 추가하는 방법

게시 됨: 2022-08-01

플러그인 없이 WordPress 사이트에 라이브 Ajax 검색을 추가하는 방법을 찾고 계십니까?

이를 통해 방문자에게 검색 결과를 즉시 제공하고 사용자 경험을 개선할 수 있습니다.

이 가이드에서는 플러그인 없이 사이트에 라이브 검색을 추가하는 방법과 이 방법의 단점에 대해 설명합니다.

다음은 탐색에 도움이 되는 목차입니다.

  • 사이트에 라이브 검색을 추가해야 하는 이유
  • 플러그인 없이 라이브 Ajax 검색 추가의 단점
  • 사이트에 라이브 Ajax 검색을 추가하는 가장 쉬운 방법
  • 플러그인 없이 WordPress에 라이브 Ajax 검색을 추가하는 방법

의 시작하자!

사이트에 라이브 검색을 추가해야 하는 이유

사이트에 실시간 검색을 추가하면 여러 가지 이유로 도움이 됩니다.

첫째, WordPress가 기본적으로 표시하는 별도의 새 페이지에서 방문자를 보는 것보다 방문자가 즉각적인 검색 결과를 얻는 것이 훨씬 더 편리합니다.

이를 통해 시간을 절약하고 찾고 있는 콘텐츠가 귀하의 사이트에 있는지 여부를 더 빨리 파악할 수 있습니다.

live search on a site

둘째, 사이트에서 긍정적인 검색 경험을 한 방문자가 다시 사용할 가능성이 높기 때문에 페이지뷰를 높이는 데 도움이 됩니다.

또한 Google은 사이트의 평균 세션 시간에 많은 관심을 기울이기 때문에 검색 엔진에서 더 많은 트래픽을 유치할 수 있는 좋은 방법입니다.

그러나 플러그인 없이 라이브 검색을 추가하는 것은 어려운 목표일 수 있습니다. 이것이 최선의 선택이 아닌 이유를 자세히 살펴보겠습니다.

플러그인 없이 라이브 Ajax 검색 추가의 단점

플러그인 없이 사이트에 라이브 검색을 추가할 때의 주요 문제는 테마 코드 편집이 포함된다는 것입니다.

이 접근 방식에는 다음과 같은 몇 가지 심각한 단점이 있습니다.

  • 코딩 기술이 필요합니다 . 테마 코드를 성공적으로 편집하려면 코딩 경험과 WordPress 작동 방식에 대한 깊은 이해가 있어야 합니다.
  • 시간이 더 걸립니다 . 플러그인을 사용하는 것과 달리 테마 코드를 편집하면 어떤 변경이 필요한지, 어디에 적용해야 하는지 파악하는 데 상당한 시간이 걸립니다.
  • 신뢰할 수 없습니다 . 테마 또는 WordPress 버전을 업데이트하면 모든 코드 사용자 정의를 쉽게 잃을 수 있습니다.
  • 그것은 편리하지 않습니다 . 플러그인을 사용하면 필요에 따라 필요한 기능을 빠르게 활성화 및 비활성화할 수 있으므로 훨씬 더 유연합니다.

따라서 숙련된 WordPress 사용자 또는 웹 개발자가 아닌 경우 다른 방법을 사용하여 사이트에 실시간 검색을 추가하는 것이 좋습니다.

정리가 끝나면 플러그인을 사용하여 테마 파일을 편집하지 않고 사이트에 실시간 검색을 추가하는 방법을 살펴보겠습니다.

사이트에 라이브 Ajax 검색을 추가하는 가장 쉬운 방법

라이브 Ajax 검색을 사이트에 추가하는 가장 쉬운 방법은 SearchWP와 같은 플러그인을 사용하는 것입니다.

SearchWP logo

SearchWP는 30,000개 이상의 활성 설치가 있는 시장 최고의 WordPress 검색 플러그인입니다.

이를 통해 코딩 없이 몇 번의 클릭만으로 사이트에서 실시간 검색을 활성화 및 비활성화할 수 있습니다.

이는 다른 많은 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

이제 SearchWP ZIP 파일을 사이트에 업로드하고 플러그인을 설치해야 합니다. 설치 방법에 대한 알림이 필요한 경우 WordPress 플러그인 자습서를 설치하는 방법을 확인하세요.

SearchWP 설치 후 라이센스 키로 플러그인 사본을 활성화해야 합니다.

그렇게 하려면 WordPress 대시보드의 상단 패널에 있는 SearchWP 버튼 위에 커서를 놓고 라이선스 활성화 를 클릭합니다.

click Activate License

라이선스 페이지로 이동한 후 SearchWP 라이선스 키를 라이선스 필드에 붙여넣고 활성화 를 클릭합니다.

press Activate

라이선스를 활성화하면 다음 단계로 이동하여 Live Search 확장을 설치할 준비가 된 것입니다.

2단계: SearchWP 라이브 검색 확장 설치

이 SearchWP 확장을 설치하면 단 한 줄의 코드도 작성하지 않고 몇 번의 클릭으로 사이트에서 실시간 Ajax 검색을 활성화할 수 있습니다.

시작하려면 WordPress 대시보드의 왼쪽에 있는 SearchWP » 확장 으로 이동합니다.

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

이제 플러그인 없이 사이트에 실시간 검색을 추가하는 방법을 살펴보겠습니다.

플러그인 없이 WordPress에 라이브 Ajax 검색을 추가하는 방법

플러그인을 사용하지 않고 사이트에 라이브 Ajax 검색을 추가하려면 테마 파일을 변경해야 합니다.

시작하려면 사이트에서 사용하는 현재 테마의 하위 테마를 만드십시오.

잘못된 작업을 수행하여 사이트가 충돌하는 경우 상위 테마로 빠르게 전환할 수 있습니다.

만일을 대비하여 편집을 시작하기 전에 사이트를 백업하는 것도 좋은 방법입니다.

도움이 필요한 경우 WordPress 하위 테마를 만드는 방법에 대한 이 자습서를 확인할 수 있습니다.

하위 테마를 만든 후 WordPress 대시보드로 이동하여 모양 » 테마 파일 편집기 로 이동합니다.

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();
}

완료되면 파일 업데이트 를 눌러 변경 사항을 저장합니다.

press Update File

그게 다야 플러그인 없이 WordPress 사이트에 라이브 Ajax 검색을 성공적으로 추가했습니다.

방문자가 즉시 검색 결과를 얻고 페이지뷰 수를 늘릴 수 있습니다.

코딩 없이 클릭 몇 번으로 사이트에 실시간 검색을 추가하고 싶으십니까? 여기에서 SearchWP를 시작할 수 있습니다.

게시물 태그로 검색을 활성화하는 방법이 궁금하십니까? WordPress에서 태그로 게시물을 검색하는 방법에 대한 자세한 자습서를 확인하십시오.

검색에서 일부 게시물 카테고리를 숨기고 싶으십니까? WordPress 검색 가이드에서 카테고리를 제외하는 방법을 따르십시오.