이전에 소개한 “SearchWP Live Ajax Search” 플러그인은 여러가지 장점이 많지만 초심자에 대한 배려는 거의 없다시피하기 때문에 초심자의 경우 많은 노력을 기울여 커스터마이징을 해야 합니다.

공부한다는 심정으로 “SearchWP Live Ajax Search” 플러그인을 잘 활용하기 위한 방안을 고민한 끝에 적지않은 성과도 있었지만 결국 구현하지 못하는 기능도 있습니다.

이렇게 실패한 기능중에는 검색 결과 마지막에 상세 검색 페이지로 이동하는 링크를 추가하는 것입니다.

비록 실패했지만 그 기록을 남겨서 나중에 참고해 개선 기회를 찾으려는 것이고, 더 나아가는 혹시 같은 고민을 하는 분들께 조금이라도 해결의 실마리를 드리고 싶기 때문입니다.

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

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

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

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

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

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

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

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

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

여기에서는 위에서 언급한대로 검색 페이지에서 상세 검색 페이지로 이동 또는 검색 결과를 페이지별로 보여주는 방법에 대한 탐구 결과를 공유해 보도록 하겠습니다.

1. 목적 – 상세 검색 페이지로 링크 추가

여기에서 목표로 한것은 라이브 검섹 결과 창에서 보다 상세한 검색을 위해서 상세 검색 페이지로 이동하는 링크를 추가하는 것입니다.

이러한 예를 잘 보여주는 Newspaper 테마의 라이브 서치 검색 결과를 보죠. Newspaper테마를 적용하는 경우 아래와 같은 검색 결과를 뿌려주고 아래 부분에 “View all results”라는 링크를 통해서 본격적인 검색을 할 수 있도록 만들었습니다.

검색 기능 고도화_newspaper 라이브서치구현 화면

여기서 “View all results” 링크를 누르면 아래와 같은 상세 검색 페이지로 이동합니다.

검색 기능 고도화_newspaper 검색 결과 화면

2. Newspaper 테마에서 적용 방법 연구

먼저 Newspaper 테마에서는 이를 어떻게 구현했는지 소스를 살펴보았습니다.

완벽하게 분석된 것은 아니지만 라이브 서치 시 검색한 검색어를 저장하는 변수를 지정하고, 이 변수를 가지고 상세 검색 페이지로 이동하기 때문에 상세 검색 페이지에서는 추가 검색어 입력할 필요가 없이 바로 검색 결과가 나타납니다.

이를 위한 코드는 아래처럼 구성되어 있습니다. 관련된다고 생각되는 코드의 일부분을 그대로 가져왔습니다.

조금 길기는 한데요. 제가 보기엔 아래 두가지 코드가 실마리를 주지 않나 생각합니다.

아래는 검색한 검색어를 저장하는 변수(?) 정의 부분입니다.

//get the data
$td_query = &td_data_source::get_wp_query_search($td_string, $limit); //by ref  do the query

아래는 상세 검색 페이지로 이동시키는 링크 구현 코드입니다.

/**
* @note:
* we use esc_url(home_url( '/' )) instead of the WordPress @see get_search_link function because that's what the internal
* WordPress widget it's using and it was creating duplicate links like: yoursite.com/search/search_query and yoursite.com?s=search_query
*
* also note that esc_url - as of today strips spaces (WTF) https://core.trac.wordpress.org/ticket/23605 so we used urlencode - to encode the query param with + instead of %20 as rawurlencode does
*/

$buffy_msg .= '<div class="result-msg"><a href="' . home_url('/?s=' . urlencode($td_string )) . '">' . __td('View all results', TD_THEME_NAME) . '</a></div>';

