Hur man låter användare filtrera posts och pages i WordPress (3 metoder)

Genom att låta användarna filtrera inlägg och sidor på din WordPress-webbplats kan du göra det lättare för dem att hitta det innehåll de letar efter. Oavsett om de söker efter dina senaste handledningar, produktrecensioner eller specifika ämnen, förbättrar en filterfunktion deras surfupplevelse.

WordPress erbjuder dock inte ett enkelt sätt att lägga till filtreringsalternativ som standard. Det innebär att användare kan behöva gå igenom otaliga inlägg för att hitta det de vill ha, vilket kan leda till frustration.

Vi gjorde en del efterforskningar och testade olika metoder för att lösa detta problem. Efter att ha provat flera verktyg fann vi att SearchWP, WPCode och Search & Filter plugins gör det snabbt och enkelt att lägga till filter i dina inlägg och sidor.

I den här artikeln visar vi hur du enkelt kan låta användare filtrera inlägg och sidor i WordPress med hjälp av 3 olika metoder.

Varför lägga till en filtreringsfunktion för dina WordPress-poster och pages?

Har du någonsin besökt en WordPress-webbplats som svämmar över av innehåll, bara för att kämpa för att hitta det du behöver? Det kan vara en frustrerande upplevelse för användarna och leda till att de överger din webbplats helt och hållet.

I slutändan kan detta påverka sökmotorsoptimeringen negativt eftersom search engines anser att användarnas upplevelse är en faktor för ranking. En website med hög studsfrekvens och lågt engagement kan ses som mindre värdefull av search engines.

Lyckligtvis finns det en enkel lösning: att implementera en utvald funktion för search och filtrera på din website i WordPress. Detta kraftfulla verktyg allow användare att begränsa content baserat på specifika kriterier, vilket gör det enkelt att hitta det de letar efter.

En sök- och filterfunktion är inte bara bra för WordPress-bloggar. Det är också perfekt för webbplatser som forum med tusentals trådar. På så sätt kan användarna söka efter rätt diskussion utifrån ämne, datum eller författare.

Eller om du har en site för podcasts kan lyssnarna leta efter det avsnitt de vill ha med hjälp av funktionen.

Med detta i åtanke kommer vi att visa dig 3 enkla metoder för att låta användare filtrera inlägg och sidor på din WordPress-webbplats. Du kan använda snabblänkarna nedan för att hoppa till den metod du föredrar:

Är du redo? Låt oss hoppa in direkt!

Metod 1: Filtrera inlägg och sidor med SearchWP (rekommenderas)

SearchWP är ett kraftfullt plugin för search i WordPress och är vår högsta rekommendation för att lägga till filtreringsfunktionalitet på din website. Det är mycket användarvänligt, vilket gör det till ett utmärkt val för Beginnare.

Här är en Step-by-Step guide om hur du använder SearchWP för att skapa ett customized search-formulär med filtreringsalternativ.

Step 1: Installera och konfigurera SearchWP

Först måste du installera och aktivera SearchWP-pluginet. Om du inte är van vid det här har vi en bra guide om hur du installerar ett WordPress-plugin.

När du är aktiverad kan du gå till SearchWP ” Inställningar. Sedan, på fliken ”Allmänt”, gå vidare och ange din licensnyckel för att aktivera den.

Låt oss nu gå över till SearchWP ” Algoritm. Här kan du antingen redigera standardsökmotorn eller skapa en ytterligare.

Standardmotorn låter användarna söka igenom sidor, inlägg, mediefiler och kommentarer, vilket är bra för en typisk WordPress-blogg.

Å andra sidan kan den extra sökmotorn använda andra källor som kategorier, taggar, anpassade inläggstyper och anpassade taxonomier. Detta kan vara användbart för att skapa ett sök- och filterformulär för innehåll som inte är blogginnehåll, som ett e-handelsproduktfilter för WooCommerce-webbplatser.

I den här handledningen kommer vi att hålla oss till standardmotorn och helt enkelt justera dess inställningar. För att göra det kan du klicka på ”Källor och inställningar”.

Eftersom vi skapar en sök- och filterfunktion för att filtrera inlägg och sidor, kommer vi bara att inkludera sidor och posts som källor för WordPress search engine.

