워드프레스 테마 GeneratePress에서 라이브 서치 구현하기

Updated on 2020-03-21 by

여기에서는 워드프레스 테마 GeneratePress에서 라이브 서치 기능 구현 방법을 알아봅니다. 이를 위해서 라이브 서치 플러그인 중에서 무료이고 가장 사용성이 좋다는 SearchWP Live Ajax Search 플러그인을 활용할 예정입니다.

워드프레스 GeneratePress 테마에서 SearchWP Live Ajax Search 구현 모습
워드프레스 GeneratePress 테마에서 SearchWP Live Ajax Search 구현 모습

라이브 서치(Live Search)는 일반적으로 검색창에 검색어를 입력하면 바로 검색 결과를 보여주기 때문에 편하게 검색할 수 있고, 검색 시간을 줄일 수 있습니다.

일반적인 검색 기능은 검색어 입력 후 엔터를 치면 검색 결과를 별도 페이지에 보여주기 때문에 한 단계가 더 추가되고, 페이지를 만들기 때문에 속도가 느려질 수 있습니다.

Table of contents 목차 보이기

1. SearchWP Live Ajax Search 라이브 서치플러그인 선택

콘텐츠 검색이 중요한 블러그 전문 또는 뉴스 전용 테마들의 경우 기본적인 라이브 서치 기능을 제공하기도 합니다.

예를들어 제가 이전에 사용했던 Newspaper테마는 5개정도로 제한되어 있었지만 간단한 라이브 서치 기능을 제공해서 편하게 사용할 수 있었습니다.

그러나 이런 기능들이 추가되는 것은 테마를 무겁게 만들기 때문에 대부분 테마는 이런 고급(?) 기능은 제공하지 않죠. 특히 OceanWP나 GeneratePress와 같은 커스터마이제이션용으로 사용되는 가벼운 테마들은 더욱 그렇습니다.

그래서 대부분 테마에서는 라이브 서치(Live Search)를 지원하는 플러그인을 활용해야 합니다.

필요가 있는 곳에 공급이 있다고 마찬가지로 라이브 서치는 매력적인 기능이기 때문에 수많은 라이브 서치(Live Search) 플러그인들이 있는데요.

여기서는 여러가를 검토한 끝에 SearchWP Live Ajax Search를 사용하기로 했습니다.

여러가지 괜찮은 라이브 서치 플러그인들에 대한 소개는 아래 글을 참조해 보면 좋을 것 같습니다.

[쇼핑몰 구축기] 쉽고 빠른 검색을 위한 라이브 서치 기능 추가하기

1.1. Dave’s WordPress Live Search

라이브 서치 기능중에서 가장 많이 추천되는 플러그인이 Dave’s WordPress Live Search인데요.

제가 보기에 다음과 같은 장점이 있는 것 같습니다.

  • 사이트에서 사용하는 검색 명령에 상관없이 기존 검색폼에서 자동으로 라이브 서치 기능을 구현해 줍니다.
  • 사용자에 따라서 라이브 서치 결과 폼을 커스터마이징할 수 있습니다. 그것도 별다른 코딩없이.
  • 리이브 서치 플러그인들이 그렇듯이 성능 좋은 서치 엔진과 같이 사용해 성과를 높일 수 있습니다. 무료로 강력한 검색 기능을 제공하는 Relevanssi – A Better Search와 활용 시 무료로 좋은 성과를 낼 수 있습니다.
  • 프로그래밍 능력이 된다면 다양한 필터 기능을 적용할수 있습니다.

이 플러그인도 여러가지 단점이 있습니다.

  • 가장 큰 단점은 최근 업데이트가 멈추고, 지원도 안되고 있다는 점입니다. 이 그를 ㅆ는 2019년 6월 기준 근 1년동안 업데이트가 안되고 있습니다.

1.2. SearchWP Live Ajax Search

두번째로 SearchWP Live Ajax Search를 들 수 있습니다.

이 플러그인은 SearchWP라는 굉장히 파워플한 워드프레서 검색 플러그인에서 제공하는 라이브 서치 기능인데요.

SearchWP Live Ajax Search 작동 모습

장점은

  • SearchWP라는 유수의 프리미어 검색 플러그인에서 제공하기 때문에 업데이트가 계속된다는 점
  • 워드프레스 검색 폼인 get_search_form() 를 사용하는 모든 테마에서 제공하는 검색 폼에 자동으로 라이브 서치 기능을 제공
  • 개발자 입장에서 다양하게 커스터마이징할 수 있음

그렇지만 이 라이브 검색 플러그인도 단점이 많이 있기는 합니다.

  • 우선 개발자들이 쉽게 커스터마이징을 할 수 있지만 일반들이 커스터마이징 하기는 쉽지는 않습니다. 어느 정도 기술적인 지식을 가지고 있어야 합니다.
  • 위에서 소개한 Dave’s WordPress Live Search보다는 호환성이 높지는 않습니다. get_search_form()을 명시적으로 사용하는 검색폼은 자동으로 지원하지만 그렇지 않은 경우 별도 커스터마이징을 해야 합니다.

