Så här addar du ett search-formulär i en WordPress post

Vill du add to ett search-formulär till en WordPress post?

Genom att lägga till ett sökfält i innehållet i dina posts kan du hjälpa besökarna att hitta mer bra innehåll och få dem att stanna kvar längre på din site.

I den här artikeln visar vi dig hur du addar ett search-formulär till ett WordPress post.

Why Add a Search Form to Your Posts and Pages?

Om besökarna gillar ett post på din WordPress website, gillar de troligen att läsa mer. Genom att lägga till ett search-formulär i ett inlägg kan du hjälpa visitorerna att hitta fler bloggar som de är intresserade av att läsa.

På så sätt kan du öka dina sidvisningar och minska din avvisningsfrekvens.

Ju längre besökarna stannar på din website, desto större är chansen att de går med i din email list, lämnar en comment, gör ett köp, följer dig på social media eller vidtar andra positiva actions.

I den här guiden visar vi dig hur du addar standardformuläret för search i WordPress till dina posts. Om du vill använda ett customize-formulär istället, se vår Step-by-Step guide om hur du skapar ett custom WordPress search-formulär.

Med detta sagt, låt oss ta en titt på hur du enkelt kan add to ett search-formulär i en WordPress post. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1. Add a Search Form in a WordPress Post (Fungerar med alla teman)

Det enklaste sättet att add to ett sökformulär till dina posts är att använda det built-in Search blocket.

I den här guiden visar vi dig hur du lägger till blocket i ett post, men du kan också lägga till det på vilken page eller widgetar-klar area som helst på din site.

För att komma igång öppnar du helt enkelt den page där du vill add to ett search-formulär. I WordPress Content Editor klickar du på ikonen +.

I popupen skriver du in ”Search”. När det högra blocket visas klickar du för att add to the page.

Som standard använder blocket ”Search” för både etiketten och texten på knappen. Den här texten kommer att vara synlig för besökarna, så du kanske vill ersätta den med något mer beskrivande.

Om du till exempel lägger till sökfältet i en blogg i WordPress kanske du vill använda ”Search recent blog posts” eller liknande.

Du kan även använda texten på etiketten och knappen för att motivera dina besökare.

Om du till exempel har skapat en online store med hjälp av ett plugin som WooCommerce kan du använda något som gillar ”Hitta fler bra erbjudanden” eller ”Search efter liknande erbjudanden”.

You can also add to some placeholder text. Denna text kommer att försvinna automatiskt när besökaren börjar skriva.

För att lägga till en placeholder klickar du bara på ”Optional placeholder…” och börjar skriva.

Som standard kommer WordPress att använda ditt theme för att utforma sökfältet.

Du kan dock ändra bakgrundsfärgen och textfärgen på knappen med hjälp av inställningarna för ”Färg” i menyn till höger. Detta kan hjälpa din search att sticka ut från resten av din site.

När du är nöjd med hur blocket Search ser ut kan du gå vidare och antingen publicera eller update posten. Om du besöker din site kommer du nu att se search-fältet i postens content.

Du kan add to ett search-formulär till fler WordPress posts och pages genom att följa samma process ovan. För detaljerade instruktioner om hur du addar Search till en sidebar eller liknande section, vänligen se vår guide om hur du lägger till och använder widgets i WordPress.

Metod 2. Add a Search Form to All WordPress Posts(Block-Based Themes)

Om du använder ett blockbaserat theme som ThemeIsle Hestia Pro kan du add to ett search-fält till den template som WordPress använder för alla dina blogginlägg.

På så sätt kan du snabbt och enkelt add to ett search-fält till varje enskilt inlägg på hela din WordPress website.

För att öppna hela Site Editor, gå till Themes ” Editor i WordPress dashboard.

Som standard visar den fullständiga Site Editor ditt temas hemmamall.

För att se alla tillgängliga alternativ, select ”Templates” från menyn till vänster.

Här visas en lista över alla templates som ingår i ditt WordPress theme.

För att customize bloggmallen, gå vidare och klicka på ”Single”.

WordPress visar nu en preview av layouten för bloggen.

För att gå vidare och edit denna template, click på den lilla penna iconen.