Vi har också aktiverat funktionen ”Keyword Stems”, som tillåter SearchWP att visa resultat även om keywordet inte är en perfekt matcha.

När du är nöjd med inställningarna kan du bara klicka på ”Klar”.

Step-by-Step 2: Finjustera din search engine

Nu ser du ett avsnitt för alla de källor du har valt (i vårt fall bara inlägg och sidor).

Varje källa har sliders för ”Applicable Attribute Relevance”. Dessa sliders bestämmer hur mycket vikt SearchWP ger till varje attribut vid ranking av sökresultat.

I enklare termer kommer content som close matchar ett högt viktat attribut att visas högre upp i search term-resultaten.

Om du till exempel ger attributet ”Post Content” mer vikt än attributet ”Post Rubrik”, kommer SearchWP att prioritera resultat där search termen visas i själva innehållet.

You can adjust these sliders based on your preferences.

Du kan också clicka på ”Add/Remove Attributes”.

Detta gör att en popup visas där du kan inkludera eller ta bort fler attribut.

Du kan till exempel inkludera custom taxonomies eller custom fields för att göra dem sökbara.

En annan utvald funktion är möjligheten att skapa regler som inkluderar eller exkluderar specifikt content från sökresultaten.

För att göra detta klickar du bara på knappen ”Edit Rules”.

This setting allows you to filter out irrelevant content or highlight specific categories.

I nästa popup-fönster kan du klicka på ”Lägg till regel”.

Nu klickar du bara på rullgardinsmenyn och väljer ”Visa bara poster om” eller ”Uteslut poster om”.

Sedan kan du välja om du vill exkludera eller inkludera content om det ingår i ett visst taxonomi, publicerades inom ett visst datumintervall eller har ett visst ID:n.

För att lägga till ytterligare en regel klickar du bara på knappen ”Lägg till regel” och upprepar samma process som beskrivs ovan. När du är nöjd med hur reglerna har ställts in klickar du på ”Klar”.

Du kan upprepa samma process för de andra sökingångskällorna, om det behövs.

När du är nöjd med sökmotorn kan du gå tillbaka högst upp på sidan och klicka på ”Spara”.

SearchWP kommer nu att bygga upp indexet igen, vilket kan ta några minuter.

När du ser ”Index Status 100%” betyder det att SearchWP har indexerat allt ditt content och regler för search engine.

Step-by-Step 3: Skapa ett formulär för customize search

Nu när search engine är konfigurerad ska vi skapa ett användarvänligt sökformulär med alternativ för filtrering.

För att börja, låt oss gå över till SearchWP ” Sökformulär och klicka sedan på ”Lägg till nytt”.

På nästa skärm är det första du ska göra att ge ditt formulär ett igenkännligt namn.

Detta är bara för din interna referens, så namnet kan vara vad som helst som är lätt för dig att komma ihåg.

Sedan väljer du en layout.

I denna tutorial kommer vi att använda alternativet ”Combined”, eftersom det ger de flesta filtreringsmenyerna.

Nu kan du bläddra ner till avsnittet ”Anpassad styling” och välja både alternativen ”Kategorisökning” och ”Avancerad sökning”. Detta säkerställer att ditt formulär innehåller alla filtreringsfunktioner.

Du kan valfritt välja ”Quick Search” om du vill add to några föreslagna search termer under sökfältet.

I menyn ”Engine” väljer du sedan den sökmotor som du skapade tidigare.

När det gäller ”Resultat” kan du välja vilken page med sökresultat som ska användas: standard WordPress-resultat eller SearchWP:s version.

I ”Typ av sökning”, låt oss välja ”Inlägg” och ”Sidor”.

Under det kan du add to de kategorinamn som du vill ska ingå i menyn filtrera.

För ”Field Label”, gå vidare och ange en platshållartext som visas i sökfältet, till exempel ”Vad letar du efter?

Om du valde ”Quick Search” tidigare kan du inkludera termer som användare ofta söker efter i ”Quick Search Items”.

I ”Advanced Search Filter/s” väljer du helt enkelt vilka filtreringsalternativ du vill erbjuda användarna, till exempel ”Authors”, ”Post Types” eller ”Tags”.

Slutligen, i ”Form Style” och ”Button Style”, gå vidare och customize utseendet på search-formuläret för att matcha designen på din website.

