워드프레스 상단 메뉴 네비게이션에 검색창 추가하는 방법


워드프레스 검색 박스를 상단 메뉴 항목에 삽입하는 방법은 메뉴의 커스텀 링크 기능을 사용하면 됩니다. 이 방법은 플러그인을 설치하거나 PHP 파일을 수정하지 않고 할 수 있는 간단한 방법입니다.

검색 form 코드 알아내기

메뉴에 검색폼을 삽입하기 위해서 워드프레스의 검색창을 구성하는 <form> 태그를 알아내야 합니다.

대부분 웹브라우저에는 HTML 요소 검사 기능이 있습니다. 크롬 브라우저를 기준으로 자신의 테마에서 검색 영역을 마우스 우클릭하고 검사(N)를 누릅니다.

wordpress-searchbox-to-menu-1

그 중에서 <form> 태그 영역을 마우스 우클릭하고 Edit as HTML을 누릅니다.

wordpress-searchbox-to-menu-2

대략 아래와 비슷하게 생긴 코드 블록입니다. 사용중인 테마마다 코드가 다르므로 본인의 코드를 찾아서 사용해야 합니다.

<form role="search" method="get" class="search-form" action="본인 홈페이지 주소"> 
  <label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
  </label>
  <button type="submit" class="search-submit">
    <span class="genericon-search"></span>
    <span class="screen-reader-text">Search</span>
  </button>
</form>

<form> ~ </form> 범위의 코드를 복사합니다.

wordpress-searchbox-to-menu-3


워프 메뉴에 검색 form 코드 삽입

메뉴사용자 정의 링크 → URL 은 주소를 삭제하고 빈 값으로 유지합니다. 링크 텍스트에는 방금 복사한 코드를 붙여넣고, 메뉴에 추가를 클릭합니다.

wordpress-searchbox-to-menu-4

메뉴의 이름 대신에 코드가 삽입된 모습입니다. 메뉴 저장을 눌러서 최종 완료합니다.

혹시 저장이 되지 않을 경우 URL에 숫자 1 등의 아무 숫자를 입력하고 일단 저장을 합니다. 저장이 완료 되면 다시 편집하기를 눌러서 URL을 지우고 다시 저장을 하면 됩니다.

우측 하단의 메뉴 저장을 눌러야 설정이 완료되므로 유의합니다.

wordpress-searchbox-to-menu-5

검색 박스의 디자인은 <input> 태그나 <button> 태그의 클래스와 아이디 등에 선택자나 결합자를 적절히 지정하면 꾸밀 수 있습니다.

내부 참조