wordpress 在 XinTheme 下 使用 Search & Filter Pro

今天更新个和C4D没关系的内容。。主要分享下，在遇到一件自己没做过的难题时，自己去学习研究的过程。

 

如果把内容换成C4D相关的话，可以理解成：我现在想要在C4D里，用阿诺德（没用过的不熟悉的渲染器）实现某个效果，但是阿诺德做不了这个效果，需要和一个C4D的插件配合才行，但是这个插件是基于C4D设计的，没有考虑和阿诺德的兼容，再加上全网搜索这个插件，就只有资源下载购买，没有任何教程。。

于是在这个情况下，去学习研究去实现这个效果。。

 

具体事情是这样的，前几天我制作了RS的中英文帮助文档。目前已经差不多了，除了有些内链要修改下，其他都不影响查看使用了。

RS帮助文档：RS帮助文档 - 苦七君 (kuqijun.com)

OC帮助文档：Oc帮助文档 - 苦七君 (kuqijun.com)

C4D帮助文档：C4D帮助文档 - 苦七君 (kuqijun.com)

目前苦七君网站（kuqijun.com）可以同时搜索到这些帮助文档的中英文内容，也可同时搜索到，C4D问答教程，以及一千多篇优质作者的教程文章。总共文章数量已经7000+

 

文章多了，搜索就有点不方面的，之前就一直想要改善下网站的搜索功能，现在正好时机到了。

 

于是我去百度，wordpress搜索插件、wp搜索增强，之类的关键词。。看到了一些搜索插件，其中有一个Xin Theme作者推荐的插件叫search everything，听名字就觉得很厉害，于是试了下。。发现不是自己想要的。。搜索看到的很多插件功能都很强，但是他们重点在于增强可搜索的内容范围。。

但是我想要的主要是对于结果的筛选。。

于是重新百度，wp搜索筛选，就看到了这个Search & Filter Pro，然后有去搜索下了这个插件名字，基本结果全都是二道贩子转卖的，没有一篇教程，标题也都一样。。Search & Filter Pro终极筛选插件。。顺便找到了这个插件的官网，里面有教程，基础的安装介绍。。于是下载开始试了下这个。（20美元）

 

首先下载安装启用后，插件菜单很简单，搜索表单，设置，序列号，系统状态。

首先按照基础介绍添加一个表单，这个表单的意思是，我在这个表单里面先缓存好所有的文章，然后按照要求设置一些筛选选项，这样你就可以在这个表单里面来搜索，而不用去直接搜索wp文章的数据库。

1、设置标题

2、选择表单的内容，一般只要选择文章即可。

3、创建表单工具，一开始用的时候并没有明白这是什么意思，官网只写步骤也没具体介绍，主要是自己以前没用过，就像你不知道oc的工作原理，都不知道为什么要创建hdr和材质球一样。。

其实这里可以理解成，我们现在是创建一个表单，这是一个单独的表单，和wp，和当前的主题都没关系，这个插件利用这个表单把你为所有文章数据单独收集了起来，然后在单独在一个页面上展示出来。

第一步标题没什么意义，就只是个项目名字的意思，第二步是你要收集这个网站的哪些内容到这个表单里面。

现在我们收集好内容了，第三步就需要选择在这个页面上放什么内容。

比如下面我放了一个search（搜索框，输入关键字的框），一个submit button（搜索按钮，输入关键字后需要点击的那个按钮）

一个Tag（筛选类型）

第一个第二个就是常规的搜索功能，其他的tag，category之类的都是筛选类型，比如按照标签筛选，按照分类筛选，还可以按照时间，形式，作者或者控制每页显示的文章数量。

4、显示结果和位置，上面几步内容我们收集好了，页面要放置的功能也设置好了，下面就是设置我们在哪里把这些内容显示出来。

