[워드프레스] MH MAGAZINE의 메뉴 내비게이션에 검색 폼 추가하기

MH MAGAZINE은 매거진 테마로서 무료 및 유료로 제공되고 있습니다. 보통 무료로 제공되는 경우 2% 부족한 느낌이 들지만 MH Magazine은 괜찮은 완성도를 보여주는 것 같습니다. Lite 기능으로 부족함을 느낀다면 유료 버전도 고려해볼 수 있습니다. 현재 이 블로그는 Pluto라는 포트폴리오 테마를 사용하고 있지만, 컨텐츠 위주의 블로그이기 때문에 매거진 테마로 변경할까도 고려하고 있습니다. MH Magazine이나 (Divi로 유명한) Elegant Themes의 Extra 테마를 현재 생각 중에 있습니다. 그리고 themeforest의 Newspaper라는 테마도 괜찮은 레이아웃을 보여주네요(Happist 사이트에서 이 테마를 사용한다고 하네요).

MH-Magazine의 메뉴 내비게이션에 검색 폼을 다는 것과 관련하여 요청하신 분이 계셔서 간단히 정리해보았습니다. 워드프레스 메뉴 내비게이션에 검색창을 추가하는 방법은 기본적으로 이 글에 설명된 코드를 사용하면 됩니다. 그리고 WordPress 문서 중 "get_search_form"에 대한 글도 참고할 수 있습니다.

만약 토글 형식으로 검색 폼이 작동하기를 원하는 경우 다음 글을 참고해볼 수 있습니다.

How to Add a Search Toggle Effect in WordPress(워드프레스에서 검색 토글 효과를 추가하는 방법)

MH Magazine 테마의 메뉴 내비게이션에 검색 폼 추가하기

MH-Magazine에서 메뉴에 검색 폼을 추가하려는 경우 먼저 차일드 테마를 만들도록 합니다. 아직 차일드 테마를 만들지 않았다면 "원클릭으로 간편하게 차일드 테마 만들기" 글을 참고로 차일드 테마(하위 테마, 자식 테마)를 만들도록 합니다.

이제 차일드 테마 폴더 안에 있는 함수 파일(functions.php)에 다음 코드를 추가하도록 합니다.

/* 메뉴 내비게이션에 검색 폼 추가하기 */
function add_search_to_wp_menu ( $items, $args ) {
if( 'main_nav' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="검색..." name="s" id="s" onfocus="if (this.value == \'검색...\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'검색...\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" style="display:none;" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

위에서 "검색..." 이 부분은 적절히 변경할 수 있습니다. 만약 다른 테마에 적용하려는 경우에는 main_nav를 해당 테마의 메뉴 내비게이션 위치(theme_location) 이름으로 변경해주도록 합니다(예: primary).

이제 차일드 테마 폴더 내의 스타일시트 파일(style.css)에 다음 코드를 추가하도록 합니다.

/* 검색 폼 서식  */

@media screen and (min-width: 767px) {
li.menu-item.menu-item-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
padding-right: 20px;
}

input#s {
width: 100%;
}

}

input#s {
background-image: url('http://www.example.com/images/search-icon.png');
background-repeat: no-repeat;
background-position: 4px; /*Position*/

padding-left: 30px;
}

위의 코드를 기초로 하여 적절히 수정하도록 합니다. search-icon.png의 경로는 검색 아이콘 파일의 경로로 바꾸어줍니다.

이제 사이트를 확인해보면 다음 그림과 같이 메뉴 내비게이션에 검색 폼이 추가되고 제대로 작동합니다. 다음은 PC에서 표시되는 모양입니다.