Hur man skapar en anpassad avancerad sökningsmall i WordPress

Den här guiden är för dig som har en anpassad posttyp (CPT) och vill ha en avancerad söksida som söker efter resultat inom denna CPT. I sökformuläret kan du ställa in olika ingångar för sökning inom olika fält; inläggstitel, inläggsinnehåll, valfri typ av anpassad meta eller anpassad taxonomi.

I det här inlägget antar vi att vi har en anpassad inläggstyp för böcker, en bifogad anpassad taxonomi för bokgenre och ett gäng anpassade meta; författare, publiceringsår, ISBN-nummer och en kryssruta om boken finns i lager eller inte. Den anpassade posttypen och parametrarna är helt upp till dig för att passa dina behov, koden nedan kommer helt enkelt att försöka täcka de flesta av baserna.

Vad vi ska göra

Vi kommer att skapa en anpassad inläggstyp för böcker och en anpassad hierarkisk taxonomi kopplad till den för genre. Dessutom har varje bok anpassade fält för författare(r), publiceringsår, ISBN-nummer och en kryssruta om böcker som är slut i lager ska inkluderas eller inte. När det gäller själva söksidan kommer vi att göra en sidmall där det mesta av vår kod kommer att finnas. Sidan börjar med att rendera ett anpassat formulär i början; visar alla möjliga parametrar för att filtrera resultaten. Under den kommer alla bokresultat att visas i en lista. Vi bestämmer ett antal resultat per sida och lägger till paginering längst ner om antalet överstiger detta.

Det här är de möjliga filterparametrarna vi kommer att skapa för vår avancerade sökmall:

• Textinmatning för att söka efter valfri sträng inom inläggets titel och innehåll.
• Dropdown för att välja en genre. Tillåter att välja en term eller lämna den på "Val som helst".
• Indata för att skriva författarens namn som söker i anpassad meta. Löst matchning vilket betyder att du anger "Mark" kommer att returnera alla författare vars namn är eller innehåller "Mark".
• Nummerinmatning för att ange år boken publicerades som söker i anpassad meta. Löst matchning, vilket innebär att t.ex. "20" stämmer överens med vilken bok som helst som publicerades 1920 eller vilket år som helst som börjar med 20.
• Inmatning för att ange ISBN (international book ID) som söker i anpassad meta. Returnerar endast exakta matchningar.
• Kryssa i huruvida böcker som inte är i lager ska inkluderas eller inte, ännu en anpassad meta. Som standard är detta avmarkerat, vilket innebär att resultaten endast visar böcker som finns i lager.

Formuläret är inställt för att använda GET-metoden, vilket innebär att alla sökta parametrar kommer att läggas till sidan i URL:en, i form av " ?book-search=world&year-published=2016&book-author=mark". Det andra alternativet om du vill undvika att ha "fula webbadresser" är att använda Javascript och AJAX. Men det finns några nackdelar med detta. Först och främst kommer det inte att vara möjligt att bokmärka en sökning med specifika sökparametrar "förifyllda". Föreställ dig att du någon annanstans på din webbplats vill länka direkt till din anpassade söksida av en specifik författare. Du kan sedan få länken att gå till din söksida, lägga till " ?author=mark", och på så sätt kommer ett klick på länken att leda direkt till resultaten för den författaren. Detta är inte möjligt att uppnå med AJAX.

Sökparametrarna är ömsesidigt inkluderande. Det betyder att en kombination av till exempel år “2011" och författaren “Någon kille” kommer bara att returnera böcker som matchar BÅDA dessa. Om vi ​​också anger "roligt" i den allmänna söktextinmatningen får vi bara returer som matchar alla tre av dessa. Sagt med olika ord; vi kommer att använda OCH-logik. Detta är den vanligaste metoden för att filtrera sökresultat.

Den här handledningen inkluderar inte styling så den här delen är upp till dig. Nedan är ett exempel på hur detta kan se ut med lite grundläggande styling.

En anteckning om paginering med en anpassad fråga

