2023更改WordPress的默认搜索为必应等第三方搜索
WordPress网站的搜索一直是广大wp玩家的槽点：一方面自带的搜索很容易就会被不良人利用，作为攻击的手段；另外一方面，自带的搜索效果实在太差，关键词也必须百分百匹配，没有搜索候选词。所以今天老白给大家推荐一个简单易行高效的搜索方式，借助爬虫收录非常勤快的必应，实现WordPress默认搜索改为站外必应搜索（第三方搜索如百度、搜狗和谷歌也是一样的）。
教程包括以下部分，首先是介绍两种跳转方式、然后是针对不同的主题给出改造方案，以老白我使用的mkblog主题、document主题以及7B2主题，分别给出改造方案。
0.使用第三方搜索优缺点
0.1优点
- 搜索结果全面：第三方搜索更全面智能，而且不消耗服务器性能。搜索方式更加多样化，不用全词匹配。比如搜索词为：WordPress网站的优化，文章中可能没有这个关键词，但是在搜索引擎里面就能展现匹配度高的内容
- 搜索算法更新：必应搜索引擎会定期更新其搜索算法以提高搜索质量和准确性。这意味着您的网站的搜索结果可能会随着时间的推移而改进，从而提供更好的用户体验。
0.2缺点
- 无法控制搜索结果：使用第三方搜索引擎，如必应，您无法直接控制搜索结果的排序和展示方式。搜索引擎的算法会自动决定哪些结果在顶部显示。这可能导致一些与您网站内容不太相关的结果出现在前面。
- 用户流失风险：将用户重定向到必应搜索页面后，用户可能会离开您的网站并停留在搜索结果中。这可能导致用户流失的风险，因为他们可能不会返回到您的网站继续浏览。
1.搜索跳转方式
站外跳转搜索有两种形式，搜索框中加site:www.xcbtmw.com和搜索框中仅显示关键词
1.1站外加site:版本
搜索形式和演示效果：
https://cn.bing.com/search?q=site%3Awww.xcbtmw.com+关键词
优势：可二次搜索，用户只需要更改关键词即可再搜索。我个人比较推荐这种
说明
下面的主题修改中，我默认采用此种方式
1.2站外不加site:版
搜索形式和演示效果：
https://cn.bing.com/search?q=关键词&q1=site%3Awww.xcbtmw.com
说明：看起来很简洁，搜索框中只有一个关键词，但是不能二次搜索了
2.document主题替换第三方搜索
document主题的搜索框以及相关代码，我们可以看到document主题是自带搜索框的
2.1原始搜索代码
其代码如下，代码中是没有包含搜索函数的
<!-- 搜索图标 -->
<div class="menu-left">
<div class="search-div">
<!-- 搜索图标 -->
<div class="search-icon iconfont icon-sousuo"></div>
<!-- 搜索框 -->
<input id="search" class="search" type="text" placeholder="输入关键词回车搜索"/>
</div>
</div>
搜索的js是单独写的（就是点击回车之后的操作），在main.js文件里面
/*
* 文章搜索
* */
(function () {
/*
* 点击搜索按钮弹出搜索框
* */
$('.icon-sousuo').on("click", function (event) {
let that = $('#search');
if (that.val() == "") {
return
} else {
location.href = location.origin + "?s=" + that.val();
}
});
/*
* 回车时开始搜索
* */
$('#search').on("keypress", function (event) {
let that = $(this);
if (that.val() == "") {
return
} else {
if (event.keyCode == "13") {
location.href = location.origin + "?s=" + that.val();
}
}
});
})();
2.2替换第三方搜索
两种替换方式：
- 直接调整搜索框，将搜索框直接修改为必应搜索
- 修改回车搜索的js，搜索框输入，回车后跳转必应搜索
①直接修改搜索框
未测试，我自己用的js修改的
<!-- 搜索图标-老白博客https://www.xcbtmw.com/29728.html -->
<div class="menu-left">
<div class="search-div">
<!-- 搜索图标 -->
<a href="https://www.bing.com/search?q=site%3Awww.xcbtmw.com%20" target="_blank" rel="noopener noreferrer">
<div class="search-icon iconfont icon-sousuo"></div>
</a>
<!-- 搜索框 -->
<input id="search" class="search" type="text" placeholder="输入关键词回车搜索"/>
</div>
</div>
②调整js
为了方便设置新窗口打开，和移动端、电脑端的判断，这里我选择调整js。
移动端原窗口打开，电脑端新窗口打开
/*
* 文章搜索-老白博客https://www.xcbtmw.com/29728.html
* */
(function () {
/*
* 点击搜索按钮弹出搜索框
* */
$('.icon-sousuo').on("click", function (event) {
let that = $('#search');
if (that.val() == "") {
return;
} else {
if (isMobileDevice()) {
// 在当前窗口中打开bing搜索（移动端）
let searchWords = encodeURIComponent(that.val());
window.location.href = "https://cn.bing.com/search?q=site:www.xcbtmw.com%20" + searchWords;
} else {
// 在新窗口中打开bing搜索（电脑端）
let searchWords = encodeURIComponent(that.val());
window.open("https://cn.bing.com/search?q=site:www.xcbtmw.com%20" + searchWords, "_blank");
}
}
});
/*
* 回车时开始搜索
* */
$('#search').on("keypress", function (event) {
let that = $(this);
if (that.val() == "") {
return;
} else {
if (event.keyCode == "13") {
if (isMobileDevice()) {
// 在当前窗口中打开bing搜索（移动端）
let searchWords = encodeURIComponent(that.val());
window.location.href = "https://cn.bing.com/search?q=site:www.xcbtmw.com%20" + searchWords;
} else {
// 在新窗口中打开bing搜索（电脑端）
let searchWords = encodeURIComponent(that.val());
window.open("https://cn.bing.com/search?q=site:www.xcbtmw.com%20" + searchWords, "_blank");
}
}
}
});
/*
* 检测是否为移动设备
* */
function isMobileDevice() {
return /(Android|iPhone|iPad|iPod|Windows Phone)/i.test(navigator.userAgent);
}
})();
3.mkblog主题替换第三方搜索
mkblog主题的搜索框如下
3.1 搜索原代码
搜索框代码如下
<!-- 搜索框 -->
<div class="search-form">
<form id="search" class="mk-side-form" method="get" action="<?php echo get_option('home'); ?>" role="search">
<input type="text" id="wp_search" name="s" placeholder="Search..." maxlength="30" autocomplete="off" title="你想找什么？" required="true">
<button type="submit">找找看</button>
</form>
</div>
3.2 替换搜索框代码
这里跟document主题的类似，我们可以直接修改搜索框
加site版
<!-- 搜索框-老白博客https://www.xcbtmw.com/29728.html -->
<div class="search-form">
<form action="https://cn.bing.com/search" method="get" onsubmit="_submit()" class="mk-side-form" target="_blank">
<input type="hidden" name="qs" value="n">
<input type="hidden" name="sp" value="-1">
<input type="hidden" name="sc" value="8-0">
<input type="hidden" name="sk" value="">
<input type="hidden" name="setmkt" value="zh-cn">
<input type="hidden" name="setlang" value="zh-cn">
<input type="hidden" name="FORM" value="SECNEN">
<input type="hidden" name="pq" value="">
<input type="text" size="26" maxlength="100" class="swap_value" name="q" value="" placeholder="输入关键词按回车键搜索">
<button type="submit">找找看</button>
</form>
</div>
<script>
const SITE = "www.xcbtmw.com ";
function _submit() {
let q = document.getElementsByName('q')[0];
let pq = document.getElementsByName('pq')[0];
q.value = 'site:' + SITE + q.value;
pq.value = q.value;
}
</script>
不加site版
<!-- 搜索框-老白博客https://www.xcbtmw.com/29728.html -->
<div class="search-form">
<form id="search" class="mk-side-form" method="get" action="https://cn.bing.com/search" role="search">
<input type="text" id="wp_search" name="q" placeholder="" maxlength="30" autocomplete="off" title="你想找什么？" required="true">
<input type="hidden" name="q1" value="site:www.xcbtmw.com" />
<button type="submit">找找看</button>
</form>
</div>
4.7b2主题替换第三方搜索
刚才看了一下，7B2主题还是一如既往的功能丰富，虽然老白已经不用B2了，但现在看还是觉得其十分复杂。B2主题的搜索类型有很多，包括文章、圈子、用户、文档和商品等，然后搜索框都有好几个，按照上面的方法修改太麻烦了。
索性偷个懒，直接用WordPress自带的搜索方式：?s=搜索关键词，直接跳转到必应：站点+搜索关键词的形式
//搜索跳转-老白博客https://www.xcbtmw.com/29728.html
function custom_search_redirect() {
if ( is_search() ) {
$searchwords = urlencode( get_query_var( 's' ) );
$redirect_url = 'https://cn.bing.com/search?q=site%3Awww.xcbtmw.com+' . $searchwords;
// 获取设备类型
$is_mobile = wp_is_mobile();
if ( $is_mobile ) {
wp_redirect( $redirect_url );
} else {
echo '<script>window.open("' . $redirect_url . '", "_blank");</script>';
}
exit;
}
}
add_action( 'template_redirect', 'custom_search_redirect' );
个人提示
B2主题如果使用的类型很多的情况下，比如文章和圈子都在用的，就不建议使用第三方搜索了
5.其他搜索优化方式
其他的主题也是类似的修改方式，如果没有7B2这么复杂的话，参考mkblog和document主题就够用了
