워드프레스에서 검색 기능을 사용할 때 검색어 강조를 표시하는 방법

동영상

워드프레스 블로그에서 검색 기능은 잘 활용하지 않는 것 같다. 검색 기능이 존재한다고 해도 ‘구글 맞춤 검색기’를 연동하여 사용하거나 아애 검색 기능을 비활성화하기 일쑤다. 아마 밋밋한 워드프레스의 내장된 검색 기능이 매력적이 않다는 이유가 가장 큰 것이 대표적인 이유가 아닐까.

플러그인을 사용하거나 php 코드를 삽입하면 검색 기능을 조금 더 매력적으로 바꿀 수 있다. 그중 검색어 강조는 검색 기능을 매력적으로 바꾸는 기초적인 시도이다. 그러니까 ‘아이콘 포스트’라는 검색어를 검색창에 입력했을 때 ‘아이콘 포스트’라는 단어에 색이나 폰트 스타일을 입혀 강조하는 기능이다.

플러그인 없이 검색어 강조하기

우선 FTP 프로그램을 통해 테마 폴더 안에 있는 functions.php 파일을 수정해주도록 한다. 관리자 페이지의 [외모 – 테마 편집기]에서 functions.php 파일을 수정해도 된다.

functions.php 파일 맨 아래쪽에 아래에 입력된 코드를 넣고 적용시켜준다.

// 검색 강조

function highlight_results($text){
if(is_search()){
$keys = implode('|', explode(' ', get_search_query()));
$text = preg_replace('/(' . $keys .')/iu', '<span class="search-highlight">
// 검색 강조
function highlight_results($text){
if(is_search()){
$keys = implode('|', explode(' ', get_search_query()));
$text = preg_replace('/(' . $keys .')/iu', '<span class="search-highlight">\0</span>', $text);
}
return $text;
}
add_filter('the_content', 'highlight_results');
add_filter('the_excerpt', 'highlight_results');
add_filter('the_title', 'highlight_results');
function highlight_results_css() {
?>
<style>
.search-highlight { background-color:#FF0; font-weight:bold; }
</style>
<?php
}
add_action('wp_head','highlight_results_css');
</span>', $text); } return $text; } add_filter('the_content', 'highlight_results'); add_filter('the_excerpt', 'highlight_results'); add_filter('the_title', 'highlight_results'); function highlight_results_css() { ?> <style> .search-highlight { background-color:#FF0; font-weight:bold; } </style> <?php } add_action('wp_head','highlight_results_css');

강조에 대한 색상은 위 코드에서 <style> 부분을 수정해주면 된다.

<style>
.search-highlight { background-color:#FF0; font-weight:bold; }
</style>

배경색을 파란색으로 바꾸고 싶은 경우 background-color를 파란색의 색 코드인 #0000ff로 교체해주면 된다.

적용이 끝나면 위 이미지처럼 검색 강조가 활성화된다.

플러그인으로 검색어 강조하기

functions.php 파일을 수정하기 힘든 경우 Highlight Search Terms 플러그인을 사용하면 된다. CSS는 [ .hilite ]를 사용하도록 하자. 예를 들어 검색어 강조 부분을 빨간색으로 만들고 싶다면 플러그인 설치 후 [외모 – 사용자 정의하기 – 추가 CSS]에서 아래와 같이 입력해주면 된다.

사용법이 어렵지 않기 때문에 설치하는 것만으로도 손쉽게 원하는 검색 강조 기능을 사용할 수 있을 것.

.hilite {
  color: #ff0000;
}

이 게시글은 0개 답변과 1명 참여가 있으며 마지막으로  아이콘 포스트에 의해 10 월, 1 주 전에 업데이트 됐습니다.

1 글 보임 - 1 에서 1 까지 (총 1 중에서)
1 글 보임 - 1 에서 1 까지 (총 1 중에서)

답변은 후 가능합니다. 회원가입을 진행해보세요!

error: 작업 속도가 너무 빠릅니다.