WordPress의 쉬운 검색 자동 제안 - 자습서
게시 됨: 2022-04-10WordPress에서 autosuggest로 검색 창을 만드는 것은 놀랍도록 쉽고 빠르며 무료입니다. 다음은 이를 수행하는 방법에 대한 자습서입니다.
왜 시간을 내어 WordPress에 자동 검색을 추가해야 합니까? 우선 시간을 절약할 수 있습니다. 귀하의 블로그 방문자는 귀하의 사이트에서 편안하게 원하는 정보에 쉽게 액세스할 수 있도록 하여 삶을 더 쉽게 만들어 주기 때문에 블로그 방문자가 더 좋아할 것입니다. Google 및 기타 정보 지향 검색 도구가 이러한 유형의 기능을 사용하는 데는 이유가 있습니다.
참고: WordPress 내의 자동 검색은 " 라이브 아약스 검색 "이라고도 합니다. 또한 WooCommerce는 WP와 동일한 데이터베이스를 사용하고 제품은 단순히 사용자 정의 게시물 유형이기 때문에 이 튜토리얼은 인기 있는 전자 상거래 플러그인에서도 작동합니다.
필요한 것
코드 스니펫 관리자, 복사 및 붙여넣기 기능, 라이브 검색 플러그인(리포지토리에서 무료)이 필요합니다.
다음 사항에 유의해야 합니다. <?php get_search_form() ?> 를 사용하는 모든 양식은 이 솔루션과 자동으로 작동하며 다음 두 단계가 필요하지 않습니다. 해당 경로를 선택한 경우 이 섹션으로 건너뛰십시오.
그러나 많은 테마, 페이지 빌더 및 기타 도구의 경우에는 그렇지 않습니다. Elementor와 Oxygen은 WordPress에서 제공하는 이 내장 형식을 사용하지 않습니다. 따라서 Elementor, Oxygen, 대부분의 기타 페이지 빌더 및 여러 테마에서 자동 완성 기능이 있는 검색 창을 얻으려면 아래에 설명된 단계를 따르세요.
위의 그림과 같이 CSS 없이 PHP를 통해 추가하더라도 스타일이 지정되지 않은 검색 양식이 남게 됩니다. 그러나 - 테마 파일/템플릿에 액세스할 수 있는 경우 사이트에서 검색 양식을 얻을 수 있는 실행 가능한 방법 입니다. 이것은 표준 WordPress 마크업을 사용하므로 아래 CSS를 조정할 수 있습니다.
스타일과 클래스를 편집하고, 특수 요소를 추가하고, 사용자를 사용자 지정 검색 끝점으로 보내는 등의 작업을 수행할 수 있으므로 다음 방법을 선호합니다. 이 방법은 처음부터 구축하는 것입니다.
PHP
먼저 이 검색 양식을 작성해 보겠습니다. 추가 입력, CSS 클래스, 자리 표시자 등을 추가할 수 있습니다. 코드를 있는 그대로 유지하면 연결된 CSS가 HTML과 함께 작동합니다. 웹 사이트를 만드는 방법에 따라 자동 완성 검색 표시줄이 끝나거나 경로 2로 이동하려는 템플릿의 실제 구조에 이것을 간단히 붙여넣을 수 있습니다.
Route 2는 아마도 대부분의 사이트 소유자가 사용할 것입니다. 이 원시 HTML 및 PHP를 사용하는 대신 WordPress와 훨씬 더 호환되도록 하는 단축 코드로 변환할 것입니다. 이런 식으로 구텐베르크, 원하는 페이지 빌더 등에 붙여넣을 수 있습니다. 이를 수행하는 몇 가지 방법이 있습니다. 간편하지만 유료인 방법과 더 어렵지만 더 쉬운 방법을 자세히 알려드리겠습니다.
유료 방법(쉬움)
WordPress 웹사이트에서 코드를 쉽게 관리할 수 있게 해주는 프리미엄 WordPress 플러그인 인 Scripts Orginizer를 선택 하십시오(검토). 설치 후 사이드바 관리 메뉴에 있는 Scripts Organizer -> 가져오기로 이동합니다.
이 파일(아래에 언급된 모든 항목의 내보내기)을 다운로드하고 가져오고 단축 코드 가져오기로 건너뜁니다.
사용자 지정 CSS 섹션에서 SCORG 부분 섹션으로 건너뛰고 해당 JSON을 다운로드하고 가져오고 라이브 검색 플러그인을 설치하고 실행합니다.
수동 단계를 따를 수도 있습니다. 시작하려면 새 항목을 만드십시오.
이제 다음을 실행하십시오.
- 제목을 지정
- 코드 블록 스위치 활성화: 켜기
- 스크립트 위치: 단축 코드
- 위의 PHP/HTML 코드를 복사/붙여넣기합니다.
- 다른 모든 설정을 기본값으로 유지하고 게시를 클릭합니다.
작업이 끝나면 이런 모습이어야 합니다 ️.
코드 편집기의 왼쪽 하단 또는 코드 조각 목록 페이지에 있는 스크립트 항목 내에 표시될 단축 코드를 가져옵니다.
이 단축 코드를 Gutenberg, TINYMCE, Elementor Shortcode Widget 또는 기타 단축 코드 관련 방법으로 어디에나 삽입하십시오.
구텐베르크 단축 코드 요소 
Elementor 단축 코드 위젯
이제 2단계로 이동하여 사이트에 CSS를 추가합니다.
Free Way (약간 더 세게)
무료 코드 조각 플러그인을 설치합니다. 다음 코드 조각을 다운로드하고 웹사이트로 가져옵니다.
이 파일은 고급 스크립트(기본적으로 더 쉬운 고급 코드 조각 버전) 및 스크립트 구성기로 가져올 수도 있습니다.
그런 다음 프런트엔드에서 다음 단축 코드를 사용하여 검색을 추가합니다.
검색을 추가하는 방법에 관계없이 이 섹션의 기본 HTML 및 PHP를 사용하면 다음 섹션의 CSS가 멋진 스타일을 제공합니다.
CSS
구조와 클래스를 그대로 유지한다면 이 사용자 정의 CSS를 웹사이트에 추가하기만 하면 자동 완성 기능이 있는 스타일이 좋은 검색 양식을 얻을 수 있습니다.
참고: 이 코드는 검색 표시줄을 삽입하는 <?php get_search_form() ?> 메서드와 호환되지 않습니다. 그러나 테마에 따라 이러한 방식으로 검색 양식을 삽입하면 테마의 스타일이 상속됩니다.
이 CSS는 모양 -> 사용자 정의 -> 추가 CSS를 통해 또는 SCORG를 사용하여 페이지 빌더 유틸리티에 추가할 수 있습니다.
SCORG를 제안합니다. 새 CSS 부분을 추가하고 코드를 붙여넣고 게시하거나 이 파일을 가져옵니다. 이전 단계에서 생성한 Shortcode Snippet으로 이동하여 "SCSS Partials Manager" 섹션으로 이동하여 show 를 선택하고 해당 부분의 제목을 검색하여 선택합니다. 업데이트합니다. 이제 단축 코드를 배치하는 곳마다 CSS도 로드됩니다. 전역이 아닌 단축 코드가 있는 위치에만 로드되므로 성능에 좋습니다.
이제 매직 소스만 있으면 됩니다.
매직 소스(SearchWP 라이브 Ajax 검색)
이것은 SearchWP 플러그인 제품군 뒤에 있는 팀에서 만든 놀라운 플러그인입니다. 무료이며 WordPress 저장소에 있습니다. 복잡한 코드 구조 대신에 이것을 설치하고 1분 이내에 실시간 검색을 시작하고 실행할 수 있습니다.
설치가 완료되면 단축 코드, 원시 코드 또는 기본 WordPress PHP 삽입을 사용하는 것으로 삽입한 검색 양식을 클릭하면 다음 동작이 표시되어야 합니다.
그게 다야, 당신은 끝났어! AJAX 기술을 사용하여 사용자 검색을 자동 완성하는 검색 양식을 WordPress 웹사이트에서 즐기십시오.
WordPress에서 이 실시간 검색 확장
SearchWP Live Ajax Search는 이름에서 알 수 있듯이 Live Ajax Search를 추가할 수 있는 무료 플러그인입니다. SearchWP 및 관련 확장의 프리미엄 컬렉션을 사용하거나 사용하지 않고 작동합니다. SearchWP를 사용하지 않는 경우 표준 WP 검색 엔진을 사용합니다.
표준 WordPress 검색은 게시물 제목을 조사한 다음 콘텐츠에서 관련성을 기준으로 정렬합니다(과거에는 그렇지 않았습니다!). 그러나 이것은 여전히 Elementor이며 더 나은 옵션이 있습니다. 사실, 우리는 여기에서 읽을 수 있는 더 나은 대안에 대해 논의하는 또 다른 기사를 썼습니다. WordPress에 대한 더 나은 검색 솔루션
그러나 Live Search는 Search WP에서 만들어지기 때문에 설치된 경우 해당 엔진을 자동으로 사용합니다. 검색 WP는 키워드 형태소 분석, 보다 정확한 일치, 문서 인덱싱, WooCommerce 지원, 알고리즘 사용자 정의 등을 포함하므로 우수합니다. 라이브 검색을 구축하고 프리미엄 플러그인의 다른 기능을 사용하여 더 나은 검색 결과를 제공하는 것이 좋습니다.
SearchWP의 대안을 찾고 있다면 Ivory Search는 유사한 기능 과 LTD를 제공하는 저렴한 플러그인입니다! 이 라이브 검색(WP 검색 자동 완성) 플러그인은 Ivory Search와 함께 즉시 작동해야 합니다. 다른 검색 엔진도 사용할 수 있습니다. 문서에 따르면 해야 할 일은 다음과 같습니다.
다음 속성을
FAQ 나열input양식에 추가하십시오.data-swpengine="supplemental"'supplemental'을 원하는 검색 엔진 이름으로 바꿉니다.
산소로 더욱 쉽게
우리가 Oxygen Builder를 사랑하는 것은 비밀이 아니므로 이 도구를 사용하여 AJAX 라이브 검색(자동 완성)을 추가하는 훨씬 더 쉬운 방법이 있습니다.
참고: 이 튜토리얼과 플러그인 은 이전 섹션에서 언급했듯이 검색 양식을 삽입하는 표준 PHP 방법을 사용하지 않고 필요한 데이터 속성을 포함하지 않기 때문에 Oxygen Search Form 위젯과 함께 작동 하지 않습니다.
쉬운 단계:
- 검색 양식을 원하는 곳에 코드 블록을 추가하고 아래에 있는 PHP에 붙여넣습니다(또는 코드 블록을 자동으로 만드는 Hydrogen 단축 코드에 붙여넣기)..
- 아래에 있는 CSS를 Oxygen Global CSS에 추가하고 원하는 대로 변경합니다(주로 색상).
- 여기 리포지토리에서 무료로 라이브 검색 플러그인을 설치하고 활성화하십시오.
- 라이브 검색의 영광을 만끽하십시오.
Page Builder를 사용하여 템플릿과 페이지에 PHP를 직접 배치할 수 있기 때문에 다음 PHP를 코드 블록에 붙여넣고 전역 설정을 통해 CSS를 추가하고 밤이라고 부를 수 있습니다. 라이브 검색 플러그인, 여기에서 찾을 수 있음).
다음 Hydrogen Shortcodes를 복사/붙여넣기할 수도 있습니다(Hydrogen Pack(여기에서 검토)이 있는 경우).
복사를 클릭하고 Hydrogen을 설치한 다음 페이지에 붙여넣기만 하면 됩니다. CSS는 코드 블록에 포함됩니다.
마지막으로 CSS(위에서 가져옴)를 사용합니다.
Oxygen의 글로벌 CSS를 통해 이 CSS를 삽입하는 것이 좋습니다.
최종 결과는 다음과 같습니다.
이 부분을 재사용하고 싶다면 단순히 재사용 가능한 부분으로 만들 수도 있습니다. Live Search 플러그인이 설치되어 있는 한 방문자를 위한 멋진 AJAX 검색 막대를 사용하는 것이 좋습니다.
<?php get_search_form() ?>
또는 고급 사용자 정의가 필요하지 않은 경우 위의 코드를 사용하십시오(WP의 핵심 검색보다 더 나은 검색 솔루션을 포함하되 이에 국한되지 않음). 물론, 이 페이지 빌더에서 단축 코드를 사용할 수 있기 때문에 웹사이트의 프런트 엔드에서 사용할 단축 코드를 만드는 과정을 안내하는 이 튜토리얼의 상반부를 따라갈 수도 있습니다.
결론
2022년에는 사용자에게 뛰어난 경험과 원하는 콘텐츠에 액세스하는 데 필요한 도구를 제공하는 것이 그 어느 때보다 중요합니다. 이 기사에서는 15분 이내에 웹사이트에 WordPress 라이브 Ajax 검색을 설치하는 몇 가지 방법을 제시했습니다.
여기에 설명된 여러 방법이 있으므로 테마 템플릿 파일에서 사용하도록 선택하고 페이지 빌더와 호환되는 단축 코드를 생성하고 더 많은 방법을 통합할 수 있습니다. 라이브 검색 기능을 구현하는 데 사용되는 플러그인은 완전 무료이며 잘 설계되었습니다.
질문이 있으신가요? 아래 댓글 섹션에 자유롭게 남겨주세요.