So erstellen Sie eine benutzerdefinierte erweiterte Suchvorlage in WordPress

Dieser Leitfaden richtet sich an Sie, die einen benutzerdefinierten Beitragstyp (CPT) haben und eine erweiterte Suchseite wünschen, die nach Ergebnissen innerhalb dieses CPT sucht. Im Suchformular können Sie verschiedene Eingaben für die Suche in verschiedenen Feldern einrichten; Beitragstitel, Beitragsinhalt, jede Art von benutzerdefiniertem Meta oder nach benutzerdefinierter Taxonomie.

In diesem Beitrag gehen wir davon aus, dass wir einen benutzerdefinierten Beitragstyp für Bücher, eine angehängte benutzerdefinierte Taxonomie für das Buchgenre und eine Reihe von benutzerdefinierten Metadaten haben. Autor, Erscheinungsjahr, ISBN-Nummer und ein Kontrollkästchen, ob das Buch auf Lager ist oder nicht. Der benutzerdefinierte Beitragstyp und die Parameter liegen ganz bei Ihnen, um sie an Ihre Bedürfnisse anzupassen. Der folgende Code versucht einfach, die meisten Grundlagen abzudecken.

Was wir machen werden

Wir werden einen benutzerdefinierten Beitragstyp für Bücher und eine daran angehängte benutzerdefinierte hierarchische Taxonomie für das Genre erstellen. Darüber hinaus verfügt jedes Buch über benutzerdefinierte Felder für Autor(en), Erscheinungsjahr, ISBN-Nummer und ein Kontrollkästchen, ob vergriffene Bücher berücksichtigt werden sollen oder nicht. Für die Suchseite selbst erstellen wir eine Seitenvorlage, in der sich der Großteil unseres Codes befindet. Die Seite beginnt mit dem Rendern eines benutzerdefinierten Formulars am Anfang; zeigt alle möglichen Parameter, um die Ergebnisse zu filtern. Darunter erscheinen alle Buchergebnisse in einer Liste. Wir legen eine Anzahl von Ergebnissen pro Seite fest und fügen unten eine Paginierung hinzu, wenn die Anzahl diese übersteigt.

Dies sind die möglichen Filterparameter, die wir für unsere erweiterte Suchvorlage erstellen werden:

• Texteingabe für die Suche nach einer beliebigen Zeichenfolge innerhalb des Beitragstitels und des Beitragsinhalts.
• Dropdown zur Auswahl eines Genres. Ermöglicht die Auswahl eines Begriffs oder belassen Sie es bei „Beliebig”.
• Eingabe für die Eingabe des Autorennamens, der in benutzerdefiniertem Meta sucht. Eine lose Übereinstimmung, was bedeutet, dass die Eingabe von „Mark” alle Autoren zurückgibt, deren Name „Mark” ist oder enthält.
• Zahleneingabe zur Eingabe des Jahres, in dem das Buch veröffentlicht wurde, das in benutzerdefinierten Metadaten sucht. Eine lose Übereinstimmung, was bedeutet, dass die Eingabe von z. B. „20″ mit jedem Buch übereinstimmt, das 1920 veröffentlicht wurde, oder mit jedem Jahr, das mit 20 beginnt.
• Eingabe für die Eingabe der ISBN (internationale Buch-ID ), die in benutzerdefinierten Metadaten sucht. Gibt nur genaue Übereinstimmungen zurück.
• Kontrollkästchen, ob vergriffene Bücher aufgenommen werden sollen oder nicht, ein weiteres benutzerdefiniertes Meta. Standardmäßig ist dies deaktiviert, was bedeutet, dass die Ergebnisse nur Bücher anzeigen, die auf Lager sind.

Das Formular ist so eingerichtet, dass es die GET-Methode verwendet, was bedeutet, dass alle gesuchten Parameter an die Seite in der URL in Form von „ ?book-search=world&year-published=2016&book-author=mark” angehängt werden. Die andere Option, wenn Sie „hässliche URLs” vermeiden möchten, ist die Verwendung von Javascript und AJAX. Aber es gibt einige Nachteile mit diesem. Vor allem wird es nicht möglich sein, eine Suche mit bestimmten Suchparametern „vorausgefüllt” zu bookmarken. Stellen Sie sich vor, Sie möchten an anderer Stelle auf Ihrer Website direkt auf Ihre benutzerdefinierte Suchseite eines bestimmten Autors verlinken. Sie könnten dann den Link zu Ihrer Suchseite führen, „ ?author=mark” anhängen und somit direkt zu den Ergebnissen für diesen Autor führen, wenn Sie auf den Link klicken. Dies ist mit AJAX nicht möglich.

