훌륭한 맞춤형 WordPress 검색 양식을 만드는 3가지 방법

게시 됨: 2022-11-23

WordPress는 세계에서 가장 인기 있는 콘텐츠 관리 시스템(CMS)입니다. 강력하고 매우 유연한 도구일 뿐만 아니라 사용하기도 매우 쉽습니다. 웹 디자인이나 코딩 경험이 없는 사람도 WordPress를 사용하여 단 몇 분 만에 웹 사이트를 시작할 수 있습니다.

사용자는 관심 있는 콘텐츠를 검색하기 위해 WordPress 사이트를 방문할 것입니다. 검색 표시줄이 도움이 될 수 있습니다. 사이트에 사이트가 없으면 사람들이 원하는 콘텐츠를 찾기가 어려울 것입니다. 이러한 좌절감으로 인해 사람들은 귀하의 웹사이트를 떠나 다른 곳으로 이동하게 됩니다.

그럴 리가 없어!

이 기사에서는 사용자 정의 WordPress 검색 양식을 웹 사이트에 통합하는 방법을 보여줍니다.

사용자 정의 WordPress 검색 양식이란 무엇입니까?
#1 플러그인 적용
#2 코드 수정
#3 사용자 지정 CSS를 사용하여 검색 양식 및 결과 페이지 스타일 지정

사용자 정의 WordPress 검색 양식이란 무엇입니까?

WordPress에는 이미 기본 검색 기능이 내장되어 있습니다. 그러나 기본 검색 도구는 매우 제한적이며 "스마트"하지 않습니다. 찾고자 하는 콘텐츠를 항상 찾지는 않습니다.

기본 WordPress 검색 기능은 콘텐츠가 많지 않은 신규 또는 소규모 웹 페이지에 적합합니다.

그러나 콘텐츠 데이터베이스가 커짐에 따라 방문자가 웹 사이트를 탐색할 수 있도록 더 나은 검색 도구를 설치하는 것이 중요합니다. 전자 상거래 사이트를 운영하는 경우 좋은 검색 도구가 더욱 중요합니다. 잠재 고객을 자신에게 적합한 제품으로 안내하는 데 도움이 됩니다.

검색 도구가 특정 순서로 결과를 표시하도록 할 수도 있습니다. 예를 들어 가장 인기 있는 기사나 항목이 먼저 표시됩니다. 기본 검색 도구에서는 그렇게 할 수 없습니다. 대신 검색 알고리즘을 수동으로 편집해야 합니다.

마지막으로 맞춤 검색 도구는 웹사이트의 미학이나 브랜드를 반영하도록 양식화할 수 있습니다.

pfo-custom-wordpress-search-form-example

get_search_form 기능이란 무엇입니까?

get_search_form 은 웹사이트에 검색 양식을 표시하는 기능을 말합니다. WordPress 관리자 패널의 모양 > 위젯 탭에서 찾을 수 있습니다.

검색 기능이 필요한 웹 사이트의 검색 양식 위젯 및 기타 페이지를 관리합니다. 이 기능이 없으면 귀하의 웹사이트는 검색 도구가 전혀 없는 것과 같습니다.

WordPress에서 검색 양식을 사용자 정의하는 방법

WordPress에서 검색 양식을 사용자 지정하는 데 사용할 수 있는 다양한 접근 방식이 있습니다. 코딩 기술 수준과 이 작업에 얼마나 많은 시간을 할애할 것인지에 따라 다릅니다.

#1 플러그인 적용

플러그인은 사용자 지정 WordPress 검색 양식을 웹 사이트에서 실행하는 가장 쉽고 빠른 방법입니다. 예를 들어 Ivory Search는 WordPress 검색 도구의 기능을 향상시키기 위해 특별히 제작된 무료 플러그인입니다. 새 검색 양식을 추가 및 편집하고 다양한 유형의 검색을 수행할 수 있습니다.

또한 단축 코드를 사용하면 웹 사이트에서 원하는 위치(머리글, 바닥글, 메뉴 표시줄 등)에 검색 표시줄을 배치할 수 있습니다.

pfo-상아-검색-플러그인

코딩 경험이 많지 않은 경우 적극 권장하는 간단한 도구입니다. 검색 도구를 코딩하는 것만큼 다재다능하지는 않지만 기본적인 사용에는 충분할 것입니다.

#2 코드 수정

