워드프레스 메뉴에 검색 폼 추가하기

워드프레스 메뉴 내비게이션에 검색  입력란을 추가하는 방법입니다. 다음 함수를 테마의 함수 파일에 추가하도록 합니다.

function add_search_to_wp_menu ( $items, $args ) {
if( 'primary' === $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" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
// Source: http://diythemes.com/

메뉴 위치는 'primary"인 경우이며 이외의 경우 적절히 바꾸도록 합니다. 그리고 다음과 같은 CSS 파일을 스타일시트 파일에 추가하도록 합니다.

.custom .menu-item.menu-item-search { float:right; width:260px; }
.custom .menu-search-form { float:right; padding-top:3px; width:250px; }
.custom form.menu-search-form { width:auto; }
.custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
.custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

실제로 custom 클래스는 적절히 변경합니다. 실제로 적용해주면 테마에 따라 잘 안 되는 경우도 있습니다. 그럴 경우 CSS로 레이아웃를 조정해주도록 합니다.

위에서 설명한 방법 이외에도 소스 파일(header.php)에 직접 검색 상자 관련 PHP 소스를 추가하고 CSS로 레이아웃을 잡아주는 경우도 생각해볼 수 있습니다. 워드프레스에 구글 번역기를 달자를 참고하시기 바랍니다. 또는 검색 폼을 숏코드로 만들어 삽입하는 방법도 가능합니다(워드프레스 검색 폼을 숏코드로 삽입하기 참고).

숏코드를 사용할 경우 나중에 수정할 때 함수에서 곧바로 가능하기 때문에 나름대로 장점이 있을 것 같습니다. 그냥 검색 폼 코드를 추가할 수도 있습니다. 기본적인 코드는 다음과 같습니다.

<?php get_search_form(); ?>

이것을 조금 응용하여 다음과 같은 코드를 추가할 수도 있습니다.

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<fieldset>
<label for="s" class="screen-reader-text">Search for:</label>
<input type="search" id="s" name="s" placeholder="Enter keywords" required />
<input type="image" id="searchsubmit" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/searchicon.png" />
</fieldset>
</form>
// Source: http://handcoded.ca/

 

 

 

 


1개 댓글

댓글 남기기

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