2.3. Ajax Search Lite

Ajax Search Lite는 Ajax Search Pro라는 검색 엔진과 라이브 서치 기능을 동시에 제공하는 프리미엄 플러그인의 무료 공개판입니다.

기본적인 검색 기능을 라이브 서치로 구현해 보여주는데요.

개인적으로 장점이라면 아래와 같은 점을 들 수 있습니다.

  • 상당히 보기 좋은 디자인
  • 상대적으로 빠른 속도
  • 검색폼에서 다양한 필터를 바로 선택할 수 있습니다. 포스팅 제목, 콘텐츠, 글쓴이 등읃

제 개인적으로는 단점이 더 많이 보이기는 합니다.

  • 기존 테마에서 구현해 놓은 검색폼을 그대로 지원하지는 않습니다. Ajax Search Lite에서 제공하는 검색폼을 별도로 설치해야 하죠.
  • Ajax Search Lite는 무료 공개판이다보니, 기본적인 검색 기능만 제공합니다.

2. get_search_form() 사용가능하게 만들기

SearchWP Live Ajax Search은 기본적으로 get_search_form()만 지원하므로 이를 사용하지 않은 테마나 검색 폼을 적용한 경우 SearchWP Live Ajax Search 를 설치해도 검색이 이루어지지 않습니다.

이 경우는 data 속성을 부여해 사용해야 합니다. 

GenerattePress 테마에서는 functions.php 파일에 아래 코드를 추가해 사용 가능토록 합니다.

/**
 * GeneratePress테마에서 SearchWP Live Ajax Search 사용하기 
 * https://generatepress.com/forums/topic/searchwp-live-search/
 */

add_filter( 'generate_navigation_search_output', 'tu_nav_live_search' );
function tu_nav_live_search() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" data-swplive="true" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' )
    );
}
Code language: PHP (php)

3. 기능 옵션 정의

앞에서도 이야기했듯이 SearchWP Live Ajax Search 플러그인은 매우 간단해서 사용자가 옵션 변경할 별도 화면이 없습니다.

검색 결과를 보여주는 포맷 세팅은 코드를 추가해야 합니다.

아래는 제가 세팅해서 functions.php에 추가한 코드이니 참고하시기 바랍니다.


// SearchWP Live Ajax Search, Basic setting, https://searchwp.com/docs/hooks/searchwp_minimum_word_length/
function my_searchwp_live_search_configs( $configs ) {
  // override some defaults
  $configs['default'] = array(
    'engine' => 'default',                      // search engine to use (if SearchWP is available)
    'input' => array(
      'delay'     => 200,                 // wait 500ms before triggering a search
      'min_chars' => 1,                   // wait for at least 3 characters before triggering a search
    ),
    'results' => array(
      'position'  => 'bottom',            // 검색창 아래(bottom) where to position the results (bottom|top)
      'width'     => 'css',              // whether the width should automatically match the input (auto|css)
      'offset'    => array(
        'x' => 0,                   // x offset (in pixels)
        'y' => 5                    // y offset (in pixels)
      ),
    ),
    'spinner' => array(                         // powered by http://fgnass.github.io/spin.js/
      'lines'         => 10,              // number of lines in the spinner
      'length'        => 8,               // length of each line
      'width'         => 4,               // line thickness
      'radius'        => 8,               // radius of inner circle
      'corners'       => 1,               // corner roundness (0..1)
      'rotate'        => 0,               // rotation offset
      'direction'     => 1,               // 1: clockwise, -1: counterclockwise
      'color'         => '#000',          // #rgb or #rrggbb or array of colors
      'speed'         => 1,               // rounds per second
      'trail'         => 60,              // afterglow percentage
      'shadow'        => false,           // whether to render a shadow
      'hwaccel'       => false,           // whether to use hardware acceleration
      'className'     => 'spinner',       // CSS class assigned to spinner
      'zIndex'        => 2000000000,      // z-index of spinner
      'top'           => '50%',           // top position (relative to parent)
      'left'          => '50%',           // left position (relative to parent)
    ),
  );
  // add an additional config called 'my_config'
  $configs['my_config'] = array(
    'engine' => 'supplemental',                 // search engine to use (if SearchWP is available)
    'input' => array(
      'delay'     => 200,                 // wait 500ms before triggering a search
      'min_chars' => 1,                   // 검색을 시작할 최소 입력 문자, wait for at least 1 characters before triggering a search
    ),
    'results' => array(
      'position'  => 'bottom',               // where to position the results (bottom|top)
      'width'     => 'css',               // whether the width should automatically match the input (auto|css)
      'offset'    => array(
        'x' => 0,                   // x offset (in pixels)
        'y' => 0                    // y offset (in pixels)
      ),
    ),
    'spinner' => array(                         // powered by http://fgnass.github.io/spin.js/
      'lines'         => 8,               // number of lines in the spinner
      'length'        => 6,               // length of each line
      'width'         => 5,               // line thickness
      'radius'        => 6,               // radius of inner circle
      'corners'       => 1,               // corner roundness (0..1)
      'rotate'        => 0,               // rotation offset
      'direction'     => 1,               // 1: clockwise, -1: counterclockwise
      'color'         => '#000',          // #rgb or #rrggbb or array of colors
      'speed'         => 1,               // rounds per second
      'trail'         => 60,              // afterglow percentage
      'shadow'        => false,           // whether to render a shadow
      'hwaccel'       => false,           // whether to use hardware acceleration
      'className'     => 'spinner',       // CSS class assigned to spinner
      'zIndex'        => 2000000000,      // z-index of spinner
      'top'           => '50%',           // top position (relative to parent)
      'left'          => '50%',           // left position (relative to parent)
    ),
  );
  
  return $configs;
}
add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' );Code language: PHP (php)

