WordPress教程

WordPress主题开发中定制个性搜索功能思路

阿里云

前端时间在给客户开发一个 WordPress 外贸主题的时候,对搜索功能有多个个性化需求,一个是搜索指定时间段儿内包含某个关键词的文章(文章类型 post),另外一个是只搜索包含某个关键词的产品文章(文章类型 product),当然还有一个不指定条件的默认搜索功能,默认搜索功能就不说了,这个大家应该都懂。

就拿上面这种搜索指定时间段儿内包含某个关键词的文章的搜索功能来说吧。首先,默认的搜索框代码是:

  1. <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  2. 	<input type="search" name="s" value=""/>
  3. 	<button type="submit" class=""></button>
  4. </form>
也想出现在这里?联系我们
创客主机

用心的朋友应该会发现,使用默认的搜索输入关键词搜索后,搜索结果页面链接的后缀格式是?s=关键词。

注意一下链接中的 s,是不是和搜索框中的输入关键词的 input 输入框的 name 值是一样的?是的,这其实就是通过链接传递过来的内容。而你输入的关键词,其实就是 input 中的 value 值。我们知道 wordpress 搜索结果呈现也是 search.php 这个文件,这个文件里的代码其实只是做了个判断是否有文章,有的话按照指定格式显示出来,换句话说这个文件的默认代码和 archive.php 里的代码是一样的,因为这个文件就是 WordPress 默认的搜索结果页,就像 category.php 是默认的分类页一样,他会默认的显示包含你搜索的关键词的文章列表。

那么如果我们需要再增加一些搜索条件限制的话应该怎么操作呢?其实很简单,先修改搜索框代码,比如我们要加上开始时间和结束时间限制,那么就可以修改如下:

  1. <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  2.     <input type="search" name="s" value=""/>
  3.     <input type="search" name="kssj" value=""/>
  4.     <input type="search" name="jssj" value=""/>
  5.     <button type="submit" class=""></button>
  6. </form>

我们可以看到,里面多了两个 input,两个的 name 分别是 kssj(开始时间),jssj(结束时间),当然这里面是让用户直接输入时间的,这样用户体验并不好,你可以使用相关 js 做成日期选择的形式,这里就不多介绍了。

搜索框做好以后,你可以输入关键词、开始时间、结束时间都输入信息后,点击搜索,这个时候会跳转到一个新的页面,当然,这个时候并不会按照你输入的时间段儿显示。先不急,看一下浏览器中的链接格式是不是和默认的搜索结果页不同了?是的,变成了后缀是?s=关键词&kssj=开始时间&jssj=结束时间。肯定是的,这也就是说你在搜索框中输入的搜索条件和关键词都已经通过链接传递到了搜索结果页面,我们可以很轻松的通过$_GET['name 值']来获取到对应的关键词或搜索条件,根据上面的链接我们可以得到 $_GET['s] (关键词)、 $_GET['kssj] (开始时间) 、 $_GET['jssj] (结束时间) 。

能获取到这些信息,我们仔细想一下,那不就是在搜索结果页面使用文章查询功能,查询到符合这些条件的文章然后用列表的形式显示出来就行了吗?代码如下:

  1. <?php 
  2.    $args = array(
  3.       'post_type' => 'post',//指定文章类型,也可以不指定
  4.       'date_query' => array(  //日期筛选项 
  5.           array(   
  6.              'after'     => $_GET['sdate'], //开始时间
  7.              'before'    => $_GET['edate'], //结束时间  
  8.              'inclusive' => true, //是否包含开始时间和结束时间当前时间的文章  
  9.            ),                                             
  10.        ),
  11.        's' => $_GET['s'],  //搜索的关键词 
  12.     );                
  13.     $the_query = new WP_Query( $args );
  14. ?>
  15. <?php if ( $the_query->have_posts() ) : ?>
  16. <?php while($the_query->have_posts()):$the_query->the_post();?>
  17. 这里是循环输出的文章列表样式,想怎么弄怎么弄
  18. <?php endwhile;?>
  19. <?php else :?>
  20. 没有相关文章
  21. <?php endif;?>

代码就是上面的代码,用在什么地方呢?把 search.php 中循环输出列表的地方换掉就行了。

那另外一种,就是搜索指定文章类型的文章,比如只搜索产品(文章类型 product),同样的道理,先修改搜索框代码,然后搜索结果页通过文章查询来显示就行了。

当然,我们知道默认的搜索结果页只有一个页面模板 search.php,有时我们需要不同的搜索,结果页呈现不同的样式,这个时候怎么办呢?也很简单,根据你所有的搜索然后先创建不同的搜索结果页,然后把 search.php 文件的内容改成一个判断,不同的条件,加载不同的搜索结果页模板就行了。比如,产品(文章类型 product)和文章(文章类型 post)结果页使用不同的模板,那就可以把 search.php 改成:

  1. <?php 
  2. if ($_GET['post_type']=='product') { //前提是搜索框代码中有一个name="post_type"的input,value要设置为product
  3.     get_template_part( 'search', 'product');
  4. } else {
  5.     get_template_part( 'search', 'default');
  6. }
  7. ?>

最后,强调一下,上面所说的是一个思路,大家可以根据这个思路去定制自己不同需求的搜索功能,比如搜索指定 id 的文章,指定标题的文章等等。使用方法上面的也只是个参考,不同的需求代码写法不同,但是思路是一致的。希望这些对有类似需求的朋友有所帮助,如果有什么不明白的,也可以联系网站客服 qq 进行咨询。

WordPress 主题开发中定制个性搜索功能思路

已有 392 人购买
查看演示升级 VIP立刻购买

收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!