Du kommer nu att se denna template i full-site editor.

För att gå vidare och lägga till ett sökfält klickar du på den blå ”+” icon.

I popupen som visas skriver du in ”Search” för att hitta rätt block.

Du kan nu dra blocket till den location där du vill visa search-fältet.

Om du vill customize blockets rubrik eller placeholder-text skriver du bara in det nya message i search-blocket.

När du är nöjd med hur blocket ser ut klickar du på ”Save” för att aktivera search-fältet.

Nu, om du besöker ett blogginlägg på din site, kommer du att se sökfältet.

Metod 3. Add a Search Bar to All WordPress Posts With Code (fungerar med alla teman)

Om du inte använder ett block theme men ändå vill att search-fältet ska visas i alla dina posts, måste du använda kod.

För att göra detta rekommenderar vi att du använder WPCode. Detta code snippet plugin gör det säkert och enkelt att insert custom code i dina theme-filer utan att direkt editera dem. På så sätt kan du lägga till olika code snippets utan att bryta din website.

Vad du vill göra är att installera WPCode plugin i WordPress. Du kan läsa vår Step-by-Step guide om hur du installerar ett WordPress plugin för mer information.

Gå sedan till Code Snippets ” + Add Snippet. Välj ”Add Your Custom Code (New Snippet)” och click the ”Use snippet” button.

Ge nu din nya customize-kod ett namn. Det kan vara något enkelt som gillar ”Search Bar on Blog Posts”.

Därefter ändrar du Code Type till ”PHP Snippet”.

I boxen Code Preview kopierar och paster du sedan in följande code snippet:

// Define the button text and placeholder text. You can customize these values as needed.
$button_text = 'Search'; // The text displayed on the search button
$placeholder_text = 'What are you looking for?'; // The placeholder text in the search input field

// Construct the search form HTML using the defined button text and placeholder text.
$search_form = '<form role="search" method="get" action="' . esc_url(home_url('/')) . '" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
                    <label class="wp-block-search__label" for="wp-block-search__input-2">' . esc_html($button_text) . '</label>
                    <div class="wp-block-search__inside-wrapper ">
                        <input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="' . esc_attr($placeholder_text) . '" value="" type="search" name="s" required="">
                        <button aria-label="' . esc_attr($button_text) . '" class="wp-block-search__button wp-element-button" type="submit">' . esc_html($button_text) . '</button>
                    </div>
                </form>';

// Output the search form HTML.
echo $search_form;

Den här koden add to ett grundläggande sökfält som liknar blocket search. Du kan customize knappen och texten för placeholder efter behov.

När du är klar rullar du ner och ser till att ”Auto Insert” är valt för Insert Method.

För Location, navigera till tabben ”Page-Specific” och välj den som bäst passar dina kriterier. För exemplets skull har vi valt ”Insert After Content”.

När du är klar gör du bara koden ”Activate” och clickar på ”Save Snippet”.

Du bör nu se något som gillar detta:

Upptäck tips och tricks för att förbättra WordPress Search

Blocket Search använder WordPress’ utvalda funktion för search. Denna är dock ganska limit och ej särskilt bra på att visa korrekta resultat. Du kan läsa mer om hur WordPress search fungerar i vår artikel.

I vissa fall kanske du vill att din WordPress utvalda funktion för search ska vara mer avancerad. Kanske vill du add to en funktion för att söka efter kategorier eller göra dina blogginläggs comments sökbara.

Det är där SearchWP kommer in i bilden. Detta tillägg för customize search ger dig fullständig control över WordPress site search så att du kan leverera mer exakta resultat till dina besökare.

SearchWP gör också alla delar av din site sökbara, inklusive PDF-filer, ACF-filer, textfiler, WordPress customize-fält och mycket mer.

När du har skapat ett formulär för custom search kan du add to det på valfri del av din website med hjälp av antingen ett block eller en shortcode.

Mer information finns i vår guide om hur du förbättrar WordPress search med SearchWP.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du addar ett search-formulär i ett WordPress post. Du kanske också vill lära dig hur man skapar ett kontaktformulär i WordPress eller kontrollera vårt expertval av de bästa tjänsterna för e-postmarknadsföring för småföretag.

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.