Gatsby와 함께 헤드리스 워드 프레스에서 기본 검색 대 Jetpack Instant Search

개츠비와 함께 헤드리스 워드 프레스를 탐험 할 준비가 되셨습니까? 이 기사는 WordPress의 기본 검색과 JetPack Instant Search를 비교하여 검색 기능을 탐구합니다. 더 부드러운 WordPress 통합을 위해 gatsby-source-wordpress 플러그인 (2021 년 3 월 Gatsby 3에서 소개)과 WPGRAPHQL을 활용하는 Gatsby 사이트를 구축 할 것입니다.

이 탐사는 WordPress가 구동되는 Gatsby 사이트를 만드는 개발자를위한 시장 인 Gatsby WP 테마를 구축 한 경험으로 알려집니다. WordPress의 내장 검색을 활용하고 JetPack Instant 검색을 구현하는 두 가지 검색 방법에 중점을 둡니다.

무대 설정

gatsby-starter-wordpress-blog 스타터를 사용하여 Gatsby 사이트를 만들어 봅시다.

 Gatsby New Gatsby-wordpress-w-search https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

이 스타터는 기본 게시물 및 블로그 페이지 라우팅을 제공합니다. 이 예에서는 검색 결과에서 페이지를 제외합니다. 우리는 스타터의 WordPress 데모를 사용할 것입니다. 직접 사용하는 경우 필요한 WordPress 플러그인 : WPGRAPHQL (GraphQL API의 경우) 및 WPGATSBY (Gatsby 별 스키마 수정 및 빌드 최적화)를 기억하십시오. 둘 다 WordPress 플러그인 저장소를 통해 제공됩니다.

아폴로 클라이언트 통합

Gatsby는 일반적으로 데이터 가져 오기에 페이지 쿼리 또는 useStaticQuery 사용합니다. 그러나 사용자가 시작한 검색에는 동적 솔루션이 필요합니다. Apollo 클라이언트를 사용하여 WPGRAPHQL API와 직접 상호 작용하여 데이터 요청 처리 및 캐싱을합니다.

아폴로 클라이언트 설치 :

 원사 Add @Apollo/Client Cross-Fetch

gatsby-browser.js 에서 Gatsby 's wrapRootElement API를 사용하여 ApolloProvider 로 응용 프로그램을 감싸십시오.

 // Gatsby-Browser.js
// ... (가져 오기) ...

const 클라이언트 = 새로운 apolloclient ({{
  // ... (링크 및 캐시 구성) ...
  uri : "https://wpgatsbydemo.wpengine.com/graphql", // GraphQL Endpoint로 교체하십시오
  가져 오기 : 크로스 페치,
});

내보내기 const wraprootelement = ({element}) => (
  <apolloprovider client="{client}">{요소}</apolloprovider>
);

검색 구성 요소 구축

필요한 파일 생성 :

 src/components/search.js src/components/search-form.js src/components/search-results.js src/css/search.css를 터치하십시오

Search 구성 요소는 검색어 상태를 관리하고 양식 및 결과를 렌더링합니다.

 // src/components/search.js
// ... (가져 오기) ...

const search = () => {
  const [searchterm, setsearchterm] = usestate ( "");
  반품 (
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {searchterm<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  );
};

SearchForm 간단한 형태입니다.

 // src/components/search-form.js
// ... (가져 오기) ...

const searchform = ({setsearchterm}) => {
  // ... (state and handlesubmit 함수) ...
  반품 (
    

찾다: setValue (e.target.value)} /> 찾다

); };

SearchResults Apollo Client의 useQuery Hook를 사용합니다.

 // src/components/search-results.js
// ... (가져 오기) ...

const get_results = gql`
  쿼리 ($ searchterm : String) {
    게시물 (여기서 : {search : $ searchterm}) {
      가장자리 {
        노드 {
          ID
          우리
          제목
          발췌
        }
      }
    }
  }
`;;

const searchResults = ({searchterm}) => {
  const {data, loading, error} = ac
  // ... (로드, 오류 및 데이터 처리) ...
};

Search 구성 요소를 레이아웃에 추가하거나 (또는 ​​영구 디스플레이에 wrapPageElement 사용하십시오). 이 기사의 나머지 부분에는 Pagination, Persistent Search, Post 및 Page 처리 및 JetPack Instant 검색을 사용하여 향상된 검색 기능에 대해 자세히 설명합니다. 제공된 코드 스 니펫은 Gatsby 사이트 내에 강력한 검색 기능을 구축하기위한 기초를 제공합니다.

위 내용은 Gatsby와 함께 헤드리스 워드 프레스에서 기본 검색 대 Jetpack Instant Search의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!