You can change the colors, fonts, and shapes of the search form.

När allt är klart kan du rulla tillbaka upp.

Sedan är det dags att klicka på ”Spara” för att skapa ditt sökformulär.

Step-by-Step 4: Embed formuläret Search och Filter

SearchWP-pluginet allow you to easily embed the search form on the front end of your website, like on your homepage or widget-ready areas. Här kommer vi att visa hur du lägger till det på en page med hjälp av WordPress block editor och Search Form-blocket.

Först kan du öppna den sida eller det inlägg du vill lägga till formuläret på. Sedan klickar vi på ikonen ”+ Lägg till block” och söker efter ”Sökformulär”.

I sidofältet ”Blockinställningar” går du vidare och väljer det formulär du skapade från rullgardinsmenyn.

Slutligen klickar du bara på ”Publicera” eller ”Uppdatera” för att se sökformuläret i realtid.

För mer information kan du kontrollera dessa Step-by-Step guider:

• Så här addar du ett search-formulär i en WordPress post
• Så här addar du ett search-fält till WordPress-menyn

Alternativt kan du visa formuläret med hjälp av en shortcode.

För att göra detta måste du hitta kortkoden för ditt specifika formulär genom att gå till SearchWP ” Search Forms och kopiera koden i kolumnen ’Shortcode’.

Vi har en guide om hur du lägger till shortcodes i WordPress om du behöver hjälp.

Med sökformuläret och filtreringsalternativen på plats kan dina besökare nu enkelt hitta det content de letar efter på din website.

Det förbättrar inte ej bara användarupplevelsen utan kan också uppmuntra dem att utforska olika kategorier och upptäcka mer av ditt värdefulla content.

Metod 2: Filtrera poster och sidor med custom code (avancerad)

Nästa metod kommer att använda customize-kod. För Beginnare kan denna process verka skrämmande, men vi har provat och testat koden för att se till att den fungerar smidigt med din website.

Dessutom kommer vi att använda WPCode, som är det bästa code snippet-pluginet på marknaden. Detta plugin gör det säkert att insert custom code utan att direkt hantera dina webbplatsfiler, så du är mindre benägna att bryta din site.

Det första steget är att installera och aktivera WPCode. För mer information kan du läsa vår guide om hur du installerar ett WordPress-plugin.

När det är gjort kan du gå till Code Snippets ” + Add Snippet i ditt WordPress-adminområde.

Sedan väljer vi ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Nu finns det 2 typer av kodsnuttar som du måste lägga till. Låt oss gå igenom dem en efter en:

Lägga till en WordPress-filterkod

Den här koden talar om för WordPress att filtrera användarens sökresultat baserat på de alternativ som de har valt i sökformuläret. Den kommer att fungera med en annan kodsnutt som skapar sökformuläret, som vi kommer att diskutera senare.

Först måste du ge ditt nya snippet ett namn. Det kan vara något så enkelt som ”WordPress Search Filter”.

Sedan måste du ändra ”Code Type” till ”PHP Snippet”.

Därefter kopierar du helt enkelt följande kod och klistrar in den i rutan ”Code Preview”:

function wpb_filter_posts($query) {
if ($query->is_main_query() && $query->is_search) {

// Category filter
if (isset($_GET['category'])) {
$category = get_category_by_slug($_GET['category']);
if ($category) {
$query->set('cat', $category->term_id);
}
}

// Published date filter based on URL structure
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$url_parts = explode('/', trim($url_path, '/'));
if (count($url_parts) >= 4 && is_numeric($url_parts[0]) && is_numeric($url_parts[1]) && is_numeric($url_parts[2])) {
$year = $url_parts[0];
$month = $url_parts[1];
$day = $url_parts[2];
$query->set('date_query', array(
array(
'year' => $year,
'month' => $month,
'day' => $day,
),
));
}

// Include posts without categories or tags
$query->set('post_status', 'publish');
$query->set('post_type', 'post');
$query->set('posts_per_page', -1);

// Include post types
if (isset($_GET['post_type']) && $_GET['post_type'] == 'page') {
$query->set('post_type', array('page'));
} else {
$query->set('post_type', array('post', 'page', 'custom_post_type'));
}
}
}

