네비게이션 바에 버튼은 있지만 아무 기능도 하지 않던 검색 버든에 기능을 붙입니다.

검색 폼의 기본 형태

<?php get_search_form(); ?>

검색폼을 불러오는 워드프레스의 내부함수 입니다. 테마의 최상위 디렉토리 안에 searchform.php가 없다면 기본 형태의 검색폼을 불러오게 되는데요. 워드프레스를 뜯어보니 html5 옵션을 준 상태에서의 검색 폼은 이렇게 생겼습니다.

<form role="search" method="get" class="search-form" action="">
  <label>
    <span class="screen-reader-text"><?php  _ex( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="" value="" name="s" />
  </label>
  <input type="submit" class="search-submit" value="" />
</form>

기본 검색폼을 응용하여 searchform.php를 작성하였습니다.

<form role="search" method="get" class="search-form" action="">
  <ul>
    <li><i class="material-icons btn search">arrow_back</i></li>
    <li><label>
      <input type="search" class="search-field" placeholder="" value="" name="s" />
    </label></li>
    <li class="right"><input type="submit" class="search-submit" value="search"/></li>
  </ul>
</form>

스타일

태블릿 이상의 기기와 모바일의 구성이 다릅니다. 같은 요소를 가지고 다르게 구성하다보니 스타일이 굉장히 길어지는데요. 본문을 아래의 링크로 대신하겠습니다.

스크린샷의 요소들은 CodePen을 통해 테스트해 볼 수 있습니다.