WordPress 사이트의 .php 핵심 파일 내에서 처음부터 검색 양식을 작성하는 방법에는 함수를 사용하거나 템플릿을 사용하는 두 가지 방법이 있습니다.

기능으로

add_filter 후크를 사용하여 기본 WordPress 검색 도구를 사용자 지정 검색 도구로 바꿀 수 있습니다. functions.php 파일에서 스택에 다음 코드를 추가합니다.

 함수 custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( '검색:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'.esc_attr__( '검색' ) .'" />
</div>
</form>';
반환 $form;
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

이 코드가 하는 일은 $form 변수 내에 사용자 지정 양식을 저장하는 것입니다. 이 변수는 add_filter 후크 덕분에 기본 WordPress 검색 도구를 대체합니다.

$form 변수 값에서 레이블, 텍스트, ID 및 기타 요소를 편집하여 위의 코드를 추가로 사용자 정의할 수 있습니다.

템플릿 사용

functions.php 파일을 수정할 수 없다면 대안은 검색 양식에 대한 템플릿을 사용하는 것입니다. 사용자 정의 WordPress 검색 양식을 만든 다음 기본 디렉토리에 searchform.php 로 추가하십시오. WordPress는 기본값이 아닌 사용자 정의 검색 양식을 자동으로 사용합니다.

이렇게 하려면 선택한 IDE를 열고 새 파일을 만듭니다. 이름을 "searchform.php" 로 지정합니다. 다음 코드를 편집기에 붙여넣습니다.

 <?php
/* 사용자 정의 검색 양식 */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<사업부 클래스="입력-그룹">
<input type="search" class="form-control border-0" placeholder="검색" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >>
<사업부 클래스="입력-그룹-추가">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</스팬>
</div>
</div>
</form>

위의 코드를 원하는 대로 수정하세요!

#3 사용자 지정 CSS를 사용하여 검색 양식 및 결과 페이지 스타일 지정

이제 사용자 정의 검색 기능을 설정하고 실행했으므로 다음 부분은 스타일을 지정하는 것입니다. 기본 모양은 평범한 Sans Serif 글꼴의 흰색 텍스트 상자로 인해 매우 지루합니다.

이를 변경하려면 CSS 코드 몇 줄을 사용하는 것이 가장 좋습니다.

이 CSS 코드 템플릿은 대부분의 WordPress 테마와 호환됩니다. WordPress 관리자 패널을 통해 복사하여 붙여넣기만 하면 됩니다.

 .searchform {
font-family:arial;
글꼴 크기:16px;
배경:#ace5e3;
색상:#ffffff;
테두리:1px 솔리드 #61c3c0;
패딩:10px;
높이:90px;
폭:600px;
}

.검색 결과 {
font-family:arial;
글꼴 크기:16px;
배경:#ace5e3;
색상:#000000;
테두리:1px 솔리드 #61c3c0;
패딩:10px;
폭:600px;
}

코드 내의 변수를 원하는 대로 수정합니다. 글꼴, 글꼴 크기, 배경색, 테두리 등을 선택할 수 있습니다. 코드에 변경하고 싶지 않은 요소가 있으면 해당 줄을 삭제하면 됩니다.

예를 들어 검색 양식의 글꼴 모음을 변경하지 않으려면 "font-family:arial;" 을 삭제하면 됩니다. 선.

지금 나만의 맞춤 WordPress 검색 양식을 만드세요!

대부분의 사람들은 플러그인으로 생성된 간단한 검색 양식으로 얻을 수 있습니다. 그러나 코딩에 조금 더 능숙하고 고급 기능을 사이트의 검색 양식에 통합하려는 경우 위의 코드 템플릿이 유용할 수 있습니다.

맞춤형 WordPress 검색 양식은 매우 간단한 기능이지만 웹 사이트를 보다 사용자 친화적으로 만드는 데 매우 효과적입니다. 사용자 정의 필드 WordPress 기능에 의한 양식 검색은 더 많은 방문자를 유치하고 단골로 전환하며 전자 상거래 사이트를 운영하는 경우 유료 고객으로 전환하는 데 도움이 될 수 있습니다.

여기에서 스마트 WooCommerce 제품 검색을 추가하는 방법에 대해 자세히 알아볼 수 있습니다.

이 가이드가 도움이 되었기를 바라며 이 가이드를 읽을 때쯤이면 사용자 지정 검색 양식을 이미 준비하고 실행했을 것입니다!