요즘 어지간한 테마라면 쉽게 메뉴에 검색 기능을 추가할 수 있죠.

그렇지만 간혹 메뉴나 헤더 부분에 검색 기능을 추가할 필요가 있어서 검색 기능 추가 방법에 대해서 간단히 살펴 보았습니다.

원래 목적은 모바일에서 햄버거 메뉴 옆에 검색 기능 추가 방법을 찾다가 헤매고 만 케이스이기는 합니다.

이런 저런 방법을 발견했는데 혹시 다른 분들은 도움이 될지도 몰라서 공유해 봅니다.

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

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

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

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

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

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

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

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

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

아러한 세가지 프로세스중에서 여기에서는 검색을 할 수 있게 판을 깔아주는 검색창 구현에 대한 이야기를 푸러보겠습니다.

1. 헤더(메뉴)에 검색 박스 기능 추가하기

헤더에 일반적으로 메인 메뉴가 위치하는데요. 여기에 검색 기능 추가는 add_filter 명령으로 처리 가능합니다.

function head_nav_search($items, $args) {
    if( !($args->theme_location == 'site-header-inner') ) 
    return $items;
    return $items . '<li>' . get_search_form(false) . '</li>';
}
add_filter('wp_nav_menu_items', 'head_nav_search', 10, 2);

또는 아래와 같은 코드도 제안되네요..

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
    $items .= '<li>' . get_search_form( false ) . '</li>';
    return $items;
}

2. 원하는 곳에 코드 직접 삽입 방식

테마가 업데이트될 때만다 작업을해야하지만 (다른 플러그인을 사용하지 않는다면) 원하는 곳의 php 파일에 검색 폼을 추가하는 방법입니다.

검색폼을 추가하는 명령은 아래와 같습니다.

<?php get_search_form(); ?>

3. 검색 아이콘 추가하기

아미 테마에서 폰트 어썸을 사용하고 있다면 아래와 같은 코드를 이용해서 검색 아이콘을 추가할 수 있습니다.

여기 ‘primary’를 원하는 메뉴 위치 슬러그로 변경하면 됩니다. 이에 대해서는 “쇼핑몰 메뉴에 우커머스 로그인/로그아웃 링크 추가하기”라는 포스팅을 참조해 보시기 바랍니다.

저의 경우는 ‘main_menu’에 추가해 봤습니다.

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 

function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}

4. OceanWP 테마에서 메뉴 추가 방법

앞서 소개한 많은 방법은 워드프레스가 제공하는 메뉴 끝에 검색 아이콘이든 검색창이든 삽입하는 방식이므로 데스크탑에서는 바로 검색창이 보이지만 모바일에서는 햄버거메뉴 속으로 숨어버립니다.

그렇기 때문에 테마 특성을 타기는 하지만 OceabWP의 Hook 기능을 이용해 로고 다음에 검색창이 오도록 만들었습니다.

차이드 테마의 functions.php에 적용한 코드입니다.

// 검색 아이콘 추가 -
add_action('ocean_after_logo_inner', 'puripia_add_search_icon');
function puripia_add_search_icon() {

echo '<div class="clr custom_search" id="custom_search_id"><form method="get" calss="search" id="search" action="'.site_url().'"> <input type="search" placeholder="Search" name="s"  data-swplive="true"></form></div>';

}

5. 기타 참고 링크

CSS를 이용해서 다양한 효과를 주는 메뉴 구현 방안을 소개하는 사이트

14 CSS Search Boxes

PHP의 검색폼 구현 관련 다양한 예를 제시하는 사이트

PHP get_search_form Examples

Genes 테마 헤드에 검색 아이콘 추가하기

How to Add Search Icon in Genesis Authority Pro Header?

토글효과의 검색 아이콘 적용 방법

How to add Search Icon with Toggle Effect in WordPress Menus

댓글 남기기

Close Menu
  • Sign up
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.
We do not share your personal details with anyone.
×
×

Cart