制作出色的自定义 WordPress 搜索表单的 3 种方法

已发表: 2022-11-23

WordPress 是世界上最受欢迎的内容管理系统 (CMS)。 除了是一个功能强大且超级灵活的工具之外，它还非常易于使用。 没有网页设计或编码经验的人可以使用 WordPress 在几分钟内启动他们的网站。

用户将访问您的 WordPress 网站以搜索他们感兴趣的内容。搜索栏可以帮助他们做到这一点。 如果您的网站没有，人们将很难找到他们正在寻找的内容。 这种挫败感导致人们离开您的网站并前往其他地方。

那不行！

在本文中，我们将向您展示如何将自定义 WordPress 搜索表单集成到您的网站中。

  • 什么是自定义 WordPress 搜索表单？
  • #1 应用插件
  • #2 修改代码
  • #3 使用自定义 CSS 设置搜索表单和结果页面的样式

什么是自定义 WordPress 搜索表单？

WordPress 已经内置了本机搜索功能。 然而，默认的搜索工具非常有限并且不是很“智能”。 它并不总能找到您要查找的内容。

默认的 WordPress 搜索功能足以满足内容不多的新网页或小型网页。

但是随着内容数据库的增长，安装更好的搜索工具对于帮助访问者浏览您的网站非常重要。 如果您经营电子商务网站，一个好的搜索工具就更为重要。 它有助于将潜在客户引导至适合他们的产品。

您可能还希望您的搜索工具以特定顺序显示结果。 例如，最受欢迎的文章或项目排在第一位。 默认搜索工具不允许您这样做。 相反，您必须手动编辑搜索算法。

最后但同样重要的是，自定义搜索工具可以风格化以反映您网站的审美或品牌！

pfo-custom-wordpress-search-form-example

什么是 get_search_form 函数？

get_search_form指的是在您的网站上显示搜索表单的功能。 您可以在 WordPress 管理面板的“外观”>“小部件”选项卡中找到它。

它管理搜索表单小部件和您网站上需要搜索功能的任何其他页面。 如果没有这个功能，您的网站就如同完全没有搜索工具一样好。

如何在 WordPress 中自定义搜索表单

您可以使用许多不同的方法来自定义 WordPress 中的搜索表单。 这取决于您的编码技能水平以及您愿意在此任务上花费多少时间。

#1 应用插件

插件是在您的网站上启动和运行自定义 WordPress 搜索表单的最简单、最快的方法。 例如，Ivory Search 是一个免费插件，专门用于增强 WordPress 搜索工具的功能。 您可以添加和编辑新的搜索表单并执行不同类型的搜索。

此外，使用短代码，您可以将搜索栏放置在网站上您想要的任何位置（例如页眉、页脚、菜单栏等）。

pfo-ivory-search-plugin

如果您没有太多编码经验，我们强烈推荐这是一个简单的工具。 虽然它不像编写搜索工具那样通用，但对于基本使用来说应该足够了。

#2 修改代码

有两种方法可以在您的 WordPress 站点的 .php 核心文件中从头开始构建搜索表单：使用函数或使用模板。

有一个功能

您可以使用add_filter挂钩将默认的 WordPress 搜索工具替换为自定义搜索工具。 在您的functions.php文件中，将以下代码添加到堆栈中：

 函数 custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' 。 __（ '搜索：' ） 。 '</标签>
<input type="text" value="' .get_search_query() .'" name="s" />
<input type="submit" value="'.esc_attr__( 'Search' ) .'" />
</div>
</形式>';
返回$表格；
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

这段代码所做的是将您的自定义表单存储在$form变量中，由于add_filter挂钩，它将替换默认的 WordPress 搜索工具。

您可以通过编辑$form变量值中的标签、文本、ID 和其他元素来进一步自定义上述代码。

使用模板

如果您不想修改functions.php文件，另一种方法是使用搜索表单模板。 创建自定义 WordPress 搜索表单，然后将其作为searchform.php添加到您的主目录中。 WordPress 将自动使用自定义搜索表单而不是默认的。

为此，请打开您选择的 IDE 并创建一个新文件。 将其命名为“searchform.php” 。 将以下代码粘贴到编辑器中：

 <?php
/* 自定义搜索表单 */
？>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="输入组">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</表格>

根据您的喜好修改上面的代码！

#3 使用自定义 CSS 设置搜索表单和结果页面的样式

现在您已经启动并运行了自定义搜索功能，下一部分是设置它的样式。 默认外观非常无聊，带有普通无衬线字体的白色文本框。

如果你想改变它，最好的办法是通过几行 CSS 代码。

此 CSS 代码模板与绝大多数 WordPress 主题兼容。 只需通过您的 WordPress 管理面板复制并粘贴即可。

 .searchform {
字体系列：宋体；
字体大小：16px；
背景：#ace5e3；
颜色：#ffffff；
边框：1px 实心#61c3c0；
填充：10px；
高度：90px；
宽度：600px；
}

。搜索结果 {
字体系列：宋体；
字体大小：16px；
背景：#ace5e3；
颜色：#000000；
边框：1px 实心#61c3c0；
填充：10px；
宽度：600px；
}

根据您的喜好修改代码中的变量。 您可以选择字体、字体大小、背景颜色、边框等。 如果代码中有任何您不想更改的元素，只需删除该行即可。

例如，如果您不想更改搜索表单的字体系列，则只需删除“font-family:arial;” 线。

立即创建您自己的自定义 WordPress 搜索表单！

大多数人都可以使用插件生成的简单搜索表单。 但是，如果您更擅长编码并希望将高级功能集成到您网站的搜索表单中，那么上面的代码模板可能会很有用。

自定义 WordPress 搜索表单是一个非常简单的功能，但在使您的网站更加用户友好方面非常有效。 通过自定义字段 WordPress 功能进行表单搜索可以帮助您吸引更多访问者，将他们转化为常客，如果您经营电子商务网站，还可以转化为付费客户。

您可以在此处了解有关添加智能 WooCommerce 产品搜索的更多信息。

我们希望本指南对您有所帮助，并希望您在阅读本文时已经启动并运行自定义搜索表单！