[쇼핑몰 구축기] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

앞서 포스팅했던 라이브 서치 기능 추가 방법에서 소개한 여러 플러그인 중에서 SearchWP라는 괜찮은 검색 업체에서 제공하는 SearchWP Live Ajax Search 플러그인을 제대로 사용하는 방법에 대해 살펴봅니다.

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

Table of contents 목차 보이기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

여기에서는 라이브 서치 플러그인인 중에서 가장 무난하게 사용할 수 있는 “SearchWP Live Ajax Search” 플러그인을 제대로 사용하는 방법에대해서 알아보겠습니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

아러한 세가지 프로세스중에서 여기에서는 검색 결과를 어떻게 보여줄 것인가에 대한 이야기 중의 하나인 라이브 서치 기능에 대해서 알아보겠습니다.

이전 포스팅 “[쇼핑 경험 최적화] 라이브 서치 기능 추가하기”에서 무료로 사용가능한 라이브 서치 기능을 소개했죠.

여기서 각기 플러그인들은 다들 나름대로의 장점과 단점을 가졌지만 지속 지원 가능성이나 다른 서치엔진과의 호환성을 고려하면 “SearchWP Live Ajax Search” 플러그인이 현재 시점에서는 가장 나은 대안 중의 하나라는 생각입니다.

다만 이 플러그인은 치명적으로 아무런 화면을 제공하지 않습니다. 아주 불친절하죠. 그리고 초기 화면도 아주 심플합니다. 디자인이 거의 없는 오직 검색만을 위한 실용성이 가득 담긴 플러그인입니다.

그렇기에 플러그인 추가에 따른 부담이 상대적으로 덜하다고 할 수 있단ㄴ 잠점만큼 수작업으로 원하는 디자인이나 기능을 추가해야 합니다.

1. get_search_form() 미 적용 테마에서 사용가능하게 만들기

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

이 경우는 data 속성을 부여해 사용해야 합니다. 이 방법은 생각보다는 어렵지는 않습니다.

즉 테마의 searchform.php 파일의 검색 폼에 data-swplive=”true” 를 추가하는 것으로 가능합니다. data-swplive=”true” enables SearchWP Live Search

twentyseventeen 테마의 경우

예를들어 워드프레스 설치 시 기본으로 제공되는 twentyseventeen 테마의 searchform.php 파일의 검색 폼은 아래와 같은 코드로 되어 있습니다.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>Code language: PHP (php)

여기서 5번째 줄 끝부분 즈음 name=”s” 다음에 data-swplive=”true” 를 추가합니다. 그러면 아래와 같은 코드가 되겠죠.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" data-swplive="true"  />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>Code language: PHP (php)

아래는 플러그인 공식 문서에서 제안하는 방법인데요. 참고로 보시면 좋을 것 같습니다.

<?php
  // if your form is generated using get_search_form() you do not need to do this
  // as SearchWP Live Search does it automatically out of the box
?>

<form action="" method="get">
  <p>
    <label for="s"><?php _e( 'Search' , 'mytextdomain' ); ?></label>
    <input type="text" name="s" id="s" value="" data-swplive="true" /> <!-- data-swplive="true" enables SearchWP Live Search -->
  </p>
  <p>
    <button type="submit"><?php _e( 'Search' , 'mytextdomain' ); ?></button>
  </p>
</form>Code language: PHP (php)

같은 방법이지만 다양한 사례를 소개하는 것도 의미가 있으니 “SearchWP Live Ajax Searchを使ってみる”에서 설명하는 방법도 참고해 보시기 바랍니다. 이도 같은 방법입니다.

변경 전

<form method="get" action="/">
    <input type="search" name="s" />
    <input type="submit" value="검색" />
</form>Code language: PHP (php)

변경 후

<form method="get" action="/">
    <input type="search" name="s" data-swplive="true" />
    <input type="submit" value="검색" />
</form>Code language: PHP (php)

2. 기능 및 디자인 변경 방법

SearchWP Live Ajax Search의 검색 결과를 보여주는 포맷 세팅을 변경은 대부분과 마찬가지로 세가지 정도의 방법이 동원됩니다.

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

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

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

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

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