Die Suchparameter schließen sich gegenseitig ein. Das bedeutet, dass die Kombination von beispielsweise Jahr „2011″ und Autor „Irgendein Typ” nur Bücher zurückgibt, die zu BEIDEN passen. Wenn wir in der allgemeinen Suchtexteingabe auch „lustig” angeben, erhalten wir nur Ergebnisse, die mit allen drei übereinstimmen. Mit anderen Worten gesagt; Wir werden UND-Logik verwenden. Dies ist die gebräuchlichste Methode zum Filtern von Suchergebnissen.

Dieses Tutorial enthält kein Styling, daher liegt dieser Teil bei Ihnen. Unten sehen Sie ein Beispiel dafür, wie dies mit einem einfachen Styling aussehen könnte.

Ein Hinweis zur Paginierung mit einer benutzerdefinierten Abfrage

Wenn Sie eine Paginierung für eine benutzerdefinierte Abfrage innerhalb einer einzelnen Seite wünschen, müssen Sie einige Dinge beachten. Die Paginierung einer Abfrage kann mit den WordPress-Funktionen [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)(), oder den beiden [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()und erzeugt werden [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Diese sind jedoch so codiert, dass sie mit dem globalen wp_queryObjekt (das für eine Seitenvorlage die Seite selbst ist) und nicht mit einer benutzerdefinierten Abfrage funktionieren.

Es gibt einige Problemumgehungen, z. B. das Schreiben einer Paginierungsfunktion selbst. Oder Sie könnten die Aktion verwenden und das Objekt pre_get_postsmanipulieren. wp_queryLeider ist diese Methode zu spät, um die Paginierungsfunktionen zu beeinflussen. Eine andere Alternative besteht darin, die Paginierung komplett zu überspringen und einfach alle Beiträge anzuzeigen. Dies könnte eine Option sein, wenn Sie nicht viele Posts haben, aber wenn Sie eine erweiterte benutzerdefinierte Suchvorlage erstellen – ich nehme an, Sie haben ziemlich viele Posts.

Was wir in diesem Leitfaden tun werden, ist eine Art „Hackish”-Methode. Wir werden das Objekt innerhalb der Seitenvorlage wp_querymit unserer benutzerdefinierten Abfrage überschreiben, damit die Schleifen- und Paginierungsfunktionen wie erwartet funktionieren. Mit dieser Methode hatte ich den größten Erfolg.

Beginnen wir ohne weiteres mit dem Programmieren!

Einrichten von benutzerdefinierten Beitragstypen, Taxonomie und Metafeldern

Der erste Schritt besteht darin, den benutzerdefinierten Beitragstyp zu definieren, für den wir eine erweiterte Suchvorlage erstellen möchten. Wenn Sie bereits einen benutzerdefinierten Beitragstyp eingerichtet haben oder ihn für Beiträge oder Seiten implementieren möchten, können Sie direkt zum nächsten Teil übergehen.

Wir definieren einen benutzerdefinierten Beitragstyp bookmit einer hierarchischen benutzerdefinierten Taxonomie book_category. Ich werde hier nicht ins Detail gehen und erklären, wie man benutzerdefinierte Beitragstypen und Taxonomien erstellt. Wenn Sie daran interessiert sind, mehr zu erfahren, habe ich einen Beitrag, der detailliert darauf eingeht.

Fügen Sie diesen Code irgendwo in den Code Ihres Designs functions.phpoder Plugins ein:

Dies führt zu einem benutzerdefinierten Beitragstyp mit einer daran angehängten Taxonomie in der Verwaltung.

Das Einrichten des benutzerdefinierten Post-Meta liegt ein wenig bei Ihnen – entweder handhaben Sie es manuell mit [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()oder verwenden Sie das Plugin Advanced Custom Fields (ACF), das perfekt für diese Art von Arbeit ist. Ich verwende ACF, um die Felder programmgesteuert einzurichten, etwa so:

Sie können die ACF-Felder natürlich gerne über die Admin-GUI von ACF einrichten. Es gibt jedoch mehrere Vorteile, wenn Sie sie per Code hinzufügen. Stellen Sie beispielsweise sicher, dass Sie überall dort, wo Sie Ihr Design oder Plugin aktivieren, dieselben Felder beibehalten. Wenn Sie die Felder im Admin-Bereich einrichten, müssen Sie daran denken, sie zu exportieren und zu importieren, wenn Sie die WordPress-Site wechseln.

Bitte beachten Sie die Metanamen; zB book_author, year_published, und so weiter. Sie beziehen sich auf diese, wenn wir die benutzerdefinierte Abfrage in der erweiterten Suchvorlage erstellen.

Mit dem ACF-Plugin und dem obigen Code würde die Bearbeitung eines einzelnen Buchs so aussehen:

Damit können wir alle so viele Buchposts erstellen, wie wir wollen. Der nächste Schritt ist das Erstellen der Seitenvorlage für unsere Suche.

Erstellen der Seitenvorlage

Lassen Sie uns die Seitenvorlage erstellen, in die wir unsere Vorlage für die erweiterte Suche einfügen. Erstellen Sie eine Kopie Ihres Designs single.phpoder page.phpund benennen Sie sie beispielsweise in um template-booksearch.php. Der HTML-Code liegt bei Ihnen, aber der Grund, warum wir eine Kopie von Single oder Page erstellen, ist, dass sie wahrscheinlich die ähnlichste Vorlage in Bezug auf das Layout sind.

Ganz oben auf der Seitenvorlage weisen wir darauf hin, dass es sich um eine Seitenvorlage handelt, indem wir „Name der Vorlage” und ihren Namen in den Kommentarblock schreiben. Dadurch wird sichergestellt, dass wir die Seitenvorlage auswählen können, wenn wir eine Seite bearbeiten.

Die Abschnitte, die wir in unserer Vorlage codieren müssen, lauten in dieser Reihenfolge wie folgt:

1. Speichern Sie alle zuvor vom Formular übermittelten Variablen mit get_query_var(). Außerdem muss die aktuelle Seite gespeichert werden
2. Rendern Sie das Suchformular mit einer Senden-Schaltfläche zum Durchführen einer Suche
3. Setzen Sie das wp_queryObjekt zurück
4. Richten Sie die Argumente für eine neue WP_Query()abhängig von den gesuchten Parametern ein und führen Sie die Abfrage aus. wp_queryWeisen Sie dem Objekt die benutzerdefinierte Abfrage zu
5. Durchlaufen Sie die Ergebnisse und zeigen Sie sie an. Rendern Sie auch Paginierungslinks
6. Setzen Sie das wp_queryObjekt auf das zurück, was es war

Der Grund, warum wir alle gesuchten Variablen und die aktuelle Seite frühzeitig speichern müssen, ist, dass diese Variablen verloren gehen, sobald wir das wp_queryObjekt in Schritt 3 zurücksetzen. Wir benötigen die Variablen auch für unser Suchformular, um die Felder zu füllen.

Entscheiden Sie in Ihrer Vorlage, an welcher Stelle Sie Ihre benutzerdefinierte Suche ausgeben möchten, und beginnen wir ganz oben:

1 Alle gesuchten Variablen abrufen

GET-Parameter (aus der URL) bekommen wir mit [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Zum Beispiel; wenn wir einen Parameter ?book-author=benjaminin der URL haben, get_query_var('book-author')würde using den String ‘ benjamin‘ zurückgeben. Das Abrufen aller Variablen kann folgendermaßen erfolgen:

$search_string = get_query_var('book-search');
$author = get_query_var('book-author');
$category = get_query_var('book-category');
$year = get_query_var('year-published');
$isbn = get_query_var('isbn');
$out_of_stock = get_query_var('out-of-stock');

Dies sind jedoch alles benutzerdefinierte Parameter, die nicht Teil der WordPress-Standard-GET-Parameter sind. WordPress ignoriert alle GET-Parameter, die es nicht kennt, sodass der Aufruf dieser Parameter immer eine leere Zeichenfolge zurückgibt. Wir müssen WordPress anweisen, jeden dieser GET-Parameter zuzulassen. Wir tun dies, indem wir filtern query_vars. Fügen Sie in Ihrer functions.phpauch Folgendes hinzu:

add_filter('query_vars', function($vars) {
    $vars[] = 'book-search';
    $vars[] = 'book-author';
    $vars[] = 'book-category';
    $vars[] = 'year-published';
    $vars[] = 'isbn';
    $vars[] = 'out-of-stock';
    return $vars;
});

Jetzt get_query_var()sollten unsere ‘s in der Lage sein, die GET-Parameter abzurufen. Wenn sie nicht gesetzt sind, wird eine leere Zeichenfolge zurückgegeben.

wp_queryWir müssen auch die aktuelle Seite abrufen, bevor wir das Objekt durcheinander bringen. Die aktuelle Seite ist ein versteckter GET-Parameter namens paged. Wir werden es auf die gleiche Weise wie unsere anderen GET-Parameter abrufen, aber wir werden es standardmäßig auf 1 setzen, wenn es leer ist.

$paged = (get_query_var('paged'))? get_query_var('paged'): 1;

Hinweis: Da pagedes sich um einen Standard-WordPress-Parameter handelt, müssen wir pageddem query_varsFilter nichts hinzufügen.

2 Rendern Sie das Suchformular

Das Suchformular ist einfach <form>ein Formular mit den erforderlichen Eingaben und einer Schaltfläche zum Absenden des Formulars. Das HTML liegt ganz bei Ihnen, im Beispiel unten füge ich die Eingaben in einer einfachen Liste hinzu. Ich werde kein Styling in dieses Tutorial aufnehmen, das liegt bei Ihnen. Sie können das Suchformular so gestalten, dass es sich oben in den Ergebnissen oder an der Seite befindet – vertikal nach unten zusammen mit den Suchergebnissen.

Hinweis: Um die Vorlage für die erweiterte Suche zu verkürzen und zu modularisieren, könnten Sie den Teil des Suchformulars in einer separaten Vorlagendatei ausgliedern und mit einbinden [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Aber der Einfachheit halber werde ich alles in die eine Vorlagendatei selbst aufnehmen.

Das Formular selbst muss die Methode GET haben und die Aktion muss auf die Seite zeigen, auf der wir uns gerade befinden. Dazu greifen wir auf das globale $postObjekt zu und holen uns daraus den Permalink. Am Ende fügen wir einen Submit-Button hinzu, der das Formular absendet.

Innerhalb der ungeordneten Liste fügen wir für jeden unserer möglichen Suchparameter eine passende Eingabe hinzu. Passen Sie das HTML und die Suchparameter an Ihre Bedürfnisse an:

Bitte beachten Sie die nameAttribute; Sie werden in der URL angezeigt, wenn das Formular gesendet wird. Sie müssen dem entsprechen, was query_varswir get_query_var()zuvor definiert haben!

Der obige Code beginnt mit dem Rendern einer Texteingabe für die allgemeine Textsuche. Wir setzen die valueauf die zuvor gesuchte Variable, die wir mit abgerufen haben get_query_var(). Dadurch wird sichergestellt, dass die Eingabe nicht gelöscht wird, nachdem wir eine Suche durchgeführt haben.

Der nächste Parameter ist ein Dropdown-Menü des Genres aus unserer benutzerdefinierten Taxonomie. Um dies zu rendern verwenden wir die Funktion [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Werfen Sie einen Blick auf die Dokumentationsseite, um zu sehen, warum wir all diese Parameter hinzufügen, um das Dropdown-Menü an unsere Bedürfnisse anzupassen. Es ist wichtig, dass das taxonomyauf unsere benutzerdefinierte Taxonomie gesetzte nameAttribut korrekt selectedist und auf den Wert der zuvor gesuchten Variablen gesetzt ist. Wir setzen die Begriffswerte auch auf ihre Slugs anstelle von Begriffs-IDs. ?book-category=fictionMit statt sieht es besser aus ?book-category=42. Wir aktivieren auch eine „Keine”-Option, um eine „Beliebiges Genre”-Option hinzuzufügen.

Anschließend rendern wir eine weitere Texteingabe für die Suche nach dem Autor, eine Zahleneingabe für das Erscheinungsjahr, eine Texteingabe für die ISBN-Nummer und schließlich ein Kontrollkästchen, das standardmäßig deaktiviert ist, um vergriffene Bücher einzubeziehen.

3 Setzen Sie wp_query zurück

Der nächste Schritt ist ein kleiner Hack, um sicherzustellen, dass die Paginierung für unsere benutzerdefinierte Abfrage funktioniert. Wir speichern einfach den Strom $wp_queryin einer Variablen und setzen ihn dann auf null. Später, in Schritt 6, werden wir es von der $tmp_wpqueryVariablen zurücksetzen.

$tmp_wpquery = $wp_query;
$wp_query = null;

4 Richten Sie Argumente ein und führen Sie eine benutzerdefinierte Abfrage aus

In diesem Teil geht es darum, eine neue Abfrage durchzuführen. Wir beginnen mit der Einrichtung der grundlegendsten Argumente und fügen dann bedingt Parameter hinzu, je nachdem, was in zuvor durchsuchten Variablen (aus unseren get_query_var()s) gefunden wurde.

Der obige Code baut im Grunde eine WP_Querymit Parametern auf. Die Dokumentationsseite für WP_Queryist eine großartige Ressource, um herauszufinden, wie man eine Abfrage erstellt.

Die allerersten Argumente stellen sicher, dass wir nur Bücher abfragen und dass wir ordnungsgemäß darüber informieren, auf welcher Seite wir uns gerade befinden – aus der pagedzuvor abgerufenen Variable. Die Anzahl der Posts pro Seite ist dir überlassen, ich habe sie einfach auf 20 gesetzt.

Beachten Sie, dass das Hinzufügen von „ compare” zu „ LIKE” dazu führt, dass WordPress nach allem sucht, was die angegebene Zeichenfolge enthält. Ich habe dies nicht zur ISBN-Suche hinzugefügt, weil ich möchte, dass für dieses Feld perfekt passende Ergebnisse gefunden werden.

Das Wichtigste ist ganz am Ende, wenn wir die Abfrage tatsächlich ausführen und diese Abfrage der wp_queryVariablen zuweisen.

5 Durchlaufen Sie die Abfrageergebnisse und rendern Sie die Paginierung

Dieser Schritt ist wirklich einfach. Alles, was wir brauchen, ist eine Standardschleife und für jede rendern wir den Buchbeitrag so, wie wir möchten. Dieser Teil liegt ganz bei Ihnen.

Der folgende Code zeigt ein einfaches Beispiel für das Durchlaufen der Ergebnisse, wobei get_template_part()für jeden Beitrag aufgerufen wird. Nachdem die Schleife the_posts_pagination()zum Rendern von Paginierungslinks verwendet wurde. Wenn die Abfrage keine Beiträge zurückgegeben hat, wird ein einfacher Absatz mit einem Text angezeigt.

Passen Sie HTML und Ausgabe an Ihre Bedürfnisse an. Der obige Code erwartet eine Vorlagendatei im benannten Thema content-book.phpzum Rendern eines einzelnen Buchs in der Schleife. Ich werde Ihnen nicht zeigen, wie Sie jeden Beitrag rendern, da Sie höchstwahrscheinlich bereits die Kontrolle darüber haben.

6 Setzen Sie wp_query auf den ursprünglichen Zustand zurück

Der letzte Schritt besteht darin, das wp_queryObjekt auf das zurückzusetzen, was wir zuvor in Schritt 3 gespeichert haben. Wir setzen es auf nullfirst, um sicherzustellen, dass es zurückgesetzt wird.

$wp_query = null;
$wp_query = $tmp_wpquery;

Fazit und Endergebnis

Und das war es! Sie sollten jetzt über eine voll funktionsfähige erweiterte benutzerdefinierte Suchvorlage verfügen. Ich hoffe, dies war Ihnen eine Hilfe – der Code wurde so allgemein wie möglich geschrieben, um es Ihnen leicht zu machen, sich an Ihre Bedürfnisse anzupassen. Vielleicht möchten Sie verschiedene Arten von Parametern oder Ihr benutzerdefinierter Beitragstyp ist für Filme oder etwas anderes!

Mit etwas grundlegendem Styling kann es leicht so aussehen:

Hier ist der endgültige Code; das functions.phpTeil und die Vorlage: