단축 코드를 사용하여 WordPress 게시물에 검색 상자를 추가하는 방법(단계별)

게시 됨: 2022-05-03

단축 코드를 사용하여 WordPress 게시물에 검색 상자를 추가하는 방법을 찾고 있습니까?

방문자가 사이트 탐색을 방해하지 않고 새 콘텐츠를 검색할 수 있으므로 편리합니다.

이 문서에서는 코딩 없이 사이트의 모든 게시물에 검색창을 추가하는 방법을 단계별로 보여줍니다.

의 시작하자!

단축 코드를 사용하여 WordPress 게시물에 검색 상자를 추가하는 이유

게시물에 검색 양식을 추가하면 많은 이점이 있습니다.

주로 방문자가 원하는 콘텐츠를 더 빨리 찾고 사용자 경험을 개선할 수 있습니다.

예를 들어 다음과 같이 특정 카테고리로 제한된 사용자 지정 검색 양식을 만들어 관련 게시물에 넣을 수 있습니다.

how to add search box to WordPress post with a shortcode

이렇게 하면 방문자가 올바른 콘텐츠를 더 쉽게 찾을 수 있을 뿐만 아니라 사이트를 더 자세히 탐색할 수 있습니다.

또한 WordPress 사이트 게시물 내에 검색 창을 배치하면 다음을 수행하는 데 도움이 됩니다.

평균 세션 시간을 늘 립니다. 게시물에 검색 양식을 제공하면 방문자가 관심 있는 콘텐츠를 더 많이 찾을 수 있습니다.
검색 엔진에서 더 많은 트래픽을 얻으십시오 . 평균 세션 시간은 Google에서 중요한 순위 요소이므로 높게 유지하면 더 나은 순위를 얻을 수 있습니다.
충성도 높은 청중을 구축하십시오 . 사이트를 탐색할 때 긍정적인 사용자 환경을 경험한 만족스러운 방문자는 다시 방문할 가능성이 더 큽니다.

이제 단축 코드를 사용하여 게시물에 검색 창을 추가할 때의 이점이 무엇인지 알았으므로 이를 수행하는 방법을 살펴보겠습니다.

단축 코드를 사용하여 WordPress 게시물에 검색 상자를 추가하는 방법

플러그인을 사용하는 것은 단축 코드를 사용하여 사이트의 게시물에 검색창을 추가하는 가장 쉬운 방법입니다. 이와 관련하여 어떤 플러그인도 SearchWP를 능가하지 않습니다.

SearchWP logo

왜요? SearchWP는 모든 요구 사항을 충족할 수 있는 시장에서 가장 포괄적인 솔루션을 제공하기 때문입니다.

단축 코드가 있는 검색 상자를 추가하는 것 외에도 이를 사용하여 라이브 모드에서 검색 결과를 표시하고 현장 검색 활동을 추적하는 등의 작업을 수행할 수 있습니다.

SearchWP는 다음을 지원하여 현장 검색을 향상시킵니다.

여러 검색 엔진을 추가합니다 . 사이트에 사용자 정의 검색 필드를 추가하고 싶으십니까? 설정이 다른 여러 검색 엔진을 만들고 특정 검색 필드에 연결할 수 있습니다.
영향 검색 결과 순서 . 사이트의 현재 검색 결과 순서가 마음에 들지 않습니까? SearchWP를 사용하면 원하는 방식으로 사용자 지정할 수 있습니다.
검색에서 페이지를 제외합니다 . 검색 결과에서 원치 않는 페이지를 제외하는 방법을 찾고 계십니까? SearchWP를 사용하면 코딩 없이 몇 번의 클릭으로 이를 수행할 수 있습니다.
사용자 정의 필드를 검색 가능하게 만드십시오 . 사용자 정의 필드에 귀중한 게시물 데이터를 저장하시겠습니까? SearchWP를 사용하면 검색을 수행할 때 WordPress가 이를 고려하도록 할 수 있습니다.

