Carian Asli vs Jetpack Carian Segera di WordPress tanpa kepala dengan Gatsby

Bersedia untuk meneroka WordPress tanpa kepala dengan Gatsby? Artikel ini menyelidiki kefungsian carian, membandingkan carian asli WordPress dengan carian segera jetpack. Kami akan membina tapak Gatsby yang memanfaatkan plugin gatsby-source-wordpress (diperkenalkan di Gatsby 3, Mac 2021) dan WPGraphql untuk integrasi WordPress yang lebih lancar.

Eksplorasi ini dimaklumkan oleh pengalaman membina tema Gatsby WP -pasaran untuk pemaju yang membuat laman web Gatsby yang dikuasakan oleh WordPress. Kami akan memberi tumpuan kepada dua kaedah carian: menggunakan carian terbina dalam WordPress dan melaksanakan carian segera jetpack.

Menetapkan panggung

Mari buat laman web Gatsby menggunakan gatsby-starter-wordpress-blog :

 gatsby gatsby-wordpress-wordpress-wordpress https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

Starter ini menyediakan laluan asas dan penghalaan halaman blog. Untuk contoh kami, kami akan mengecualikan halaman dari hasil carian. Kami akan menggunakan demo WordPress starter; Jika menggunakan anda sendiri, ingat plugin WordPress yang diperlukan: WPGraphQL (untuk API GraphQL) dan WPGATSBY (untuk pengubahsuaian skema khusus Gatsby dan membina pengoptimuman). Kedua -duanya boleh didapati melalui repositori plugin WordPress.

Mengintegrasikan pelanggan Apollo

Gatsby biasanya menggunakan pertanyaan halaman atau useStaticQuery untuk pengambilan data. Walau bagaimanapun, untuk carian yang dimulakan oleh pengguna, kami memerlukan penyelesaian dinamik. Kami akan menggunakan klien Apollo untuk berinteraksi secara langsung dengan API WPGraphQL, mengendalikan permintaan data dan caching.

Pasang pelanggan Apollo:

 Benang Tambah @Apollo/Pelanggan Cross-Fetch

Balut permohonan dengan ApolloProvider menggunakan API wrapRootElement Gatsby di gatsby-browser.js :

 // gatsby-browser.js
// ... (import) ...

const client = baru ApolloClient ({
  // ... (konfigurasi pautan dan cache) ...
  Uri: "https://wpgatsbydemo.wpengine.com/graphql", // Ganti dengan titik akhir graphql anda
  Ambil: Cross-Fetch,
});

Eksport const wraprootelement = ({element}) => (
  <apolloprovider client="{client}">{elemen}</apolloprovider>
);

Membina Komponen Carian

Buat fail yang diperlukan:

 sentuh src/komponen/carian.js src/komponen/carian-form.js src/komponen/carian results.js src/css/carian.css

Komponen Search menguruskan keadaan istilah carian dan menjadikan borang dan hasilnya:

 // src/komponen/search.js
// ... (import) ...

const carian = () => {
  const [searchterm, setSearchterm] = useState ("");
  kembali (
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {Searchterm &&<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  );
};

SearchForm adalah bentuk yang mudah:

 // src/komponen/carian-form.js
// ... (import) ...

const searchform = ({setSearchterm}) => {
  // ... (fungsi negeri dan handlesubmit) ...
  kembali (
    

Cari: setValue (e.target.value)} /> Cari

); };

SearchResults menggunakan cangkuk useQuery pelanggan Apollo:

 // src/komponen/carian-results.js
// ... (import) ...

const get_results = gql`
  pertanyaan ($ Searchterm: String) {
    Catatan (di mana: {carian: $ Searchterm}) {
      tepi {
        nod {
          id
          uri
          tajuk
          petikan
        }
      }
    }
  }
`;

const SearchResults = ({Searchterm}) => {
  const {data, loading, error} = useQuery (get_results, {variables: {searchterm}});
  // ... (memuatkan, ralat, dan pengendalian data) ...
};

Tambah komponen Search ke susun atur anda (atau gunakan wrapPageElement dengan paparan berterusan). Selebihnya artikel perincian penomboran, carian berterusan, mengendalikan jawatan dan halaman, dan menggunakan carian segera jetpack untuk keupayaan carian yang dipertingkatkan. Coretan kod yang disediakan menawarkan asas untuk membina fungsi carian yang mantap di laman Gatsby anda.

Atas ialah kandungan terperinci Carian Asli vs Jetpack Carian Segera di WordPress tanpa kepala dengan Gatsby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!