4. 디자인 세팅

검색 결과를 보여주는 디자인을 세팅합니다. 이는 마찬가지로 커스텀 CSS 코드를 추가합니다.

아래는 제가 사용하는 커스텀 CSS 코드입니다.

/* Ajax live search result setting */
.searchwp-live-search-results-showing{
    width:450px !important; 
    height: auto; 
      overflow: auto;
}
.searchwp-live-search-results {
    vertical-align: top !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 0 2px 0 rgba(30,30,30,0.4);
    box-shadow: 0 0 2px 0 rgba(30,30,30,0.4);
    border-radius: 3px;
    width: 440px;
    min-height:  auto;
    max-height: 925px;
}

.searchwp-live-search-result a {
    display: block;
    width:320px !important; 
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 767px) {
    .searchwp-live-search-results-showing{
        width:290px !important; 
        height:450px !important; 
    }
    .searchwp-live-search-results {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        background: #fff;
        -webkit-box-shadow: 0 0 2px 0 rgba(30,30,30,0.4);
        box-shadow: 0 0 2px 0 rgba(30,30,30,0.4);
        border-radius: 3px;
        width: 290px;
        min-height: 250px;
        max-height: 450px;
    }    
    .searchwp-live-search-result a {
        display: block;
        width:160px !important; 
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .container, body.content-full-screen .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container{
    max-width: 98%;
}
}Code language: PHP (php)

5. 검색 결과에 섬네일 보여주기

이 플러그인은 아주 단순해서 썸네일 추가도 별도 커스터마이징을 해야 합니다. 이에 대해서는 아래 포스팅에서 잘 설명하고 있습니다.

SearchWP Live Ajax Search Results With Thumbnails

5.1. 테플릿 search-results.php 파일 관리

검색 결과는 템플릿 시스템에 의해서 보여지기 때문에 이 템플릿 수정을 통해서 검색 결과 포맷을 변경할 수 있습니다.

SearchWP Live Ajax Search의 검색 결과를 보야주는 템플릿은 ~/wp-content/plugins/searchwp-live-ajax-search/templates/search-results.php이라는 파일에서 정의하고 있습니다.

이를 수정하고 안정적으로 유지 관리하기 위해서는 차일드 테마에서 관리할 수 있도록 만듭니다.

  1. 차일드 테마에서 searchwp-live-ajax-search라는 폴더를 만듭니다.
  2. search-results.php라는 파일을 ~/wp-content/plugins/searchwp-live-ajax-search/templates/에서 복사해 옵니다.
  3. 복사해온 search-results.php 파일을 원하는 대로 수정합니다.

5.2. 테플릿 search-results.php 파일 수정

이 플러그인의 search-results.php 파일 내용을 아래와 같이 변경합니다.

<?php
/**
 * Search results are contained within a div.searchwp-live-search-results
 * which you can style accordingly as you would any other element on your site
 *
 * Some base styles are output in wp_footer that do nothing but position the
 * results container and apply a default transition, you can disable that by
 * adding the following to your theme's functions.php:
 *
 * add_filter( 'searchwp_live_search_base_styles', '__return_false' );
 *
 * There is a separate stylesheet that is also enqueued that applies the default
 * results theme (the visual styles) but you can disable that too by adding
 * the following to your theme's functions.php:
 *
 * wp_dequeue_style( 'searchwp-live-search' );
 *
 * You can use ~/searchwp-live-search/assets/styles/style.css as a guide to customize
 */
?>

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php $post_type = get_post_type_object( get_post_type() ); ?>
		<div class="searchwp-live-search-result" style="white-space: nowrap;">
		<span style="display: inline-block; margin-left: 5px;"><?php echo( get_the_post_thumbnail( $post->ID, array( 75, 75) ) ) ?></span>
		<span style="display: inline-block;">
			<p><a href="<?php echo esc_url( get_permalink() ); ?>">
				<?php the_title(); ?> »
			</a></p>
		</span>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<p class="searchwp-live-search-no-results">
		<em><?php _ex( 'No results found.', 'swplas' ); ?></em>
	</p>
<?php endif; ?>
Code language: PHP (php)

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments