[쇼핑몰 구축기] 모바일 메뉴에 검색창 추가해 모바일 검색을 쉽게 하기

모바일 쇼핑 경험을 강화하기 위한 기본중의 하나는 검색을 쉽게 할 수 있게 만드는 것입니다.

모바일 메뉴를 만드는 가장 흔한 방법은 햄버거 메뉴를 만들어 이를 클릭해 세부 메뉴로 들어가도록 하는 방법이죠.

이 방법은 검색을 하기위해서 모바일 햄버거 메뉴를 클릭하고 이어 검색어를 입력해야하므로 상대적으로 불편합니다. 그렇기 때문에 헤더 메뉴에서 바로 검색을 시작할 수 있는 방안을 찾아보겠습니다.

Table of contents 목차 보이기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

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

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

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

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

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

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

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

첫번째, 검색엔진 – 사이트 내용을 잘 정리(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);Code language: PHP (php)

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

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;
}
Code language: PHP (php)

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

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

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

<?php get_search_form(); ?>Code language: PHP (php)

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;
}Code language: PHP (php)

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>';

}Code language: PHP (php)

5. 기타 참고 링크

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례