2.2. 테마의 functions.php에서 제어

대부분이 다 그러하듯이 이 플러그인도 테마의 functions.php 파일에서 필터 명령을 통해서 제어 가능합니다.

2.3. style.css에서 제어

마찬가지로 이 플러그인의 디자인을 제어하는 style.css 파일을 통해서 제어 가능합니다. 업데이트되는 것을 대ㅑ비해서 custom css에서 관련 코드를 지정합니다.

3. 썸네일 추가 방법

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

search-results.php 파일에서 기존 코드를 아래에서 설명하는 코드로 변경하면 되는데요. 잘 보면 아래 코드가 추가된 것을 알 수 있습니다.

<span style="display: inline-block; margin-left: 5px;margin-top: 5px;"><?php echo( get_the_post_thumbnail( $post->ID, array( 50, 50) ) ) ?></span>Code language: PHP (php)

여기서 썸네일 이미지 크기를 바꾸고 싶다면 array( 50, 50)을 원하는 수치로 변경합니다. 저의 경우는 array( 75, 75)로 지정했습니다.

SearchWP Live Ajax Search Results With Thumbnails

<?php
/**
* This template adds thumbnails to your SearchWP Live Ajax Search results.
* 
* Create a folder called searchwp-live-ajax-search in your child theme folder and copy this file in there. 
* In order for this to work you require the SearchWP and SearchWP Live Ajax Search plugins installed and active.
*
*/
?>

<?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( 50, 50) ) ) ?></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)

4. 검색 시작 글자수 지정하기

대부분의 라이브 서치 기능은 첫 글자만 치면 바로 검색 결과를 보여줍니다. 그래야 어느 정도 라이브 서치가 되고 있다는 느낌을 받을 수 있겠죠.

그렇지만 척 글자부터 보여주는 것은 보기에는 좋지만 실 검색 결과에는 별 도우이 안됩니다. 아무래도 원하는 단어를 입력해야 정확한 검색이 가능할 수 있겠죠.

그렇기 때문에 SearchWP Live Ajax Search 에서는 기본적으로 세글자이상을 입력해야 검색 결과가 나오도록 기본 설정 되어 있습니다.

이를 간단하게 수정하는 방법은 functions.php 파일에 아래 명령을 추가하는 것입니다.

아래 코드에서 return 2가 몇번째 글자부터 검색 결과를 반영할 것이냐를 지정합니다. 2이니 두번째 글자가 입력되면 검색결과를 보여다오라고 지정하는 것입니다..

function my_searchwp_minimum_word_length() {
  // index and search for words with at least two characters
  return 2;
}
 
add_filter( 'searchwp_minimum_word_length', 'my_searchwp_minimum_word_length' );Code language: PHP (php)

이 방법 외 아래서 소개하는 초기 세팅 명령에서 지정할 수도 있습니다.

5. 몇개의 검색 결과를 보여줄 것인지?

마찬가지로 몇개의 검색 결과를 보여줄 것인지를 지정할 수 있습니다. 기본적으로는 7개만 보여줍니다.

아래 코드 양식으로 functions.php 파일에 추가합니다. return 다음의 수치가 보옂고 싶은 줄 수 입니다. 아래는 20개를 보여주겠다고 지정했습니다.

function my_searchwp_live_search_posts_per_page() {
  return 20; // return 20 results
}
add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' );Code language: PHP (php)

6. 기본 설정 변경

마찬가지로 functions.php파일에서 기본 설정 몇가지를 변경할 수 있습니다.

검색 엔진 지정 ‘engine’ => ‘default’,
검색 결과를 보여주는 시간 ‘delay’ => 200,
검색 결과를 보여주는 입력 글자 수 ‘min_chars’ => 1,
검색 결과를 보여주는 위치 ‘position’ => ‘bottom’, 또는 ‘top’,
검색 결과를 보여주는 창 크기 제어 방법 ‘width’ => ‘css’, 또는 ‘width’ => ‘auto’,

아래는 제가 적용한 코드입니다.

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'     => 'auto',              // 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 3 characters before triggering a search
    ),
    'results' => array(
      'position'  => 'top',               // 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)

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

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