아래는 제가 보기에 관련 기능을 정리한 함수 전체 코드입니다. 참고하시라고 공유해 봅니다.

	static function on_ajax_search() {
		$buffy = '';
		$buffy_msg = '';

		//the search string
		if (!empty($_POST['td_string'])) {
			$td_string = esc_html($_POST['td_string']);
		} else {
			$td_string = '';
		}

		if (!empty($_POST['module'])) {
		    $td_module = esc_html($_POST['module']);
		    $td_results_class_prefix = 'tdb';
        } else {
            $td_module = 'td_module_mx2';
            $td_results_class_prefix = 'td';
        }

        if (!empty($_POST['atts'])) {
            $block_atts = json_decode(stripslashes($_POST['atts']), true);
        } else {
            $block_atts = array();
        }

        $limit = 4;
        if (!empty($_POST['limit'])) {
            $limit = $_POST['limit'];
        }

		//get the data
		$td_query = &td_data_source::get_wp_query_search($td_string, $limit); //by ref  do the query

		//build the results
		if (!empty($td_query->posts)) {
			foreach ($td_query->posts as $post) {
			    if( $td_module == 'td_module_mx2' ) {
                    $td_module_mx2 = new $td_module($post);
                    $buffy .= $td_module_mx2->render($post);
                } else {
			        $tdb_post = array(
                        'post_id' => $post->ID,
                        'post_type' => get_post_type( $post->ID ),
                        'has_post_thumbnail' => has_post_thumbnail( $post->ID ),
                        'post_thumbnail_id' => get_post_thumbnail_id( $post->ID ),
                        'post_link' => esc_url( get_permalink( $post->ID ) ),
                        'post_title' => get_the_title( $post->ID ),
                        'post_title_attribute' => esc_attr( strip_tags( get_the_title( $post->ID ) ) ),
                        'post_excerpt' => $post->post_excerpt,
                        'post_content' => $post->post_content,
                        'post_date_unix' =>  get_the_time( 'U', $post->ID ),
                        'post_date' => get_the_time( get_option( 'date_format' ), $post->ID ),
                        'post_author_url' => get_author_posts_url( $post->post_author ),
                        'post_author_name' => get_the_author_meta( 'display_name', $post->post_author ),
                        'post_author_email' => get_the_author_meta( 'email', $post->post_author ),
                        'post_comments_no' => get_comments_number( $post->ID ),
                        'post_comments_link' => get_comments_link( $post->ID ),
                        'post_theme_settings' => td_util::get_post_meta_array( $post->ID, 'td_post_theme_settings' ),
                    );

                    $td_module_mx2 = new $td_module($tdb_post, $block_atts);
                    $buffy .= $td_module_mx2->render($tdb_post);
                }
			}
		}

		if (count($td_query->posts) == 0) {
			//no results
			$buffy = '<div class="result-msg no-result">' . __td('No results', TD_THEME_NAME) . '</div>';
		} else {
			//show the resutls
			/**
			 * @note:
			 * we use esc_url(home_url( '/' )) instead of the WordPress @see get_search_link function because that's what the internal
			 * WordPress widget it's using and it was creating duplicate links like: yoursite.com/search/search_query and yoursite.com?s=search_query
			 *
			 * also note that esc_url - as of today strips spaces (WTF) https://core.trac.wordpress.org/ticket/23605 so we used urlencode - to encode the query param with + instead of %20 as rawurlencode does
			 */

			$buffy_msg .= '<div class="result-msg"><a href="' . home_url('/?s=' . urlencode($td_string )) . '">' . __td('View all results', TD_THEME_NAME) . '</a></div>';
			//add wrap
            if( !empty($_POST['module']) ) {
                $buffy = '<div class="tdb-aj-search-results"><div class="tdb-aj-search-inner">' . $buffy . '</div></div>' . $buffy_msg;
            } else {
                $buffy = '<div class="td-aj-search-results">' . $buffy . '</div>' . $buffy_msg;
            }
		}

		//prepare array for ajax
		$buffyArray = array(
			'td_data' => $buffy,
			'td_total_results' => 2,
			'td_total_in_list' => count($td_query->posts),
			'td_search_query'=> $td_string,
			//'td_search_query'=> strip_tags ($td_string)
		);

		// Return the String
		die(json_encode($buffyArray));
	}

3. SearchWP Live Ajax Search에서 구현 시도

이러한 Newspaper 템마의 구현 사례를 기반으로 SearchWP Live Ajax Search에서도 상세 검색 페이지로 이동 링크를 만드려고 시도했습니다.

3.1. 기 검색 명령어를 가져오는 변수

먼저 검색한 검색 명령어를 가져오는 코드는 claa-clent.php라는 파일에 아래와 같은 기능이 정의되어 있는 것 같습니다. – 확신하지 못해서 이런 표현을 적었습니다.

이 코드에 따르면 기 검색 명령어 변수는 $wp_query로 보여집니다.

function show_results( $args = array() ) {
    global $wp_query;

    // we're using query_posts() here because we want to prep the entire environment
    // for our template loader, allowing the developer to utilize everything they
    // normally would in a theme template (and reducing support requests)
    query_posts( $args );

    // ensure a proper found_posts count for $wp_query
    if ( class_exists( 'SearchWP' ) && ! empty( $this->results ) ) {
      $wp_query->found_posts = count( $this->results );
    }

    do_action( 'searchwp_live_search_alter_results' );

    // optionally pass along the SearchWP engine if applicable
    $engine = isset( $_REQUEST['swpengine'] ) ? sanitize_text_field( $_REQUEST['swpengine'] ) : '';

    // output the results using the results template
    $results = new SearchWP_Live_Search_Template();
    $results->get_template_part( 'search-results', $engine );
  }