30,000개 이상의 웹사이트에서 이미 이 플러그인을 사용하여 방문자에게 가장 관련성 높은 검색 결과를 제공하고 있습니다.

이를 통해 SearchWP를 사용하여 단축 코드로 게시물에 검색 상자를 추가하는 방법을 살펴보겠습니다.

1단계: SearchWP 플러그인 설치 및 활성화

첫 번째 단계는 자신의 SearchWP 사본을 얻는 것입니다.

완료되면 SearchWP 계정에 로그인하고 다운로드 탭으로 이동합니다.

go to the Downloads tab

그런 다음 Download SearchWP 버튼을 눌러 플러그인 ZIP 파일을 컴퓨터에 다운로드하기 시작합니다.

press Download SearchWP

파일을 다운로드한 후 동일한 탭에서 SearchWP 라이선스 키를 복사합니다. 플러그인을 활성화하려면 추가로 필요합니다.

copy your SearchWP license key

다음 단계는 SearchWP 플러그인의 ZIP 파일을 사이트에 업로드하는 것입니다.

이를 수행하는 방법에 대한 복습이 필요하십니까? WordPress 플러그인을 설치하는 방법에 대한 단계별 자습서를 따르십시오.

플러그인을 설치한 후 WordPress 대시보드로 이동하여 SearchWP 버튼 위에 마우스를 놓고 라이선스 활성화 를 클릭합니다.

press Activate License

그런 다음 라이선스 키를 라이선스 필드에 붙여넣고 활성화 를 누릅니다.

click Activate

라이선스를 활성화한 후 다음 단계는 Shortcodes Extension을 설치하는 것입니다.

2단계: Shortcodes Extension 설치 및 활성화

이 확장 프로그램을 사용하면 짧은 코드를 사용하여 게시물이나 페이지의 모든 위치에 검색 상자를 배치할 수 있습니다.

설치하려면 WordPress 대시보드 왼쪽에 있는 SearchWP 아래의 확장 탭으로 이동합니다.

navigate to the Extensions tab

여기에서 많은 유용한 SearchWP 확장을 찾을 수 있습니다. 플러그인을 설치하면 플러그인의 기능을 더욱 확장할 수 있습니다.

click Install

Shortcodes 확장이 보일 때까지 페이지를 아래로 스크롤하고 설치 를 클릭하여 사이트에 추가하십시오.

click Install

SearchWP 플러그인과 Shortcodes 확장을 설치하고 활성화한 후 다음 단계는 게시물 중 하나에 검색 상자를 추가하는 것입니다.

3단계: 단축 코드를 사용하여 게시물에 검색 상자 추가

시작하려면 WordPress 대시보드에서 게시물 탭으로 이동합니다.

go to Posts

그런 다음 검색 상자를 추가하려는 게시물을 클릭합니다.

click on a post

게시물 편집기에서 검색 상자를 추가하려는 게시물의 정확한 지점을 선택하고 그 옆에 있는 더하기 버튼을 클릭합니다.

click Plus

그런 다음 팝업 창에서 사용자 정의 HTML 블록을 찾아 클릭하여 게시물에 추가합니다.

add a custom HTML block

다음 단계는 다음 코드를 복사하여 추가한 사용자 정의 HTML 블록에 붙여넣는 것입니다.


[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
   
&lt;div class="search-results-wrapper"&gt;
 [searchwp_search_results engine="default" var="searchvar" posts_per_page=4]
  &lt;h2&gt;[searchwp_search_result_link direct="true"]&lt;/h2&gt;
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
&lt;/div&gt;
   
&lt;div class="no-search-results-found"&gt;
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
&lt;/div&gt;
   
&lt;div class="search-results-pagination"&gt;
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
&lt;/div&gt;

이 코드는 게시물의 위치에 검색창을 추가합니다.

또한 페이지 매김 링크를 표시하고 결과가 없으면 "검색 결과를 찾을 수 없음" 메시지를 표시합니다.

코드를 추가한 후 오른쪽 상단 모서리에 있는 업데이트 버튼을 클릭하여 변경 사항을 저장합니다.

press Update