wordpress添加模糊搜索与搜索优化

使用子比主题演示,如果你使用其他主题,请做出适当更改

效果

当无匹配内容时

当有匹配内容时

使用教程

elasticsearch用驼峰命名法为ElasticSearch,以下简称es

在服务器上完全可用,可以在雨云EP、宝塔虚拟主机上使用,但无论哪种方法,都必须要连接别处的ES实例或本地部署的ES实例

自建ES教程(docker)

此方法适用于低内存使用(目前宝塔自动安装需要15.0GB内存才可以)
使用Docker可以在低内存下运行(貌似1GB即可)

安装教程

创建一个给es用的网络

docker network create elastic

image
出现一串长长的ID返回即为成功

拉取es镜像

docker pull docker.elastic.co/elasticsearch/elasticsearch:8.10.2

image
上图为正在拉取中(拉取过程大概需要1分钟左右,取决于服务器的下载带宽)
下图为拉取成功
image
此镜像大约1.25GB

之后如果马上使用Docker run来创建容器的话,那么你绝大多数会收获一个error code 78

对此,我们首先需要修改vm.max_map

sysctl -w vm.max_map_count=262144

由于此修改重启后会失效,需要在 /etc/sysctl.conf 文件最后添加一行
执行vim /etc/sysctl.conf,到最后一行按字母“O”插入新的一行,输入

vm.max_map_count=262144

之后按ESC,输入“:wq”保存并退出
之后再docker run即可

docker run --name es01 --net elastic -p 9200:9200 -it -m 1GB docker.elastic.co/elasticsearch/elasticsearch:8.10.2

等待一定时间后会开始输出日志,等到出现这个提示后即创建成功
image
建议保留好这个页面的所有信息
接下来可以使用wordpress插件来连接ip:9200

可选-安装Kibana

拉取镜像

docker pull docker.elastic.co/kibana/kibana:8.10.2

直接docker run

docker run --name kib01 --net elastic -p 5601:5601 docker.elastic.co/kibana/kibana:8.10.2

image
看到这个输出即为成功,访问ip:5601/?code=xxxxxx即可
code即为上图中“Go to http://0.0.0.0:5601/?code=”后面的数字

访问后将之前部署es时最后输出的日志中有“kibana”字样的那一行密钥复制到中间的框框里,之后点击蓝色的验证按钮,会弹出一个验证码
image
验证码可以在kibana后台找到,如果访问时正确的输入了code后面的数字,那么不会弹出验证码


等待配置完成即可
如果长时间没有刷新,就手动刷新一下
之后跳到登录页面,我们来创建一个用户名和密码
终端里输入

docker exec -it es01 /usr/share/elasticsearch/bin/elasticsearch-reset-password -u elastic


输入y即可
之后在返回的内容中找到New value:
后面的就是密码
用户名是Password for the [elastic] user successfully reset.中方括号内的
之后登录即可

之后可以在右上角点击头像
image
再点击Edit profile
可以修改密码与深色模式
image
image

连接ES时,可以考虑使用公网ip或者反向代理一个域名(扩展性好),也可以修改至1p网络使用主机名连接(安全性好),也可以修改为host网络,使用127.0.0.1连接(安全性好,兼容性好)

对接wp

web服务器使用 雨云 提供的4核8g

首先要去装一个叫ElasticPress的插件
image

安装完成后启用,设置此插件
image

同时,如果你是使用宝塔面板部署网站,使用docker部署es,那么必须将es容器加入到host网络中,这样才能通过127.0.0.1这个回环IP访问

连接带密码的es实例可以用以下url格式:

http://用户名:密码@域名/ip:端口

替换$text = $text ? '在' . $text . '中' : '';return $text;之间的内容

do_action( 'ep_suggestions' );
    global $ep_htmlout_zib;
    $text .= '搜索[<a href="' . home_url('/?s=' . $s) . '"><b class="search-key focus-color">' . $s . '</b></a>],共找到<b class="focus-color">' . $wp_query->found_posts . '</b>个' . zib_get_search_types()[$type] . $ep_htmlout_zib;  

    $text = '<div win-ajax-replace="search-key"><div class="badg widget-tag-cloud author-tag">' . $text . '</div></div>';

找到wp-content/plugins/elasticpress/includes/classes/Feature/DidYouMean,打开里面唯一的一个php文件
将以下代码添加到54行左右

add_filter( 'ep_suggestion_html', function( $html, $terms, $query )  {

			$html = '<a>,';
			$html .= '<a class="widget-tag-cloud author-tag">你是不是要找' . esc_html__( '', 'elasticpress' );
			foreach( $terms as $term ) {
				$html .= '<a class="text-ellipsis but c-blue" href="' . esc_url( get_search_link( $term['text'] ) ) . '"> [' . esc_html( $term['text'] ) . '] </a>';
			}
			$html .= '</a></a>';

			return $html;
		}, 10, 3 );

继续下滑,找到这个文件的the_output函数(420行左右)修改此函数

image

public function the_output( $query = null ) {
		$html  = $this->get_original_search_term( $query );
		$html .= $this->get_suggestion( $query );
		#echo wp_kses_post( $html );
		global $ep_htmlout_zib;  
		$ep_htmlout_zib = wp_kses_post( $html );
		
	}

参考文献

Did-You-Mean——ElasticPress.io (zendesk.com) (参考过滤器与钩子)

PHP 变量 | 菜鸟教程 (runoob.com) (参考全局变量)

子比主题(参考CSS)

Actions - WordPress中文社区 (wpshequ.cn) (参考do_action)

保护输出 - WordPress中文社区 (wpshequ.cn) (参考全部)

1 个赞