워드프레스 메뉴에 검색바 추가하는 방법

일부 워드프레스 테마에서는 검색 아이콘을 추가하는 옵션을 제공하기도 합니다. 예를 들어, 뉴스페이퍼 테마에서는 메인 메뉴나 상단 표시줄(Top Bar)에 검색 버튼을 표시하도록 설정을 제공합니다. 이 블로그에 사용된 GeneratePress 테마도 메뉴 내비게이션에 검색 아이콘을 표시하는 옵션이 있습니다.

뉴스페이퍼 테마 검색 아이콘
뉴스페이퍼 테마 검색 아이콘.

검색 아이콘 대신 검색바(검색 상자)를 표시하고 싶고 경우가 있을 수 있습니다. 테마에서 헤더 위젯 영역을 제공한다면 검색 블록을 헤더 위젯 영역에 추가하여 쉽게 검색바를 표시할 수 있습니다.

이 글에서는 간단한 코드를 테마 함수 파일에 추가하여 메뉴 내비게이션에 검색바를 추가하는 방법에 대하여 살펴보겠습니다.

워드프레스 메뉴에 검색바 추가하는 방법

워드프레스 메뉴에 검색바 추가하는 방법

위의 그림에서 윗부분은 GeneratePress 테마의 메인 메뉴에 검색 아이콘을 표시했을 때를 보여줍니다. 아랫부분과 같이 검색 아이콘 대신 검색바(Search Bar)를 표시하려는 경우 테마 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.

// 메뉴에 검색 표시줄 표시하기
// Add Search Bar to WordPress Menu Navigation 

function pagedart_search_menu( $items, $args ) {
	if ($args->theme_location == 'main_navigation') {
    return $items . "<li class='menu-header-search'>".get_search_form(false)."</li>";
  }
}
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);

차일드 테마(자식 테마)를 만든 다음, 차일드 테마 내의 함수 파일(functions.php)에 추가하시기 바랍니다. 차일드 테마를 이용하지 않고 부모 테마 함수 파일에 직접 코드를 추가하면 추후에 테마 업데이트 시 추가한 코드가 사라지게 됩니다. (FTP를 사용하여 웹호스팅 서버에 접속하여 작업하세요.)

위의 코드에서 theme_location 부분은 테마에 맞게 적절히 변경하도록 합니다. 예를 들어, Avada 테마의 theme_location은 다음과 같습니다.

  • main_navigation - 메인 내비게이션)
  • top_navigation - 톱 내비게이션)
  • mobile_navigation - 모바일 내비게이션)
  • 404_pages - 404 페이지
  • sticky_navigation - 고정 헤더 내비게이션

theme_location은 테마에 따라 다르므로, 정확한 값을 모르는 경우 아래에 사용하는 테마를 알려주시면 메뉴 위치(theme_location)을 확인할 수 있는 경우 알려드리도록 하겠습니다.

검색 상자의 Search 버튼의 색상은 CSS로 조정할 수 있습니다. placeholder 텍스트(Search ...)를 없애고 싶은 경우 다음 글에서 설명하는 방법을 이용할 수 있습니다.

사이트에 메뉴가 하나만 사용되는 경우에는 메뉴 위치를 체크하는 조건문을 삭제해도 됩니다.

function pagedart_search_menu( $items, $args ) {
    return $items . "<li class='menu-header-search'>".get_search_form(false)."</li>";
}
  add_filter('wp_nav_menu_items','pagedart_search_menu', 10, 2);

검색바의 위치를 메뉴 앞쪽에 위치시키고 싶은 경우에는 위의 코드에서 "<li>" . get_search_form(false) . "</li>" 부분을 적절히 앞쪽으로 이동시키시기 바랍니다. 예시:

    return "<li class='menu-header-search'>".get_search_form(false). "</li>" . $items;

마치며

이상으로 워드프레스 메뉴에 검색 상자를 표시하는 방법에 대하여 살펴보았습니다. FTP에 접속하여 코드를 추가하는 작업에 어려움을 겪는 경우 적절한 플러그인이 있는지 체크해볼 수 있습니다. 살펴보니 Ivory Search와 같은 플러그인을 사용하면 메뉴에 검색바를 추가할 수 있는 것 같습니다.

참고


2개 댓글

    1. 안녕하세요, 김수현님. 본문에 제시된 코드는 워드프레스 기능을 이용한 것입니다. 만약 엘리멘터 프로를 사용하여 메뉴를 추가한 경우에는 작동하지 않을 것입니다.
      코드가 올바른지(테마에 따라 변경해주어야 할 부분이 있습니다), 제대로 추가했는지도 체크해보세요.

      https://iwordpower.com/ 사이트에서 검색 표시줄을 본문의 방식을 이용하여 삽입했습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.