워드프레스 메뉴에 검색 폼 추가하기
워드프레스 메뉴 내비게이션에 검색 입력란을 추가하는 방법입니다. 다음 함수를 테마의 함수 파일에 추가하도록 합니다.
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/
이 글의 코드를 실제 테마에 활용하여 적용하는 간단한 방법을 https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-mh-magazine%EC%9D%98-%EB%A9%94%EB%89%B4-%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98%EC%97%90-%EA%B2%80%EC%83%89-%ED%8F%BC-%EC%B6%94%EA%B0%80/ 글에서 설명했으니 참고하시기 바랍니다.