add_action('pre_get_posts', 'wpb_filter_posts');

Detta code snippet kontrollerar om användaren har valt några filter i formuläret för search. Om till exempel ett kategorifilter har valts kan koden identifiera den kategorin och endast visa posts som hör till den.

Den kan också filtrera resultaten efter datum genom att leta efter det specifika år, den specifika månad och den specifika dag som användaren har valt.

Slutligen kontrollerar och filtrerar koden resultaten baserat på om användaren vill se bara inlägg, sidor eller alla inläggstyper (inklusive anpassade inläggstyper).

När du har klistrat in koden går du vidare och bläddrar ner till avsnittet ”Infoga plats”. Som standard kommer ”Infoga metod” att vara ”Auto Insert” och platsen kommer att vara ”Kör överallt”.

Du kan låta dessa Settings vara som de är så att koden kan addas till ditt WordPress temas functions.php-fil och fungera korrekt.

Sedan aktiverar du bara code snippet och clickar på ”Save Snippet”.

Lägga till en WordPress Search-formulärkod

Nästa kod skapar ett formulär för customize search, som du kan embedda med en shortcode senare.

Du kan lägga till anpassad kod med hjälp av WPCode genom att upprepa samma steg. Sedan kan du namnge den här koden ”WordPress Search Form” och ändra kodtypen till ”PHP Snippet”.

Nu kan du klistra in kodsnutten nedan i rutan ”Code Preview”:

function wpb_filter_posts_form() {
$categories = get_categories();
$tags = get_tags();
$post_types = get_post_types(array('public' => true));
$output = '<form action="' . home_url('/') . '" method="get">';
$output .= '<input type="search" name="s" placeholder="Search...">';

// Category dropdown
$output .= '<select name="category">';
$output .= '<option value="" selected>All Categories</option>';
foreach ($categories as $category) {
$output .= '<option value="' . $category->slug . '">' . $category->name . '</option>';
}
$output .= '</select>';

// Tag dropdown
$output .= '<select name="tag">';
$output .= '<option value="" selected>All Tags</option>';
foreach ($tags as $tag) {
$output .= '<option value="' . $tag->slug . '">' . $tag->name . '</option>';
}
$output .= '</select>';

// Post type dropdown
$output .= '<select name="post_type">';
$output .= '<option value="all" selected>All Post Types</option>';
foreach ($post_types as $post_type) {
$post_type_object = get_post_type_object($post_type);
$output .= '<option value="' . $post_type . '">' . $post_type_object->label . '</option>';
}
$output .= '</select>';

// Year dropdown
$output .= '<select name="year">';
$output .= '<option value="">Select Year</option>';
for ($year = date('Y'); $year >= 2000; $year--) {
$output .= '<option value="' . $year . '">' . $year . '</option>';
}

$output .= '</select>';
// Month dropdown
$output .= '<select name="month">';
$output .= '<option value="">Select Month</option>';
for ($month = 1; $month <= 12; $month++) {
$output .= '<option value="' . sprintf('%02d', $month) . '">' . date('F', mktime(0, 0, 0, $month, 1)) . '</option>';
}
$output .= '</select>';

// Day dropdown
$output .= '<select name="day">';
$output .= '<option value="">Select Day</option>';
for ($day = 1; $day <= 31; $day++) {
$output .= '<option value="' . sprintf('%02d', $day) . '">' . $day . '</option>';
}
$output .= '</select>';
$output .= '<input type="submit" value="Search">';
$output .= '</form>';
return $output;
}

add_shortcode('wpb_filter_posts_form', 'wpb_filter_posts_form');

Den här koden skapar en shortcode som anropas [wpb_filter_posts_form], som addar ett formulär som allowar användare att searcha din site. Formuläret innehåller ett sökfält för keywords och flera dropdown-menyer för filtrering.

Koden hämtar kategorier, taggar och tillgängliga post typer från din site för sökfältets dropdown menyer. Användare kan välja specifika kategorier, taggar eller post typer för att begränsa sina sökresultat.

Dessutom innehåller koden dropdowns för år, månad och dag för ännu mer exakt filtrering efter datum. Slutligen add to en Submit knapp för att initiera search med de valda filtren.

