워드프레스 검색 결과 페이지 커스텀

1. Search Value Highlight / Search Terms Highlight

(1) 스크립트를 사용하는 방법

    var search_val = $('#header-search').val();
    $("body.search-results .h3 a:contains('"+search_val+"')").each(function() {
        var search_val_regex = new RegExp(search_val,'gi');
        $(this).html( $(this).text().replace(search_val_regex, "<span class='highlight'>"+search_val+"</span>") );
    });

(2) 플러그인을 이용하는 방법

Relevanssi – A Better Search v4.18.3 by Mikko Saari : https://wordpress.org/plugins/relevanssi/
Relevanssi Light v1.2.2 by Mikko Saari : https://wordpress.org/plugins/relevanssi-light/

Relevanssi Light

 

2. 요약문/발췌문(excerpt)이 검색어에 포함시  검색 결과 페이지에서 해당 부분이 위치하도록 함

- 1-2)에서 언급한 Relevanssi 플러그인의 'Custom search result snippets' 기능을 이용

ex) 줌 허브에서 '스카이돔; 검색 결과 : https://hub.zum.com/search?keyword=고척돔&isTag=False 

검색어 '스카이돔'은 본문 시작 부분이나 요약문이 아닌 본문 중간에 위치해있다.

 

하지만 검색결과 페이지의 excerpt에는 본문의 '스카이돔'이 위치한 텍스트를 중심으로 노출된다.

※ 검색 글 : https://hub.zum.com/ohmynews/90732?cm=hubzum_search_list&r=19&thumb=1 

 

 

3. Search Result excerpt : 텍스트 변경 스크립트

// 요소 default color: #fff
jQuery('body.search-results .excerpt').each(function() {
	var search_result_excerpt = jQuery(this).text();
	if ( (search_result_excerpt.indexOf('video') != -1) || (search_result_excerpt.indexOf('원문링크 바로가기') != -1) ) {
		jQuery(this).text('');
	};
	jQuery(this).css('color','#666');
});

 

4. parameter 형태의 permalink를 SEO 친화적인 URL 구조로 변경

- Before : https://example.com/?s=검색어 
- After : https://example.com/search/검색어

function wpb_change_search_url() {
	if ( is_search() && ! empty( $_GET['s'] ) ) {
		wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
		exit();
	}
}
add_action( 'template_redirect', 'wpb_change_search_url' );

※ 출처 : WPBeginner | How to Change the Default Search URL Slug in WordPress