如何创建自定义 WordPress 搜索表单(分步)

技术教程 2021年11月5日

1263 0 7

您是否需要为您的 WordPress 网站创建自定义搜索表单?

搜索是大多数用户在您的网站上查找内容的方式.如果他们无法轻松找到他们想要的内容，那么他们可能会转到另一个网站.

在本文中，我们将逐步向您展示如何通过创建自定义 WordPress 搜索表单来改进您的网站搜索.

Why Create a Custom Search Form for WordPress?

The default WordPress search feature is quite limited and doesn’t always find the most relevant content.

As you add more content to your site, you’ll need better ways to help your website visitors easily find the content on your site.

This becomes even more important if you’re running an online store or a membership site where you want users to find the right product or course.

You may also want to customize the search algorithm to show specific content higher than others, or customize the appearance of your search form.

That being said, let’s take a look at how to customize the WordPress search form and results page.We’ll cover two methods which you can choose using the links below:

How to Customize WordPress Search Form and Results

SearchWP is the best custom search plugins for WordPress.It’s easy to use, gives you complete control over your search results, and is more accurate than the default WordPress search.

The first step is to install the SearchWP plugin.For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » SearchWP page and then click on the ‘License’ menu option.

Then, enter your license key in the ‘License’ box and click the ‘Activate’ button.You can find this information in your account on the SearchWP website.

Customizing the Search Engine

Once you’ve done that, you need to click on the ‘Engines’ menu option.Once there, you should click the ‘Add New’ button to create a new search engine.

This will create a new search engine called ‘supplemental’.To change the name you need to click the ‘Sources & Settings’ button.

This takes you to a page that also allows you to choose whether to search posts, pages, media files, comments, and users.We’ll leave the default settings as they are.

We’ll change the search engine’s name to ‘Custom’.Go ahead and type that into the ‘Engine Label’ field.

Notice that the ‘Keyword Stems’ option has been selected for you.This will disregard word endings when your users make a search so that the most relevant search results will be displayed.

Make sure you click the ‘Done’ button when you’re finished.

The settings page for the search engine contains sections for Posts, Pages, Media, and Users.In each section, you can give priority to different post attributes, or include only certain categories or tags in your search results.

You can do this by adjusting the ‘Attribute Relevance’ sliders.

These change how the search engines value and rank content.For example, if you want to value the post title higher than the content, then you can adjust the slider accordingly.

You should work through each section and make any adjustments to the sliders that you like.

You can also create rules for each section that determine whether certain content is included or excluded from the search results.

For example, you could allow your visitors to easily search for content about the same topic as they were just reading about.Or in an online store, you might help your customers to quickly find other products in the same category.

Go ahead and click the ‘Edit Rules’ button in the Posts section.

You’ll notice that you can create rules about the post’s categories, tags and format, the publish date, and the post ID.

You might want to let your visitors search specific website categories.For instance, you can add a category search feature to your archive pages to help your visitors quickly find what they’re looking for.

To learn how to do that, refer to Method 1 in our step by step guide on how to search by category in WordPress.

Once you’re done customizing your default search engine settings, make sure to click the ‘Save Engines’ button at the top of the page to create your custom search engine.

Adding the Search Form with Shortcode

The SearchWP Shortcodes Extension simplifies the job of adding your new custom post search form to your WordPress site.

Simply visit the SearchWP Shortcodes Extension website and then click the ‘Download available with active license’ button.

After that, you need to install and activate the extension the same way you installed the plugin above.

Now you can add a custom search form to your posts, pages, and widgets using shortcodes.If you haven’t used shortcodes before, then you can learn more in our beginner’s guide on how to add a shortcode in WordPress.

Simply edit a post and place your cursor where you want to add the search form.After that, click the plus ‘+‘ Add Block icon to bring up the blocks menu.

Next, type ‘html’ into the search box and then click on the ‘Custom HTML’ block to add it to the post.

Once you’ve added the new block, you should paste the following shortcodes and HTML into it.

This code will add your custom search form to the post, create a section to display the search results, show a no results message if necessary, and add pagination if the results go into multiple pages.

If you gave your search engine a different name, then you’ll need to change to your own engine name in four places.

You might also choose to change the text on the search button to something more descriptive by editing .The rest of the code can stay the same.

Make sure you click Publish or Update to save your post and make it live.

To see the search form in action, simply view the post on your WordPress website.This is how it looks on our demo site running the Twenty Twenty-One theme.

Adding Live Ajax Search

Live Ajax search improves your search form by automatically providing drop down search results as the user types their query.

The easiest way to add Ajax live search to WordPress is the free SearchWP Live Ajax Lite Search plugin, since it enables live search automatically.

For step by step instructions on how to install it, see our guide on how to add live Ajax search to your WordPress site.

Using Advanced Settings for SearchWP

Now you should navigate to Settings » SearchWP and click on the Advanced tab.On this page, you can enable some settings that will make it easier for your users to find what they are looking for.

Check any of these options that you would like:

Partial matches will also display results that don’t quite match the term that is being searched for.
Automatic "Did you mean?” corrections will suggest a slightly different search term that will match more posts on your website.
Support "quoted/phrase searches” will allow your users to use quotes when searching for exact phrases.
Highlight terms in results will make it easier for your visitors to find what they are looking for in the search results.

Styling the Search Form and Results Page

Your WordPress theme controls the appearance of your website, including the search form and search results page.They store the formatting rules for all elements of your WordPress site in a CSS stylesheet.

You can add your own custom CSS to override your theme’s style rules.

If you haven’t done this before, then see our article on how to add custom CSS in WordPress for beginners.

For example, here is some custom CSS that will work with most themes.The first section changes the style of the search form and the second section customizes the search results.

You can change the formatting in the code to suit your own site.You can also delete any lines that you don’t wish to modify.For example, if you don’t want to change the search form’s height and width, then simply delete those lines.

Here are screenshots of our demo website before and after adding the custom CSS.