网站建设

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

Jager · 9月4日 · 2015年 · · 1649次已读

分享前,先吐槽一下:最近阿里云爆出了云盾误删除 ECS 文件,最后只能用回滚来解决的坑爹玩意儿。刚听到这个消息后,连忙看了下自己的 ECS,没发现有明显的异常。

这 2 天慢慢的发现近期修改的一些代码都被还原了,比如明明去掉了评论审核后的通知功能,今天一个朋友 QQ 告诉我收到的邮件中的文章地址不对,我看了网友的截图,就知道是评论的审核通知邮件。看了下代码,果然之前的注释都去掉了。又比如,我明明屏蔽了某插件的某个菜单,结果今天又看到了。

看来多少还是有所波及,确实是回滚了!还好,最近没怎么折腾代码,否则都白费了!WordPress集成多种站内搜索、百度嵌入式搜索,并伪静态化的方法

一、综合搜索

还是在用 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' ) ) . "/");
        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+"/"); 
    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+"/"); 
    }
    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+"/"); 
    }
    return false;
}
</script>

然后,到后台的主题选项中把默认搜索功能给关掉即可,因为上述代码已经集成了!

最后,效果如图所示,当然直接在张戈博客右上角搜索一把也是可以的:

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

四、百度内嵌

这个功能出来有那么一段时间了,在我发现后,第一时间就推荐给了鸟哥。所以,后面的 Begin 版本也就将这个功能集成进去了。所以,使用 Begin 主题的朋友下面的内容就可以跳过了。

个人认为还是不错的,比以前用 cname 方式集成百度搜索更加和谐,因为用到的是一个二级目录了,感兴趣的可以看下【官方帮助文档】了解更多参数的用法和含义。

下面简单分享一下集成方法:

①、复制主题目录下的页面模板(常见名称为 page.php),假如复制后名为 bdsearch.php;

②、编辑复制后的 bdsearch.php,将文件头的模板名称修改为百度嵌入式搜索,比如:

<?php
/*
Template Name: 百度嵌入式搜索
*/
?>

③、找到如下类似代码:

<?php the_content('More &raquo;'); ?>

然后替换为如下内容即可:

<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 嵌入式的:

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

接下来,我们还得改造一下搜索框,让关键词传递给这个页面才行。

每个主题的搜索框都不一样,这里就不能给出直接可用的代码了,请参考以下代码自行修改:

<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 样式的调整,这是折腾主题的必备技能之一!所以样式问题就请自行搞定,这样才能学的更多,得到最大的收获!

