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

Vill du låta användare filtrera posts och pages på din website i WordPress?

Användare besöker ofta din website och letar efter en viss typ av content. De kanske är intresserade av dina senaste tutorials eller reviews av produkter. Vore det inte bra om de enkelt kunde filtrera ditt content för att hitta exakt det de letar efter?

I den här artikeln visar vi dig hur du låter användare filtrera inlägg och pages i WordPress med hjälp av en praktisk search- och filterfunktion.

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

Har du någonsin besökt en website som svämmar över av content, bara för att kämpa med att hitta det du behöver? Det kan vara en frustrerande upplevelse för användarna och leda till att de överger din site 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 utvald funktion för att söka och filtrera är inte bara bra för bloggar i WordPress. Det är också perfekt för webbplatser som gillar forum med tusentals threads. På så sätt kan användare söka efter rätt diskussion efter ä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, låt oss titta på 3 enkla metoder för att låta användare filtrera posts och pages på din WordPress site. Du kan använda snabblänkarna under för att hoppa till din önskade metod:

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 plugin. Om du inte är van vid detta har vi en guide till hur du installerar ett plugin för WordPress.

När du är aktiverad går du till SearchWP ” Settings. På tabben ”Allmänt”, enter your license key för att aktivera den.

Nu, head över till SearchWP ” Algoritm. Här kan du antingen edit standard search engine eller skapa en ytterligare en.

Standardmotorn tillåter användare att söka igenom Pages, Posts, Media och Comments, vilket är bra för en typisk WordPress-blogg.

Å andra sidan kan den extra search engine använda andra källor som Categories, Tags, Custom Post Types och Custom Taxonomies. Detta kan vara användbart för att skapa ett sök- och filterformulär för innehåll som inte är blogg, gillar ett e-handelsproduktfilter för WooCommerce-webbplatser.

I den här tutorialen kommer vi att klistra fast oss vid standardmotorn och helt enkelt justera dess Settings. För att göra det klickar du på ”Sources & Settings”.

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 Settings klickar du på ”Done”.

Step-by-Step 2: Finjustera din search engine

Nu kommer du att se en section för alla källor du valt (i vårt fall bara Pages och Posts).

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 klickar du på ”Add Rule”.

Nu är det bara att välja dropdown-menyn och välja ”Visa bara entries om” eller ”Uteslut entries 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 add to ytterligare en regel klickar du bara på knappen ”Add Rule” och upprepar samma process som ovan. När du är nöjd med hur reglerna är inställda klickar du på ”Done”.

Du kan nu upprepa samma process för de andra källorna för search entry.

När du är nöjd med search engine går du tillbaka högst upp på page och clickar på ”Save”.

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.

Head to SearchWP ” Sökformulär och klicka på ’Add New’.

Först ska du 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.

Välj sedan en layout.

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

Nu rullar du ner till avsnittet ”Custom Styling” och väljer både alternativen ”Category Search” och ”Advanced Search”. Detta säkerställer att ditt formulär innehåller alla funktioner för filtrering.

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 search engine 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 ”Type of Search” väljer du Posts and Pages.

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

För fältetiketten, gå vidare och enter en placeholder text som visas i sökfältet, gillar ”Vad letar du efter?

Om du valde ”Quick Search” tidigare kan du inkludera termer som användare ofta söker efter i objekten för snabbsökning.

I ”Advanced Search Filter/s” väljer du helt enkelt vilka filtreringsalternativ du vill erbjuda användarna, till exempel auktoriseringar, 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 inställt, rulla säkerhetskopiera.

Sedan klickar du på ”Save” för att skapa ditt search-formulä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.

Öppna först den page eller det post du vill add to formuläret. Klicka sedan på ikonen ”+ Add Block” och search efter ”Search Form”.

I sidebaren Block Settings väljer du det formulär som du skapade i dropdown-menyn.

Publicera eller updating sidan för att se search formuläret live.

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, hitta shortcode 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 WPCode. För mer information kan du kontrollera vår guide om hur du installerar ett plugin för WordPress.

När det är gjort, gå till Code Snippets ” + Add Snippet i din WordPress admin area. Sedan väljer du ”Add Your Custom Code (New Snippet)” och klickar på knappen ”Use snippet”.

Nu finns det två typer av code snippets du måste add. Låt oss gå igenom dem en efter en:

Lägga till en WordPress-filterkod

Den här koden säger till WordPress att filtrera användarens sökresultat baserat på de alternativ de har valt i sökformuläret. Den kommer att fungera med ett annat code snippet som är responsivt för att skapa sökformuläret, som vi kommer att prata om senare.

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

Ändra sedan Code Type till ’PHP Snippet’.

Följer, kopiera följande kod och klistra in den i Code Preview box:

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 bara vill se inlägg, pages eller alla posttyper (inklusive custom post types).

När koden har klistrats in, fortsätt och rulla ner till sektionen ”Insert Location”. Som standard kommer infogningsmetoden att vara ”Auto Insert” och platsen kommer att vara ”Run Everywhere”.

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.

Allt du behöver göra är att upprepa samma steg för att add to custom code med hjälp av WPCode gillar tidigare. Sedan kan du namnge den här koden ”WordPress Search Form” och ändra code type till ”PHP Snippet”.

Klistra nu in code snippet under 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.

Gilla i den tidigare koden, du kan lämna inställningarna för Insert Method som de är. Aktivera sedan koden och save 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.

Därefter klickar du på knappen ”+ Add Block” och väljer blocket ”Shortcode”.

När du är klar infogar du bara shortcoden [wpb_filter_posts_form] i lämpligt fält.

Tryck på knappen Publicera, Updated eller Save för att göra dina ändringar.

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 tillgängligt gratis. Det är ett bra alternativ om du letar efter ett snabbt och enkelt sätt att aktivera funktionen search och filtrera på din WordPress blogg page.

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"]

Kontrollera exemplet under:

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 posts och pages i WordPress. Du kanske också vill kontrollera vår guide om hur du skapar en webbkatalog i WordPress och vårt expertval av nödvändiga plugin-program för WordPress för att få din website att växa.

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.