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

  • A+
所属分类:技术分享

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

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

看来多少还是有所波及,确实是回滚了!还好,最近没怎么折腾代码,否则都白费了!

一、综合搜索

还是在用 HotNewsPro 主题的时候,黑色博客就集成了3个站内搜索,分别是百度、360和默认搜索。换到 Begin 主题之后,也在第一时间就把之前的功能平移了过来。

从一开始就有朋友要我分享部署方法,实在是太忙,心有余而力不足。其实,稍微有点扒站能力的就能把这玩意抠走。。。

二、修改代码

①、搜索伪静态

何为搜索伪静态?

众所周知,WordPress 默认搜索地址为 http://www.domain.com/?s=keyword 这是一个动态地址,和全站伪静态有点格格不入,而去还不利于静态缓存。

很简单,将以下代码加入到主题下的 functions.php 当中即可:

  1. //默认搜索伪静态
  2. function wp_search_url_rewrite() {
  3.     if ( is_search() && ! emptyempty$_GET['s'] ) ) {
  4.         wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
  5.         exit();
  6.     }
  7. }
  8. add_action( 'template_redirect', 'wp_search_url_rewrite' );

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

常规搜索框代码一般如下:

  1. <div id="searchbar">
  2.     <form method="get" id="searchform" action="http://ilhc.cc/">
  3.         <input type="text" name="s" id="s" placeholder="输入搜索内容" />
  4.         <button type="submit" id="searchsubmit">搜索</button>
  5.     </form>
  6. </div>

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

  1. <div id="searchbar"> <form method="get" id="searchform" action="http://ilhc.cc/search/">
  2.     <input id="wp_search" placeholder="请输入搜索内容" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
  3.     <button type="submit" id="searchsubmit" onclick="return Search('wp');">搜索</button>
  4. </form>
  5. </div>
  6. <script type="text/javascript">
  7. function Search(){
  8.     var value=$("#wp_search").val()||"";
  9.     window.open("http://ilhc.cc/search/"+value+"/");
  10.     return false;
  11. }
  12. </script>

很简单的代码,原理就是给【搜索】动作绑定了一个js函数,而这个js函数的功能就是获取当前输入的关键词,并拼接成一个新的地址,最后跳转过去即可。

如此,就实现了WordPress默认搜索的伪静态化。很明显,这个方法适合任何WP主题。

Ps:其实这儿用Nginx或Apapche的伪静态规则来实现,性能会更棒!后面再研究折腾一下。

②、集成多种搜索

多种搜索?到底哪几种?

这就看你的心情了,只要搜出来有内容,随便你增加几个都行!除了百度有高兼容性的站内搜索之外,其他站点无非就是利用site指令+关键词而已。

比如,在360好搜搜索黑色博客的某个关键词,直接访问如下链接即可:

https://www.haosou.com/s?q=site%3Ailhc.cc+黑色

那么其他任意搜索引擎,基本都可以依葫芦画瓢搞定了。很明显这种方法就会要用到上文分享的JS函数了,不过要稍微改造一下,让函数可以多次利用。

比如,我想同时集成360和默认搜索,代码可以这样写:

  1. <div id="searchbar"> <form method="get" id="searchform" action="http://ilhc.cc/search/">
  2.     <input id="wp_search" placeholder="请输入搜索内容" onkeydown="if(event.keyCode==13){return Searcher('wp');}">
  3.     <button type="submit" id="searchsubmit" onclick="return Search('wp');">搜索</button>
  4. </form>
  5. </div>
  6. <div id="searchbar">
  7. <form method="get" id="searchform" action="http://www.haosou.com/s?q=site%3Ailhc.cc">
  8.     <input class="swap_value" id="haosou" placeholder="请输入好搜站内搜索关键词"  onkeydown="if(event.keyCode==13){return Search('haosou');}">
  9.     <button type="submit" id="searchsubmit" onClick="return Search('haosou');">好搜一下</button>
  10. </form>
  11. </div>
  12. <script type="text/javascript">
  13. /* 无非就是多一个传参嘛! */
  14. function Search(type){
  15.     if (type=="haosou") {
  16.         var value=$("#haosou").val()||"";
  17.         window.open("http://www.haosou.com/s?q="+value+"+site%3Ailhc.cc");
  18.     } else {
  19.         var value=$("#wp_search").val()||"";
  20.         window.open("http://ilhc.cc/search/"+value+"/");
  21.     }
  22.     return false;
  23. }
  24. </script>

写了这么多,更多搜索引擎,你应该可以自己搞定了吧?

三、Begin专用

Begin 的就简单了,直接用黑色现在用的代码即可。

编辑 Begin 主题下的 inc/search-baidu.php 文件,替换为以下代码(域名请自行替换):

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

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

 

四、百度内嵌

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

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

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

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

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

  1. <?php
  2. /*
  3. Template Name: 百度嵌入式搜索
  4. */
  5. ?>

③、找到如下类似代码:

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

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

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

④、最后,新建一个页面,模板选择【百度嵌入式搜索】,发布即可。

发布后,访问这个页面地址,将会出现默认的百度站内搜索,而且是iframe嵌入式的:

 

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

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

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

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: