Native Suche gegen Jetpack Sofortsuche in kopfloser WordPress mit Gatsby

Bereit, mit Gatsby kopflosen WordPress zu erkunden? Dieser Artikel befasst sich mit Suchfunktionen und vergleichen die native Suche von WordPress mit Jetpack Instant Search. Wir werden ein Gatsby-Standort erstellen, das das gatsby-source-wordpress Plugin (eingeführt in Gatsby 3, März 2021) und WPGraphql für eine glattere WordPress-Integration nutzt.

Diese Erkundung wird durch den Aufbau von Gatsby -WP -Themen informiert - ein Marktplatz für Entwickler, die von WordPress angetrieben werden. Wir konzentrieren uns auf zwei Suchmethoden: Verwenden von WordPress-integriertem Such und Implementieren von Jetpack-Sofortsuche.

Die Bühne setzen

Erstellen wir eine Gatsby-Site mit dem gatsby-starter-wordpress-blog Starter:

 Gatsby New Gatsby-Wordpress-w-Search https://github.com/gatsbyjs/gatsbystarter-wordpress-blog

Dieser Starter bietet eine grundlegende Routing von Beitrag und Blog -Seite. Für unser Beispiel werden wir Seiten aus Suchergebnissen ausschließen. Wir werden die WordPress -Demo des Starters verwenden. Wenn Sie Ihre eigenen verwenden, denken Sie an die erforderlichen WordPress-Plugins: WPGRAPHQL (für die GraphQL-API) und WPGATSBY (für Gatsby-spezifische Schema-Modifikationen und Build-Optimierung). Beide sind über das WordPress -Plugin -Repository erhältlich.

Integration von Apollo -Client

Gatsby verwendet in der Regel Seitenabfragen oder useStaticQuery für das Abheben von Daten. Bei benutzerverbesserten Suchvorgängen benötigen wir jedoch eine dynamische Lösung. Wir werden den Apollo -Client verwenden, um direkt mit der WPGraphql -API zu interagieren, Datenanfragen zu bearbeiten und zwischengespeichert.

Installieren Sie den Apollo -Client:

 Garn fügen Sie @apollo/client Cross-Fetch hinzu

Wickeln Sie die Anwendung mit ApolloProvider mit Gatsbys wrapRootElement -API in gatsby-browser.js :

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

const client = new Apolloclient ({{
  // ... (Link- und Cache -Konfiguration) ...
  URI: "https://wpgatsbydemo.wpengine.com/graphql", // Ersetzen Sie durch Ihren GraphQL -Endpunkt
  Fetch: Cross-Fetch,
});

Export const Wraprootelement = ({{Element}) => (
  <apolloprovider client="{client}">{Element}</apolloprovider>
);

Aufbau der Suchkomponente

Erstellen Sie die erforderlichen Dateien:

 Berühren Sie src/components/such.js src/components/such-form.js src/components/such-results.js src/css/search.css.css

Die Search verwaltet den Suchbegriffstatus und macht das Formular und die Ergebnisse: Ergebnisse:

 // src/components/search.js
// ... (Importe) ...

const search = () => {
  const [Suchterm, setSearchterm] = usustate ("");
  zurückkehren (
    <div classname="search-container">
      <searchform setsearchterm="{setSearchTerm}"></searchform>
      {Suchterm &&<searchresults searchterm="{searchTerm}"></searchresults> }
    </div>
  );
};

SearchForm ist eine einfache Form:

 // src/components/such-form.js
// ... (Importe) ...

const searchForm = ({setSearchterm}) => {
  // ... (Status und Handlessubmit -Funktion) ...
  zurückkehren (
    

Suchen: setValue (e.target.Value)} /> Suchen

); };

SearchResults verwendet den useQuery -Hook des Apollo -Kunden:

 // src/components/such-results.js
// ... (Importe) ...

const get_results = gql`
  Abfrage ($ Searchterm: String) {
    Beiträge (wo: {Search: $ searchterm}) {
      Kanten {
        Knoten {
          Ausweis
          Uri
          Titel
          Auszug
        }
      }
    }
  }
`;

const searchResults = ({suchterm}) => {
  const {Daten, Laden, Fehler} = useQuery (get_results, {variablen: {suchterm}});
  // ... (Laden, Fehler und Datenbearbeitung) ...
};

Fügen Sie die Search in Ihr Layout hinzu (oder verwenden Sie wrapPageElement für persistentes Display). Der Rest des Artikels enthält Paginierung, anhaltende Suche, Handhabung von Beiträgen und Seiten und die Verwendung von Jetpack -Sofortsuche nach verbesserten Suchfunktionen. Die bereitgestellten Code -Snippets bieten eine Grundlage für den Aufbau einer robusten Suchfunktion in Ihrer Gatsby -Website.

Das obige ist der detaillierte Inhalt vonNative Suche gegen Jetpack Sofortsuche in kopfloser WordPress mit Gatsby. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!