Hur man skapar anpassat sökformulär i WordPress

Senaste uppdateringen okt 17, 2021

Innehåll

Vill du skapa ett anpassat sökformulär på en WordPress-webbplats? Vi brukade bygga teman från grunden så att vi kan lägga till vår egen styling i avsnitten på webbplatsen. Du kanske har skapat en design av ett snyggt sökformulär och nu vill passa in det i WordPress.

WordPress tillhandahåller en metod get_search_form()som gör sökformuläret. Om du använder den här metoden i ditt anpassade tema får du ett standardsökformulär som skapats i WordPress-kärnan. Och du vill inte ha standardsökformuläret eftersom din formulärdesign är annorlunda. För att övervinna denna situation måste du skapa ett anpassat sökformulär som åsidosätter standardinställningen.

Genom att skapa ett anpassat sökformulär kan du lägga till din egen markering och styling till den. I den här artikeln visar jag dig hur du skapar ett anpassat sökformulär i WordPress.

Metoden get_search_form()letar efter searchform.phpfil i ditt aktiva temas katalog. Om den här filen inte finns använder WordPress standardsökformuläret som ingår i kärnan.

Skapa ett anpassat sökformulär

Skapa searchform.phpfil i ditt aktiva temas katalog. Lägg till din markering av sökformuläret i den här filen. I mitt fall är till exempel sökformuläret följande.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="submit" value="Search">
</form>

Det finns inget snyggt eller komplicerat i ovanstående kod. Jag gav just id ‘sökformulär’ till formuläretiketten och klass ‘sökfält’ till söketekstfältet. Med hjälp av detta ID och klass kan jag lägga till styling i sökformuläret. Så här i ditt fall måste du använda din egen markering.

Visa sökformulär

Nästa steg är att visa sökformuläret på webbplatsen. Du kanske vill placera sökformuläret i sidofältet, rubriken, bredvid menyn etc.

Med funktionen get_search_form()kan man visa sitt sökformulär var som helst på webbplatsen. Allt du behöver göra är att ringa den här metoden från den plats där du vill visa sökformuläret.

<?php get_search_form(); ?>

Efter att ha placerat ovanstående kod på önskad plats, gå till webbläsaren. Du bör nu se ditt sökformulär på webbplatsen.

Anpassa sökresultat

Det kan vara fallet, din webbplats har fler resurser som böcker, tidskrifter, e-böcker, PDF-filer etc. och du måste visa innehåll från alla dessa resurser i sökresultatet. Det kan göras enkelt.

Förutsatt att du har anpassade inläggstyper för alla dessa resurser måste du lägga till ett dolt fält för varje inläggstyp i sökformuläret.

Låt oss säga att du har skapat anpassade inläggstyper bok, tidskrift, e-bok, pdf för ovanstående resurser. Då blir dina dolda fält följande.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Nu när någon anger ett nyckelord i sökformuläret, söker WordPress efter det nyckelordet i alla ovanstående inläggstyper för att matcha resultatet.

Jag hoppas att du förstår hur du skapar ett anpassat sökformulär i WordPress. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net