워드프레스 검색 폼을 숏코드로 삽입하기

워드프레스 검색 폼을 숏코드로 삽입하려면 add_shortcode를 통해 숏코드 함수를 만들어주면 됩니다.

function wpbsearchform( $form ) {

$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';

return $form;
}

add_shortcode('wpbsearch', 'wpbsearchform');

// Source: http://www.wpbeginner.com

위의 함수를 함수 파일에 추가하도록 합니다. 그리고 다음 쇼코드를 원하는 곳에 추가하시면 됩니다.

{wpbsearch}

* 위에서 {...}는 [...]으로 대체해 주시기 바랍니다.

위의 숏코드 함수에서 class 요소는 현재 사용하는 테마에 따라 적절히 추가하셔도 되고, 아니면 기존 CSS 스타일을 새롭게 추가하는 검색 폼에 적용하셔도 됩니다.

참고: add_shortcode

add_shortcode에 대한 자세한 내용은 여기를 참고하시기 바랍니다.

참고로 다음과 같은 add_shortcode 함수를 함수 파일에 추가하면 {high}...{/high}를 사용하여 원하는 어구를 형광펜으로 하이라이트할 수 있습니다({...}는 마찬가지로 [...]으로 변경).

add_shortcode('high', 'highlighter_span_shortcode');
function highlighter_span_shortcode($atts, $content = null) {
extract(shortcode_atts(array('color' => '', 'bg' => 'yellow', 'size' => '', 'top' => '', 'right' => '', 'bottom' => '', 'left' => ''), $atts));
$return = '<span style="';
if (!empty($color)) $return .= 'color:'.$color.';';
if (!empty($bg)) $return .= 'background-color:' .$bg.';';
if (!empty($size)) $return .= 'font-size:'.$size.';';
if (!empty($left)) $return .= 'padding-left:'.$left.';';
if (!empty($right)) $return .= 'padding-right:'.$right.';';
if (!empty($top)) $return .= 'padding-top:'.$top.';';
if (!empty($bottom)) $return .= 'padding-bottom:'.$bottom.';';
$return .= '">';
return $return . $content . '</span>';
}

이 숏코드 함수와 wpbsearchform 숏코드 함수를 살펴보면 add_shortcode 함수를 사용하는 기본적인 방법을 이해하실 수 있을 것입니다.