WordPress集成多种站内搜索、百度嵌入式搜索，并伪静态化的方法

建站笔记1年前 (2023)发布小萝卜头

338 0 0

分享前，先吐槽一下：最近阿里云爆出了云盾误删除 ECS 文件，最后只能用回滚来解决的坑爹玩意儿。刚听到这个消息后，连忙看了下自己的 ECS，没发现有明显的异常。
这 2 天慢慢的发现近期修改的一些代码都被还原了，比如明明去掉了评论审核后的通知功能，今天一个朋友 QQ 告诉我收到的邮件中的文章地址不对，我看了网友的截图，就知道是评论的审核通知邮件。看了下代码，果然之前的注释都去掉了。又比如，我明明屏蔽了某插件的某个菜单，结果今天又看到了。
看来多少还是有所波及，确实是回滚了！还好，最近没怎么折腾代码，否则都白费了！
一、综合搜索
还是在用 HotNewsPro 主题的时候，张戈博客就集成了 3 个站内搜索，分别是百度、360 和默认搜索。换到 Begin 主题之后，也在第一时间就把之前的功能平移了过来。
从一开始就有朋友要我分享部署方法，实在是太忙，心有余而力不足。其实，稍微有点扒站能力的就能把这玩意抠走。。。
二、修改代码
①、搜索伪静态
何为搜索伪静态？
众所周知，WordPress 默认搜索地址为 http://www.domain.com/?s=keyword 这是一个动态地址，和全站伪静态有点格格不入，而去还不利于静态缓存。
很简单，将以下代码加入到主题下的 functions.php 当中即可：

//默认搜索伪静态
function wp_search_url_rewrite() {
if ( is_search() && ! empty( $_GET['s'] ) ) {
wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) . "https://zhang.ge/");
exit();
}
}
add_action( 'template_redirect', 'wp_search_url_rewrite' );

现在去前台搜索，就会发现结果会跳转到【/search/关键词】了。当然，为了让搜索直接进入这个页面，而不是要 301 跳转，我们可以稍微改造一下这个搜索框。
常规搜索框代码一般如下：

<div id="searchbar">
<form method="get" id="searchform" action="https://zhang.ge/">
<input type="text" name="s" id="s" placeholder="输入搜索内容" />
<button type="submit" id="searchsubmit">搜索</button>
</form>
</div>

输入内容，点击搜索后就必然会跳到 ?s=keyword 这个动态页面。所以，我们需要通过 js 代码来拦截这搜索动作，然后重新定义跳转地址，将代码如下修改即可：

<div id="searchbar"> <form method="get" id="searchform" action="https://zhang.ge/search/">
<input id="wp_search" placeholder="请输入搜索内容" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
<button type="submit" id="searchsubmit" onclick="return Search('wp');">搜索</button>
</form>
</div>
<script type="text/javascript">
function Search(){
var value=$("#wp_search").val()||"";
window.open("https://zhang.ge/search/"+value+"https://zhang.ge/");
return false;
}
</script>

很简单的代码，原理就是给【搜索】动作绑定了一个 js 函数，而这个 js 函数的功能就是获取当前输入的关键词，并拼接成一个新的地址，最后跳转过去即可。
如此，就实现了 WordPress 默认搜索的伪静态化。很明显，这个方法适合任何 WP 主题。
Ps：其实这儿用 Nginx 或 Apapche 的伪静态规则来实现，性能会更棒！后面再研究折腾一下。
②、集成多种搜索
多种搜索？到底哪几种？
这就看你的心情了，只要搜出来有内容，随便你增加几个都行！除了百度有高兼容性的站内搜索之外，其他站点无非就是利用 site 指令+关键词而已。
比如，在 360 好搜搜索张戈博客的某个关键词，直接访问如下链接即可：
https://www.haosou.com/s?q=site%3Azhang.ge+移动适配
那么其他任意搜索引擎，基本都可以依葫芦画瓢搞定了。很明显这种方法就会要用到上文分享的 JS 函数了，不过要稍微改造一下，让函数可以多次利用。
比如，我想同时集成 360 和默认搜索，代码可以这样写：

<div id="searchbar"> <form method="get" id="searchform" action="https://zhang.ge/search/">
<input id="wp_search" placeholder="请输入搜索内容" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
<button type="submit" id="searchsubmit" onclick="return Search('wp');">搜索</button>
</form>
</div>
<div id="searchbar">
<form method="get" id="searchform" action="http://www.haosou.com/s?q=site%3Azhang.ge">
<input class="swap_value" id="haosou" placeholder="请输入好搜站内搜索关键词" onkeydown="if(event.keyCode==13){return Search('haosou');}">
<button type="submit" id="searchsubmit" onClick="return Search('haosou');">好搜一下</button>
</form>
</div>
<script type="text/javascript">
/* 无非就是多一个传参嘛！ */
function Search(type){
if (type=="haosou") {
var value=$("#haosou").val()||"";
window.open("http://www.haosou.com/s?q="+value+"+site%3Azhang.ge");
} else {
var value=$("#wp_search").val()||"";
window.open("https://zhang.ge/search/"+value+"https://zhang.ge/");
}
return false;
}
</script>