在第二步收集文章地方的第二个选项卡，有个显示结果，里面选择使用短代码，显示结果的方式有四五种，短代码的意思是，把这个整个表单生成一个短代码，然后把这个短代码随便放到某个文章内容里面，就会直接让那篇文章变成一个带有搜索筛选功能的页面。

选择短代码后，在右侧会有三个段代码，第一个代表搜索工具，就是上面第三步我们放置的search、submit button、tag。

第二个代表搜索结果，就是展示出我们经过搜索筛选的结果。第三个和第一个一样，只是格式不一样。

5、新建一个页面。上面我们选择了显示结果的方式是使用短代码，我们需要把短代码放到某个页面里面，所以这里我们新建一个页面，复制上面的第一个第二个短代码粘贴到页面内容里，页面标题随便，页面的固定链接要注意，这里我们设置的是search，所以在上面设置显示结果的地方，也要填写页面地址/search

完整地址是 https://kuqijun.com/search，不过这里我们只需要写后缀/search就行了，会自动识别网站的主域名的。

6、最后的就是，发布这个页面，发布刚才创建的表单。。然后打开这个页面。。就会发现一个可以搜索筛选功能的页面了。。。第一个发布表单后，内容可能没有收集全，在这里可以看到收集缓存的过程。如果没有缓存完，这里会有进度条。

 

现在，一个基础的搜索删选的功能就已经做好了。。同时，发现解决疑难杂症的时候也到了。。

 

首先默认的搜索页面css是不太好的，我们可以和原网站的css结合去修改插件的css代码以及显示结果的loop代码。

.../plugins/search-filter-pro/public/assets/css/search-filter.min.css

...//plugins/search-filter-pro/templates/results.php

 

然后我们想要搜索结果按照文章阅读量排序，需要在表带设置里面的posts选项卡里面这样设置。

设置是没问题的，但是这样设置后，搜索结果由原来的七千多篇变成九百篇了。。

还原这个排序方式测试下，数量又对了，说明是因为这个排序方式造成的。难道是views值为0的文章，都没有显示？

这里就检查看了下，到底是哪些文章显示了，哪些没有显示。

最后发现，确实是有一些文章是之前直接采集过去的，再加上这些文章都是直接跳转到原文链接查看到，导致在本站是没有阅读量的，所以如果想正常显示的话，需要把每篇文章的views值增加一些，不能是0。

一篇篇文章去搜索肯定不现实了，通过几次百度筛选发现，可以在数据库通过SQl批量让所有views的值增加

UPDATE wp_postmeta SET meta_value = meta_value+100 WHERE meta_key = 'views';

测试了下发现，每篇文章的views值确实增加了，但是搜索结果还是九百多篇。。

然后在数据库直接搜索views发现对应的数值结果也不对，正常views的数量应该和文章的总数量一样。。但是搜索到的却很少。。这说明很多文章压根就没有views值。

 

所以通过百度又得到，SQL批量给所有文章增加新的自定义字段和值。

insert into wp_postmeta (post_id, meta_key, meta_value)select ID, 'views', '10' from wp_posts where post_type = 'post';

这里本来担心这样新增，会不会把原来已经有views值的文章给覆盖掉了，，所以操作前先提前备份了一下数据库。。然后进行操作。。

索性没什么问题，这样操作的结果就是，原来没有views字段的文章自动添加了这个字段并且值为10，已经有views字段的文章，值增加了10。

现在搜索结果按照阅读量排序也没问题了。

 

下面问题是，现在这个搜索页面，是一个新页面，怎么把网站原来的搜索页面变成这个页面的。。

原来的搜索页面是有特定的搜索模板的，虽然Search & Filter Pro显示结果的方式，除了使用短代码，还可以用Archive模板页面，自定义页面等等。也可以把短代码放到小工具里面。。但是不管哪样操作，只实现了在这些页面展示结果。。并没有改变原来网站的搜索引擎。。

 

在原网站的搜索引擎上搜索，还是在原来的搜索页面上。。上面的各种显示结果研究了大半天，最后脑子转过来了，这个重点不是在于显示的页面，而是怎么改造这个搜索框。

