Google 自定义搜索引擎在 IE 下无法显示搜索结果的问题貌似终于解决了

因为使用了 WordPress 的多站点模式,而其内置的搜索功能只能搜索一个子博客,于是修改主题模板中的搜索框,使用 Google 自定义搜索引擎(Custom Search Engine, CSE)替代。可是却发现使用的 V2 版 CSE 在 IE 下无法返回搜索结果(页面空白)。今天发现这个问题终于消失了。

这个问题已经出现很长时间了。在全系列 IE,包括最新的 IE10 中都是一样。不知道这个问题与伟大的墙有没有关系。既然好了,在这里把之前的处理方法记下来,然后全面改成 Google 自定义搜索。

1. 给 WordPress 添加 Google 自定义搜索引擎

为了方便实现,使用了 Google CSE 的 v2 版代码。在 WordPress 中新建一个静态页面模板,把主要内容掏空,将 CSE 代码放进去。搜索页建成。页面地址是:

http://cnzhx.net/search/

要让 WordPress 主题中的搜索框的搜索调用 Google 的搜索引擎,还需要改动搜索框中的提交地址。将现用的 Twenty Eleven 主题的 searchform.php 中那个搜索框代码,

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
    <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
 </form>

改成,

<form method="get" id="searchform" action="//cnzhx.net/search/">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
    <input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    <input type="submit" class="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
 </form>

这样一来,搜索某个词,比如 TEST,就相当于访问

http://cnzhx.net/search/?q=TEST

页面。然后前面新建的放置了 CSE 代码的页面就会调用自定义搜索引擎来展示相应的搜索结果。前面说出问题就是,在 IE 中,搜索结果页面里没有内容。

这样做的好处是,WordPress 的内置搜索还保留着呢,

http://cnzhx.net/?s=TEST

就是内置搜索。

2. 当时为了解决 IE 空白问题而采取的措施

当初发现 IE 在显示 Google 自定义搜索结果时有问题,就把展示出来的那个搜索框做成了条件式的,即,

<![if IE]>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
    <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>
<![endif]>

<![if !IE]>
<form method="get" id="searchform" action="//cnzhx.net/search/">
    <label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
    <input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
    <input type="submit" class="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>
<![endif]>

后来发现 IE10 不认这个 if IE 的语句了,只好按照提示在 WordPress 主题模板的 <head> 中增加了一条让 IE10 以 IE9 模式工作的语句:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

这样,IE 用户使用搜索框的时候用的是 WordPress 内置搜索,其它用户用的是 Google 自定义搜索。

希望以后不需要再用到上面的 2 了。©

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/google-cse-ie-problem-fixed/>。转载请保留此信息及相应链接。

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)