37 条回应
  1. 夏日博客 2015-9-4 · 20:51

    只可惜没有备案,用不了百度和360的站内搜索。

    • avatar
      Jager 2015-9-4 · 22:03

      :evil: 好水的评论
      谁说用站内搜索要备案了?site指令+关键词要备案?文章都没看一顿评论
      完了邮箱还留个错的,[email protected] ,能收到? :arrow:

      • 大漩涡 2015-9-5 · 21:41

        想多了,很多人就为了评论而评论

  2. myworld 2015-9-4 · 22:54

    你好,请问怎么在网站中集成 在线影音 这个功能呢,百度好几天也没有想出办法,请Jager大神指教

    • avatar
      Jager 2015-9-5 · 10:11

      请自行在博客搜索在线影音

  3. 暴露智商 2015-9-4 · 22:58

    你早点写。。。我今天就不用研究半天了- -!

  4. 有分寸 2015-9-5 · 0:26

    搜索伪静态用上了,非常感谢!开始始终不成,后来发现

    onkeydown="if(event.keyCode==13){return Searcher('wp');}"&gt;

    Searcher多写了个er :grin:

  5. 陌小雨博客 2015-9-5 · 16:16

    上午才想起给自己的网站重新添加百度站内搜索,一登陆站长平台,发现开放了一个新功能,于是马上加上,下午到你博客一看,才发现你昨天就已经发布了,~~~~(>_<)~~~~ 好像你的百度站内搜索 结果页面不是伪静态:https://zhang.ge/search/?q=知更鸟,这个应该也可以把百度站内搜索通过写规则定向到类似这种的吧:https://zhang.ge/search/知更鸟。

    • avatar
      Jager 2015-9-5 · 16:23

      这个折腾项目就交给你了。

  6. 牧羊人 2015-9-5 · 23:50

    百度收录不全。。。

  7. 毛驴哥 2015-9-6 · 16:30

    都是一些技术帝!毛驴哥已经慢慢的看不懂代码了!

  8. 软件海 2015-9-6 · 16:56

    很早之前给网站弄过站内搜索,用的是百度站内搜索,实测使用率极低。后来就还是用了WP自带搜索,可能是网站内容太少吧,也不值得别人去搜索。
    还是建议站长朋友先充实了网站内容,有了一定的文章量,再搞这些东西也不迟。

    • avatar
      Jager 2015-9-7 · 9:22

      丰富内容是王道,大部分博客搜索功能都是自己在用

  9. boke112导航 2015-9-7 · 9:39

    功能非常给力,有空我也折腾看看

  10. 图解电影 2015-9-8 · 11:50

    老大,我也用上你这个主题了,不过我是用的图片布局的。。。。以后再跟着你的文章优化就方便多了。

  11. 清风美文 2015-9-8 · 14:26

    看着就挺复杂的,我就不折腾了。
    你推荐的这个云服务器我倒是很感兴趣的,去看看了。

  12. 交通事故律师 2015-9-8 · 16:47

    不知道张哥是如何设置logo扫光的,我按照鸟哥提供的代码,扫光的位置总是不对,范围比logo图还大

  13. 豪华转马 2015-9-9 · 10:08

    不错,学习了!

  14. 善记事博客 2015-9-9 · 12:53

    zblog的有吗?

  15. 寸寸 2015-9-10 · 8:02

    为什么第三篇文章开始和所有文类打开都无法访问?

  16. 技术拉近你我 2015-9-14 · 20:42

    谢谢分享。

  17. 粉丝 2015-9-16 · 13:51

    用了默认搜索伪静态的方式,只在functions.php加入代码就实现了!很方便!但是遇到一个问题,搜索的结果/search/1,分页是/search/1/page/3/,第一页末尾没有反斜杠,张总是如何解决的?

    • avatar
      Jager 2015-9-16 · 18:34

      如下修改下函数试试:

      //搜索伪静态
      function wp_search_url_rewrite() {
          if ( is_search() && ! empty( $_GET['s'] ) ) {
              wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) . "/");
              exit();
          }
      }
      add_action( 'template_redirect', 'wp_search_url_rewrite' );
      • 粉丝 2015-9-17 · 9:17

        果然有效.,..

      • 爱哭的毛毛虫 2017-6-18 · 19:24

        Jager大神,我是知更鸟begin4.1版本的,我只需要默认内部搜索。添加代码后可以在链接中实现静态化,但是搜索结果显示没有找到内容。问题图片发你qq邮箱[email protected]。期待您的回复

  18. 世界之最 2015-9-19 · 17:34

    请问下博主的博客是用 Nginx+php还是NGINX+APACHE+PHP,搞半天都配置不来,唉

  19. 360推荐 2016-9-20 · 0:25

    试了一下这个搜索简直碉堡了,无奈自己不回代码,不敢瞎折腾。

  20. ran 2016-10-24 · 22:19

    然而pjax下 window.open("https://zhang.ge/search/"+value+"/"); 新窗口打开失去了原有的局部刷新效果,window.location.href 当前窗口打开也不支持 局部刷新 博主有什么好办法吗》

    • avatar
      Jager 2016-10-25 · 12:54

      pjax不适合这种方式吧,你可以用ajax方式去拉取搜索结果,然后填充过来。

  21. 孤心 2016-10-25 · 17:24

    博主大大,能请教你一下,为什么我用了搜索页面伪静态之后,搜索就搜不出结果出来了,另外还想问下,为什么在手机访问网站,使用WP站内搜索,搜索页面会自动跳转到首页??

    • avatar
      Jager 2016-10-25 · 18:30

      主题自身代码问题吧,没有遇到过这样的情况。

  22. canbn 2017-10-23 · 7:54

    按照你的方法用了百度内嵌,发现搜索后是404错误,原因是搜索只在根目录下有效,加了目录就不行。
    如www.abc.com/?s=xxx ,这是默认的搜索,在根目录下是有效的,一旦加了目录搜索结果就会404,像这样:
    http://www.abc.com/search/?s=xxx,求大神告知如何解决。。

  23. 懿古今 2017-10-23 · 22:20

    我的导航站今天被别人利用站内搜索进行CC攻击,好像是通过站内搜索地址加随机数字和字母组合进行疯狂搜索,持续了一个小时,不知道对于防范别人利用站内搜索进行攻击有什么好办法吗?

  24. 99八十一 2017-11-5 · 21:09

    就喜欢干货,就喜欢折腾,有空折腾起。

  25. 嬴冰 2018-5-14 · 0:12

    博主你好,我在wp的主题上应用了你的教程,界面啥的都实现了,就是360,搜狗搜索跳转异常.能指点一下吗? :?:

  26. Gomen 2019-5-17 · 21:25

    大神!站内搜索伪静态化,两种方法都试过了,但是关键词为中文比如“世界”时有如下问题:

    首页 > 找到 2 篇与 世界 相关的文章
    亲!没有您要找的,请返回首页!

    明明显示搜索到2篇相关文章,但却没给出相关链接。我换默认主题试了下好像没有问题,难道是主题的问题吗?请大神给点解决思路啊!致谢!