Precis som i den tidigare koden kan du låta inställningarna för ”Insert Method” vara som de är. Sedan är det bara att aktivera koden och spara den.

Embed shortcode för sökformuläret

I det här skedet kan du add shortcode [wpb_filter_posts_form] till en post, page, theme template eller widget-ready area. För mer information kan du kontrollera vår guide om hur du lägger till shortcodes i WordPress.

I det här fallet kommer vi att add shortcode till en customize search page. Om du vill göra samma sak, gå vidare och skapa en new page i WordPress.

Customize sedan sidan search med alla typer av block som du behöver. Du kan till exempel add to images eller text för att instruera läsarna om hur de ska använda sökfältet.

Efter det kan du bara klicka på knappen ”+ Lägg till block” och välja blocket ”Kortkod”.

När du är klar infogar du helt enkelt kortkoden [wpb_filter_posts_form] i lämpligt fält.

Nästa steg är att trycka på knappen ”Publish”, ”Update” eller ”Save” för att göra ändringarna giltiga.

You should now see your new customize search form.

Så här gillar vi det på vår demo website:

Metod 3: Filtrera inlägg och sidor med Search & Filter Plugin (gratis)

Den sista metoden är att använda pluginet Search & Filter, som är gratis. Det är ett bra alternativ om du letar efter ett snabbt och enkelt sätt att aktivera sök- och filterfunktionen på din WordPress-bloggsida.

Vad du vill göra är att installera och aktivera Search & Filtrera plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering kommer pluginet att lägga till ett nytt menu item märkt ”Search & Filter” till din WordPress admin area. Om du klickar på det kommer du till pluginets användningssida med detaljerad dokumentation om hur du använder det.

Search & Filter plugin kommer med en shortcode som godkänner olika parametrar för att visa filtreringsalternativen. Du kan använda denna shortcode i ett post, page, eller inuti en text widget:

[searchandfilter fields="search,category,post_tag"]

Detta kommer att visa filtreringsalternativen med fält för search, kategori och tagged:

Det coola med pluginet är att du kan customize vilka filtreringsalternativ som är tillgängliga genom att editera shortcode tags.

Om du till exempel vill inkludera fält för kategori, tagged, post type och datum i sökfältet måste du använda den här shortcoden:

[searchandfilter fields="search,category,post_tag,post_types,post_date"]

Det är så här det gillar att se ut:

Om du inte vill använda dropdown-menyer kan du också använda checkboxes och add to etiketter för varje fält.

I shortcoden under säger vi till pluginet att visa sökfältet med checkboxar för alternativ för kategorier:

[searchandfilter headings="Select categories:" types="checkboxes" fields="category"]

Kolla in exemplet nedan:

Dessutom kan du berätta för pluginet att använda checkboxes för vissa filter alternativ och dropdown-menyer för andra i en shortcode.

Detta är den shortcode vi använde för att inkludera post typer, kategorier och tags i sökfältet. Vi bad pluginet att använda checkboxes för alternativet post types:

[searchandfilter headings="Post type, Category, Tag" types="checkbox, select, select" fields="post_types,category,post_tag"]

Se gärna tilläggets dokumentation för fler sätt att använda shortcode.

Bonus Tips: Add Live Ajax Search till din site i WordPress

Nu när du vet hur du låter användare filtrera posts och pages kan du ta det ett steg längre och förbättra sökupplevelsen med live Ajax search.

Live Ajax search använder realtidsteknik för att displayed sökresultat när användare skriver in sina sökningar. Det innebär att du inte behöver vänta på att en page ska uppdateras. Resultaten kommer att visas omedelbart, vilket gör sökprocessen mycket snabbare och bekvämare för dina besökare.

En snabbare search innebär att du kan hålla kvar användarna på din site längre, vilket ökar antalet sidvisningar och minskar avvisningsfrekvensen.

Den goda nyheten är att du enkelt kan add to denna funktionalitet till din site med ett gratis plugin som heter SearchWP Live Ajax Search. Du kan läsa vår WordPress tutorial om hur du lägger till live Ajax search på din website för mer information.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du låter användare filtrera inlägg och sidor i WordPress. Du kanske också vill kolla in vår guide om hur du skapar en webbkatalog och våra expertval av WordPress sökplugins för att förbättra din webbplats sökning.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.