写了这么多，更多搜索引擎，你应该可以自己搞定了吧？
三、Begin 专用
Begin 的就简单了，直接用张戈现在用的代码即可。
编辑 Begin 主题下的 inc/search-baidu.php 文件，替换为以下代码（域名请自行替换）：

<div id="searchbar">
<!-- 这里用到的是百度的内嵌搜索，begin 主题已经集成了，注意/search 路径修改成实际的搜索页面 -->
<form method="get" id="searchform" action="https://zhang.ge/search/" target="_blank">
<input class="swap_value" placeholder="请输入百度站内搜索关键词" name="q">
<button type="submit" id="searchsubmit">百度一下</button>
</form>
</div>
<div id="searchbar">
<form method="get" id="searchform" action="http://www.haosou.com/s?q=site%3Azhang.ge">
<input class="swap_value" id="haosou" placeholder="请输入好搜站内搜索关键词" onkeydown="if(event.keyCode==13){return Search('haosou');}">
<button type="submit" id="searchsubmit" onClick="return Search('haosou');">好搜一下</button>
</form>
</div>
<div id="searchbar"> <form method="get" id="searchform" action="https://zhang.ge/search/">
<input class="swap_value" id="wp_search" placeholder="请输入博客站内搜索关键词" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
<button type="submit" id="searchsubmit" onclick="return Search('wp');">默认搜索</button>
</form>
</div>
<script type="text/javascript">
function Search(type){
if (type=="haosou") {
var value=$("#haosou").val()||"";
window.open("http://www.haosou.com/s?q="+value+"+site%3Azhang.ge");
} else {
var value=$("#wp_search").val()||"";
window.open("https://zhang.ge/search/"+value+"https://zhang.ge/");
}
return false;
}
</script>

然后，到后台的主题选项中把默认搜索功能给关掉即可，因为上述代码已经集成了！
最后，效果如图所示，当然直接在张戈博客右上角搜索一把也是可以的：

四、百度内嵌
这个功能出来有那么一段时间了，在我发现后，第一时间就推荐给了鸟哥。所以，后面的 Begin 版本也就将这个功能集成进去了。所以，使用 Begin 主题的朋友下面的内容就可以跳过了。
个人认为还是不错的，比以前用 cname 方式集成百度搜索更加和谐，因为用到的是一个二级目录了，感兴趣的可以看下【官方帮助文档】了解更多参数的用法和含义。
下面简单分享一下集成方法：
①、复制主题目录下的页面模板（常见名称为 page.php），假如复制后名为 bdsearch.php；
②、编辑复制后的 bdsearch.php，将文件头的模板名称修改为百度嵌入式搜索，比如：
<?php
/*
Template Name: 百度嵌入式搜索
*/
?>
③、找到如下类似代码：
<?php the_content(‘More »’); ?>
然后替换为如下内容即可：

<div id="bdcs-frame-box"></div>
<script type="text/javascript">
var bdcsFrameSid="此处填写你的百度站内搜索 ID";
var bdcsFrameCharset= "utf-8";
var bdcsFrameWidth = 650; //宽度请自行调整
var bdcsFrameHeight = 0;
var bdcsFrameWt = 1;
var bdcsFrameHt = 2;
var bdcsFrameResultNum = 20;
var bdcsFrameBgColor = "#fff";
var bdcsRecommend = 0;
var bdcsDefaultQuery = 0;
var bdcsRemoveUrl = 0;
</script>
<script type="text/javascript" src="http://zhannei.baidu.com/static/js/iframe.js"></script>

④、最后，新建一个页面，模板选择【百度嵌入式搜索】，发布即可。
发布后，访问这个页面地址，将会出现默认的百度站内搜索，而且是 iframe 嵌入式的：

接下来，我们还得改造一下搜索框，让关键词传递给这个页面才行。
每个主题的搜索框都不一样，这里就不能给出直接可用的代码了，请参考以下代码自行修改：

<form method="get" id="searchform" action="https://zhang.ge/search/" target="_blank">
<input class="swap_value" placeholder="请输入百度站内搜索关键词" name="q">
<button type="submit" id="searchsubmit">百度一下</button>
</form>

以上内容，多多少少会涉及到 CSS 样式的调整，这是折腾主题的必备技能之一！所以样式问题就请自行搞定，这样才能学的更多，得到最大的收获！

收录于{张戈博客} 原文链接原文链接