Om du vill ha sidnumrering på en anpassad fråga på en enda sida finns det några saker att vara medveten om. En frågas paginering kan genereras med WordPress-funktionerna [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)()eller de två [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()och [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Dessa är dock kodade för att fungera med det globala wp_queryobjektet (som för en sidmall är själva sidan), och inte en anpassad fråga.

Det finns några lösningar, som att skriva en sidnumreringsfunktion själv. Eller så kan du använda åtgärden pre_get_postsoch manipulera wp_queryobjektet. Tyvärr är denna metod för sen för att påverka sidnumreringsfunktioner. Ett annat alternativ är att hoppa över paginering helt och hållet och helt enkelt visa alla inlägg. Detta kan vara ett alternativ om du inte har många inlägg, men om du gör en avancerad anpassad sökmall – jag antar att du har en hel del inlägg.

Vad vi kommer att göra i den här guiden är en sorts "hackisk" metod. Vi kommer inom sidmallen att åsidosätta wp_queryobjektet med vår anpassade fråga så att loop- och pagineringsfunktionerna fungerar som förväntat. Denna metod är den jag har haft mest framgång med.

Utan vidare, låt oss börja koda!

Ställa in anpassade inläggstyp, taxonomi och metafält

Det första steget är att definiera den anpassade posttyp vi vill skapa en avancerad sökmall för. Om du redan har ställt in en anpassad inläggstyp, eller vill implementera den för inlägg eller sidor, kan du hoppa direkt till nästa del.

Vi definierar en anpassad posttyp bookmed en hierarkisk anpassad taxonomi book_category. Jag kommer inte att gå in i detalj och förklara hur man skapar anpassade inläggstyper och taxonomier här. Om du är intresserad av att lära dig mer har jag ett inlägg som går in i detalj om detta.

Placera den här koden var som helst i ditt tema functions.phpeller plugin-kod:

Detta kommer att resultera i en anpassad inläggstyp med en taxonomi kopplad till den i admin.

Att ställa in den anpassade postmeta är lite upp till dig – antingen hantera det manuellt med [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()eller använd plugin Advanced Custom Fields (ACF) som är perfekt för denna typ av arbete. Jag använder ACF för att ställa in fälten programmässigt, så här:

Du är självklart välkommen att ställa in ACF-fälten med hjälp av ACF:s admin GUI. Men det finns flera fördelar med att lägga till dem med kod. Till exempel att se till att du behåller samma fält var du än aktiverar ditt tema eller plugin. Om du ställer in fälten i admin måste du komma ihåg att exportera och importera dem om du byter WordPress-webbplats.

Vänligen notera metanamnen; t.ex. book_author, year_publishedoch så vidare. Du hänvisar till dessa när vi skapar den anpassade frågan på mallen för avancerad sökning.

Med ACF-plugin och koden ovan skulle redigering av en enda bok se ut så här:

Med detta är vi alla bra på att skapa så många bokinlägg vi vill. Nästa steg är att skapa sidmallen för vår sökning.

Skapar sidmallen

Låt oss skapa sidmallen där vi lägger in vår mall för avancerad sökning. Gör en kopia av ditt tema single.phpeller page.phpoch byt namn på det till till exempel template-booksearch.php. HTML-koden är upp till dig, men anledningen till att vi gör en kopia av singel eller sida är för att de förmodligen är den närmaste mallen när det gäller layout.

Högst upp i sidmallen markerar vi att detta är en sidmall genom att skriva "Mallnamn" och dess namn i kommentarsblocket. Om du gör detta kommer vi att se till att vi kan välja sidmallen när vi redigerar en sida.

De avsnitt vi behöver koda i vår mall är följande, i denna ordning:

1. Lagra alla variabler som tidigare skickats in av formuläret med get_query_var(). Behöver också lagra aktuell sida
2. Återge sökformuläret med en skicka-knapp för att utföra en sökning
3. Återställ wp_queryobjektet
4. Ställ in argumenten för en ny WP_Query()beroende på sökta parametrar och kör frågan. Tilldela den anpassade frågan till wp_queryobjektet
5. Gå igenom resultaten och visa dem. Återge också pagineringslänkar
6. Återställ wp_queryobjektet till vad det var

Anledningen till att vi måste lagra alla sökta variabler och aktuell sida tidigt är att dessa variabler kommer att gå förlorade när vi återställer wp_queryobjektet i steg 3. Vi behöver också variablerna för vårt sökformulär för att fylla i fälten.

Bestäm i mallen var du vill visa din anpassade sökning, och låt oss börja längst upp:

1 Hämta alla sökta variabler

Vi får tag på GET-parametrar (från URL) med [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Till exempel; om vi har en parameter ?book-author=benjamini URL:en skulle användning get_query_var('book-author')returnera strängen ‘ benjamin‘. Att hämta alla variabler kan göras så här:

$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');

Men dessa är alla anpassade parametrar som inte ingår i WordPress standard GET-parametrar. WordPress kommer att ignorera alla GET-parametrar som det inte känner till, så att anropa dessa kommer alltid att returnera en tom sträng. Vi måste berätta för WordPress att tillåta var och en av dessa GET-parametrar. Vi gör detta genom att filtrera query_vars. I din functions.php, lägg till detta också:

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;
});

Nu borde våra get_query_var()s kunna hämta GET-parametrarna. Om de inte är inställda returnerar den en tom sträng.

Vi måste också hämta aktuell sida innan vi förstör wp_queryobjektet. Den aktuella sidan är en dold GET-parameter som kallas paged. Vi hämtar det på samma sätt som våra andra GET-parametrar, men vi kommer att ställa in det till standard till 1 om det är tomt.

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

Obs: Eftersom pageddet är en standard WordPress-parameter behöver vi inte lägga pagedtill i query_varsfiltret.

2 Gör sökformuläret

Sökformuläret kommer helt enkelt att vara ett <form>med nödvändiga inmatningar och en knapp för att skicka formulär. HTML är helt upp till dig, i exemplet nedan lägger jag till indata i en enkel lista. Jag kommer inte att inkludera någon styling i denna handledning, det här är upp till dig. Du kan välja att stila sökformuläret så att det ligger överst i resultaten, eller vid sidan – vertikalt nedåt tillsammans med sökresultaten.

Obs: För att förkorta och modularisera den avancerade sökmallen kan du separera sökformulärdelen i en separat mallfil och inkludera den med [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Men för den här handledningens enkelhets skull kommer jag att inkludera allt i själva mallfilen.

Själva formuläret måste vara av metoden GET, och åtgärden måste peka på sidan vi är på. För att göra detta kommer vi åt det globala $postobjektet och får permalänken från det. I slutet lägger vi till en skicka-knapp som skickar formuläret.

Inom den oordnade listan lägger vi till en passande ingång för var och en av våra möjliga sökparametrar. Justera HTML och sökparametrarna så att de passar dina behov:

Vänligen notera nameattributen; de är vad som kommer att visas i URL:en när formuläret skickas. De måste motsvara query_varsoch get_query_var()vi har definierat tidigare!

Ovanstående kod börjar med att återge en textinmatning för den allmänna textsökningen. Vi ställer in valuetill den tidigare sökta variabeln som vi hämtade med get_query_var(). Detta säkerställer att inmatningen inte rensas efter att vi har gjort en sökning.

Nästa parameter är en rullgardinsmeny med genre från vår anpassade taxonomi. För att göra detta använder vi funktionen [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Ta en titt på dokumentationssidan för att se varför vi lägger till alla dessa parametrar för att anpassa rullgardinsmenyn efter våra behov. Det är viktigt att attributet är taxonomyinställt på vår anpassade taxonomi, nameattributet är korrekt och selectedär inställt på värdet för den tidigare sökta variabeln. Vi ställer också in termvärdena till att vara deras slugs istället för term-ID:n. Det ser bättre ut med ?book-category=fictionistället för ?book-category=42. Vi aktiverar också ett "ingen"-alternativ för att lägga till ett "Val som helst genre".

Därefter gör vi ytterligare en textinmatning för att söka efter författare, en nummerinmatning för publicerat år, en textinmatning för ISBN-nummer och slutligen en kryssruta som är avmarkerad som standard för att inkludera slutförsäljningsböcker.

3 Återställ wp_query

Nästa steg är ett litet hack för att säkerställa att paginering fungerar för vår anpassade fråga. Vi lagrar helt enkelt strömmen $wp_queryi någon variabel och ställer sedan in den på null. Senare, i steg 6 kommer vi att återställa den från $tmp_wpqueryvariabeln.

$tmp_wpquery = $wp_query;
$wp_query = null;

4 Ställ in argument och kör anpassad fråga

Den här delen handlar om att utföra en ny fråga. Vi börjar med att sätta upp de mest grundläggande argumenten, och sedan lägger vi villkorligt till parametrar beroende på vad som hittades i tidigare sökta variabler (från våra get_query_var()s).

Ovanstående kod bygger i princip en WP_Querymed parametrar. Dokumentationssidan för är en utmärkt resurs för WP_Queryatt ta reda på hur man bygger en fråga.

De allra första argumenten ser till att vi bara frågar efter böcker och att vi informerar korrekt om vilken sida vi befinner oss på just nu – från pagedvariabeln vi hämtade tidigare. Antalet inlägg per sida är upp till dig, jag har helt enkelt ställt in det till 20.

Observera att om du lägger till ‘ compare‘ till ‘ LIKE‘ kommer WordPress att söka efter allt som innehåller den givna strängen. Jag lade inte till detta i ISBN-sökningen eftersom jag för det här fältet vill att det ska hitta resultat som matchar perfekt.

Det viktiga är precis i slutet, när vi faktiskt utför frågan, och tilldelar den frågan till wp_queryvariabeln.

5 Gå igenom frågeresultaten och återge sidnumrering

Det här steget är verkligen enkelt. Allt vi behöver är en standardslinga och för varje gör vi bokinlägget som vi vill. Denna del är helt upp till dig.

Koden nedan visar ett grundläggande exempel på att gå igenom resultaten, kallar get_template_part()för varje inlägg. Efter slingan the_posts_pagination()används för att rendera pagineringslänkar. Om frågan inte gav några inlägg visas ett enkelt stycke med en text.

Justera HTML och utdata för att passa dina behov. Ovanstående kod förväntar sig en mallfil i temat namngiven content-book.phpför att rendera en enda bok i slingan. Jag kommer inte att visa dig hur du renderar varje inlägg eftersom detta är något du med största sannolikhet redan har kontroll över.

6 Återställ wp_query till vad det var

Det sista steget är att återställa wp_queryobjektet till det vi lagrade tidigare i steg 3. Vi ställer in det på nullförst för att säkerställa att det är återställt.

$wp_query = null;
$wp_query = $tmp_wpquery;

Slutsats och slutresultat

Och det var det! Du bör nu ha en fullt fungerande avancerad anpassad sökmall. Jag hoppas att detta har varit lite hjälp för dig – koden har skrivits så generellt som möjligt för att göra det enkelt för dig att anpassa dig efter dina behov. Kanske vill du ha olika typer av parametrar, eller så är din anpassade inläggstyp för filmer eller något annat!

Med lite grundläggande styling kan det enkelt se ut så här:

Här är den sista koden; functions.phpdelen och mallen :