把原网站的搜索框变成Search & Filter Pro的搜索框。

正常可以调用小工具，在小工具里面添加搜索框短代码实现，，但是原网站的搜索框是在header上面的，用小工具不是很友好。但是短代码又不能直接写在网页代码上，这个插件的帮助文档上只有自定义结果页面的方法，并没有自定义搜索框的介绍。。

 

于是我就打开了原网站搜索框的代码研究了下。

这段代码是原网站的搜索功能，当搜索某个关键词的时候，得到的地址是这样的，

https://kuqijun.com/?s=测试

Search & Filter Pro 插件的搜索代码查看了也没用，不能直接用，只能调用它，所以也改不了。。或许可以用，但是代码太多，不美观且不能随后台变化。它的搜索结果地址是这样的。

https://kuqijun.com/search?_sf_s=测试

其实/search就是之前我们设置的页面，然后源搜索代码的第二行，其中

<?php bloginfo('url'); ?>
就是表示，网站的主域名
https://kuqijun.com/

如果我们改成这样
<?php bloginfo('url'); ?>/search?_sf_s=

会发生什么的呢？

 

修改之后，理想中我们想的是，搜索的关键字自动填充到网址的最后，实现了搜索。。但是这样修改后得到的结果确实

https://kuqijun.com/search_sf_s=?s=搜索

我们发现向网址中添加？是没有用的，而且原搜索代码会自动在最后加上?s=

因为不太懂这个input传递表单的代码，去百度学习了下。没有找到关于传递表单到另一个网址上的，倒是找到了A页面input框内容传递到B页面的办法。

 

百度不到之前那个文章了，那个文章是把A页面input的name的值，传递到B页面某个id类的值。

 

因为我们不是要传递到另一个页面某个id类的值上，我们是要传递到网址上，所以这个name的值很重要。。这时就去看了下原搜索代码的input里面确实有name="s"

也就是原搜索页面地址中的

https://kuqijun.com/?s=测试

其中的s，是name的值，？和=号都是搜索自动添加的不用去问

这样的话，那就简单了。我们只需要改成这样。

<form method="get" class="search-form inline" action="<?php bloginfo('url'); ?>/search">
<input autofocus="autofocus" type="search" class="search-field inline-field" placeholder="在此输入关键词，尽量简洁……" autocomplete="off" value="" name="_sf_s" required="true">
<button type="submit" class="search-submit"><i class="iconfont icon-sousuo"></i></button>
</form>


其中<?php bloginfo('url'); ?>后面加了/search，修改了网址的路径

name的值改成了_sf_s

这样搜索后得到的页面就是

https://kuqijun.com/search?_sf_s=测试

而最终得到的这个地址，就是上面 Search & Filter Pro插件的搜索地址了。。。我们通过这个办法，把原来的搜索框改造了，其实并没有改造成插件的搜索框，只是修改成了，在原搜索框搜索的时候，自动跳转到插件的搜索页面搜索同样的内容 。。因为本来搜索就是需要跳转到一个结果页面的，所以整个过程并没有造成额外的计算负担。。是个完美的解决办法。

 

当解决上面这个问题的时候。。我就放心的去睡觉了。。主要问题解决了，其他的问题也就不是事情了。。

在这个过程中其实还有很多其他设置上的小问题，这些都和代码无关研究研究多试试就好了。

 

最后就是，如果要是更新这个插件需要注意的事情。

 

在插件的设置上没什么大问题，即使表单设置不在了，重新设置下就好了 不麻烦。

最重要的是备份好开头的这个两个文件，更新完后替换下这两个文件，然后再重新修改下上面最后的搜索代码。

.../plugins/search-filter-pro/public/assets/css/search-filter.min.css

...//plugins/search-filter-pro/templates/results.php

 

 

现在可以愉快的去搜索筛选试试了。。

https://kuqijun.com/search