워드프레스 검색어 하이라이트 플러그인 - Highlight Search Terms
검색한 단어나 문구를 노란색 등으로 강조 표시하고 싶은 경우 워드프레스에서는 검색어 하이라이트 플러그인인 Highlight Search Terms를 사용할 수 있습니다. 이 무료 플러그인을 사용하면 페이지 제목과 본문 내의 검색 단어를 강조 표시할 수 있습니다.
글 작성 시 문단 내의 텍스트 일부만 강조 표시하고 싶은 경우 "텍스트 하이라이터(형광펜) 플러그인"에서 제시하는 코드를 사용할 수 있습니다.
워드프레스 검색어 하이라이트 플러그인 - Highlight Search Terms
Highlight Search Terms 플러그인은 워드프레스 검색 결과 페이지에서 검색어를 노란색으로 강조 표시하여 검색 단어가 어디에 위치해 있는지를 쉽게 파악할 수 있도록 합니다.
이 플러그인은 가벼우며, 설정할 옵션이 없습니다. 1.6 버전(이 글 작성 당시 최신 버전: 1.6)부터 jQuery 라이브러리에 의존하지 않는다고 합니다.
기능
- 워드프레스 검색 결과 페이지뿐만 아니라 발견된 페이지 내부의 한 클릭 깊은 페이지에서도 강조 표시됨.
- 대소문자 구분하지 않음
- BuddyPress / bbPress 호환: 포럼 검색 내에서도 하이라이트 표시
- 캐싱 (WP Super Cache) 호환
- 큰 따옴표로 감싼 검색어도 이제 단일 용어로 간주됨
사이트 속도에 영향을 덜 미치는 이 플러그인은 각 포스트 내의 검색 결과 페이지에서 모든 검색어를 찾아서 <mark class="hilite term-N">...</mark> 태그로 강조 표시합니다.
(여기서 N은 0부터 1씩 증가하는 숫자로, 검색된 검색어에 0부터 차례로 부여됩니다. 검색어의 일부가 따옴표로 둘러싸인 경우 단일 용어로 간주됩니다.
하이라이트에 설정된 CSS 스타일이 없습니다. 원하는 스타일을 자유롭게 사용할 수 있지만 인터넷 익스플로러 8 이하와 같이 HTML5를 지원하는 않는 브라우저에서도 하이라이트가 표시되기 위해서는 최소한 하나 이상의 규칙정의 해야 합니다.
모던한 HTML5 브라우저는 기본적으로 자체 하이라이트 스타일을 사용합니다. (보통 노란색 마커 스타일의 배경색)
스타일은 CSS로 변경이 가능합니다. 예시 CSS 코드:
.hilite { background-color:yellow; font-weight:bold } /* 기본 - default */
.term-1 { background-color:#D3E18A } /* 두 번째 검색어에만 적용 - second search term only */
.term-2 { background-color:#9CD4FF } /* 세 번째 검색어에만 적용 - third search term only */
.term-3 { background-color:#FFCA61 } /* 두 번째 검색어에만 적용 - fourth search term only */커스텀 CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하시면 됩니다. 아바다 등 일부 유료 테마에서는 테마 옵션 내에 Custom CSS 코드를 추가하는 섹션을 제공하기도 합니다.
이 플러그인을 사용하여 테스트해보니 한글에서도 잘 작동하네요. 여러 단어로 된 검색어에서도 작동하고, 검색어에 조사가 붙거나 다른 단어와 결합된 경우에도 해당 검색어만 노란색으로 강조 표시합니다.
플러그인이 제대로 작동하지 않을 경우
이 플러그인을 설치해도 검색 결과 페이지에서 검색어가 형광펜으로 표시되지 않으면 플러그인이나 테마와 충돌로 인해 플러그인이 제대로 작동하지 않는 경우일 수 있습니다. 하이라이트가 작동하지 않으면 다른 플러그인들을 비활성화하여 문제가 해결되는지 체크해보시기 바랍니다. 또한, 플러그인 지원 페이지를 통해 지원을 받을 수도 있습니다.
마치며
이상으로 워드프레스 검색 결과 페이지에서 검색어를 강조 표시하는 Highlight Search Terms 플러그인에 대하여 살펴보았습니다. (워드프레스 관리자 페이지 > 플러그인 > 새로 추가에서 'Highlight Search Terms'를 검색하면 워드프레스 한국어 버전에서는 '검색어 강조'라는 이름으로 검색됩니다.)
검색 상자에 검색 문구 일부를 입력할 때 실시간으로 검색 결과를 표시하고 싶은 경우에는 Ajax Search Pro와 같은 Ajax 검색 플러그인을 사용할 수 있습니다.