저는 이 코드를 테마의 functions.php 파일에도 시도해보고 search-results.php 파일에도 적용해 봤지만 먹히지는 않더군요.. 나중에 더 공략이 쌓이면 해결할 수 있을 것 같아서 당분간 접기로 했습니다.

3.2. 상세 검색 페이지로 링크 코드 – 100% 작동하지 않음

성공하지는 못했지만 시도해본 상세 검색 페이지로 이동 일크를 걸어주는 코드는 아래와 같이 시도랬었습니다.

<div class="SearchWP"  style="text-align:center;color:#2196f3;font-size: 1.2em ;"><a href="/?s=<?php echo urlencode($wp_query); ?>">View all results</a></div> 

3.3. 검색 페이지네이션 만들기 코드 – 100% 작동하지 않음

마찬가지로 라이브 설치 결과 페이지에서 추가 검색 결과를 보기 위해서 다음 페이지로 이동할 수 있도록 보여주는 페이지네이셔 구현을 위해서 아래와 같은 코드를 시도했습니다.

마찬가지로 기존 검색 명령어를 가지고 오는데 실패해서 성공하지 못했습니다.

if ( $swp_query->max_num_pages > 1 ) { ?>
   <div class="navigation pagination" role="navigation">
      <h2 class="screen-reader-text">Posts navigation</h2>
	<div class="nav-links">
		<?php echo wp_kses_post( $pagination ); ?>
	</div>
   </div>
}

4. 포기하고 발상의 전환을 하다.

상세 검색 페이지로 기존 검색 명령어를 끌고 가는 방법이 제대로 먹히지 않고, 페이지네이션도 작동하지 않으면서 고민을 했습니다.

이 기능 구현에 무려 1주일이상 끙끙거렸는데 아쉬움이 많이 남았습니다. 별로 배운 것도 없고.. 차근차근 기본부터 배워야한다는 깨닫음이 가장 큰 교훈이라고나 할까요?

earchWP Live Ajax Search에서는 기본적으로 한 페이지에 7개의 검색 결과를 보여줍니다.

대부분 라이브 서치 결과에서는 적은 수의 결과를 보여주고 상세 검색은 메인 검색 페이지로 이동해거 하라고 가이드하는 듯 합니다. 앞서 언급한 newspaper 테마의 라이브 서치에서는 오직 4개만 보여줍니다.

그런데 곰곰히 생각해보니 상세 검색 페이지로 이동이나 페이지네이션을 만드는 목적은 사용자의 검색 경험을 쉽고 편리하게 만드는 것이라는 생각이 들면서 다르게 생각해 보기로 했습니다.

  • 상세 검색 페이지로 이동이나 페이지네이션은 결국 다른 페이지로 이동시키므로 사용성을 떨어뜨린다.
  • 다른 페이지로 이동해서 사용성을 떨어뜨리기보다는 라이브 서치 화면에서 최대한 많은 검색 결과를 보여주는 게 낫다.
  • 라이스 서치 결과에서 많은 데이타를 보여주어도 텍스트와 작은 썸네일이르므로 속도나 시스템이 큰 부담이 되지는 않는다.

따라서 한 페이지에서 가능하는한 많은 검색 결과를 보여주는 것이 좋겠다는 결론을 내렸습니다.
저는 최대 50개까지 보여주라고 세팅하고 그 속도나 사용성을 지속적으로 모니터링해서 조정하려고 합니다.

라이브 서치 플러그인  SearchWP Live Ajax Search 구현 모습

아래는 search-results.php에 적용한 코드 최종입니다.

<?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: normal;">
		<span style="display: inline-block; margin-left: 5px;margin-top: 5px;"><?php echo( get_the_post_thumbnail( $post->ID, array( 75, 75) ) ) ?></span>
		<span style="display: inline-block;">
			<p style="color:#216ef2;font-size: 1.1em ;"><a href="<?php echo esc_url( get_permalink() ); ?>">
				<?php the_title(); ?> (<?php echo esc_html( $post_type->labels->singular_name ); ?>) »
			</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;

그리고 페이지 단 최대 50개까지 보여주라는 옵션은 기 설명했지만 functions.php에 아래와 같은 코드를 추가했습니다.

// SearchWP Live Ajax Search, no of posting
function my_searchwp_live_search_posts_per_page() {
  return 50; // return 50 results
}
add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' );

댓글 남기기

Close Menu
×
×

Cart