JustNews主题集成百度/谷歌/必应搜索

好久没写Wordrpess JustNews主题相关的教程了，今天带来一个将百度/谷歌/必应等搜索引擎集成到主题自带搜索中的方法。今天，偶然间看到一位站长分享了一个：用户体验很重要，强化搜索能力：集成百度/谷歌/必应搜索文章，里面提供了一个包括站内搜索、百度搜索、谷歌搜索、必应搜索在内的一个搜索功能，并放在了边栏里。

随我将这种方法提取加工，应用到了WordPress JustNews主题中，而且电脑端、手机端都挺好看。基本与原有搜索框没有太大区别，而加入了搜索源的原则，即集成了站内/百度/谷歌/必应的搜索功能。

先放出该站长的文章代码

将以下代码添加到主题适当位置，比如小工具边栏处：

1月16号发现bug，代码第一行没有指定默认action，导致在非首页进行搜索，报404（无默认action，导致直接使用当前页面作为搜索源，无搜索结果）。因此，我已经给action附了一个默认得值，即网站链接，以下代码已修复（第一行）。

<form class="search-form" action="<?php echo get_bloginfo('url');?>" target="_blank" id="SearchForm">
  <script type="text/javascript">
  function changeAction(){
    var str=document.getElementById("SearchType").value;
    if(str=='BD'){
      document.getElementById("SearchForm").action="https://www.baidu.com/baidu";
      document.getElementById("InputName").name="wd";
    }else if(str=="GG"){
      document.getElementById("SearchForm").action="https://www.google.com/search";
      document.getElementById("InputName").name="q";
    }else if(str=="BG"){
      document.getElementById("SearchForm").action="https://www.bing.com/search";
      document.getElementById("InputName").name="q";
    }else{
      document.getElementById("SearchForm").action="";
      document.getElementById("InputName").name="s";
    }
  }
  </script>
  <select class="search-type" autocomplete="off" id="SearchType" onchange="changeAction()">
    <option value="me" selected = "selected"> 站内</option>
    <option value="BD" >百度</option>
    <option value="GG" >谷歌</option>
    <option value="BG" >必应</option>
  </select>
  <input class="form-control" name="s" size="12" id="InputName">
  <input class="btn" type="submit" value="搜索">
</form>

接着，再加入如下CSS代码，即可完成功能的实现，不过CSS可能需要修改，与你的主题匹配：

.search-form {padding: 0 70px 0 0; position: relative;}
.search-form .search-type {position:absolute; top:12px; left:2px; border:none; padding:0 5px; width:60px; height:30px; line-height:30px;}
.search-form .form-control {color:#666; border:solid 2px #ddd; border-right:none; box-shadow:none; border-radius:0; padding:5px 5px 5px 0;}
.search-form .btn {position:absolute; bottom:0; right:0; box-shadow:none; width:70px; padding:6px; border-radius:0; background-color:#FF5E52; color:#fff; opacity:.85;}

整体的效果如下：该方法只能在电脑端显示（毕竟只放在了边栏，所以手机平板等无法显示该搜索框）

JustNews主题魔改实现搜索框集成

由于目前我只用了JustNews主题，因此只能提供该主题的搜索框集成方法

如果你用了JustNews子主题，请复制一份父主题的header.php文件，到子主题目录。然后，直接修改子主题目录下的header.php文件即可。

如果你没有使用JustNews子主题，请直接修改JustNews主题目录下的header.php文件：

找到第54行-64行位置，将如下代码覆盖原来的内容：

<form class="navbar-search" action="<?php echo get_bloginfo('url');?>" target="_blank" id="SearchForm">
  <script type="text/javascript">
  function changeAction(){
    var str=document.getElementById("SearchType").value;
    if(str=='me'){
      document.getElementById("SearchForm").action="<?php echo get_bloginfo('url');?>";
      document.getElementById("InputName").name="s";
    }else if(str=="GG"){
      document.getElementById("SearchForm").action="https://www.google.com/search";
      document.getElementById("InputName").name="q";
    }else if(str=="BG"){
      document.getElementById("SearchForm").action="https://www.bing.com/search";
      document.getElementById("InputName").name="q";
    }else{
      document.getElementById("SearchForm").action="https://www.baidu.com/baidu";
      document.getElementById("InputName").name="wd";
    }
  }
  </script>
  <div class="navbar-search-inner">
  <?php WPCOM::icon('close', true, 'navbar-search-close');?>
  <select class="search-type" autocomplete="off" id="SearchType" onchange="changeAction()">
    <option value="me" selected="selected">站内</option>
    <option value="BD">百度</option>
    <option value="BG">必应</option>
    <option value="GG">谷歌</option>
  </select>
  <input type="text" class="navbar-search-input" name="s" size="12" id="InputName" placeholder="<?php _e('Type your search here ...', 'wpcom');?>">
  <button class="navbar-search-btn" type="submit"><?php WPCOM::icon('search');?></button>
  </div>
</form>

1月16日，上述代码除了与justnews主题适配，同时指定了默认的action动作为网站地址（代码第一行），否则在非首页无法搜索。懂得应该懂，不懂得直接用代码就行了。

接着，在主题设置，插入代码，自定义CSS中，放入如下CSS代码：

.navbar-search-inner .search-type {
    position: absolute;
    border: none;
    padding: 0 5px;
    width: 60px;
    height: 28px;
    line-height: 30px;
}
.navbar-search-inner .navbar-search-input {
    color: #666;
    border: none;
    padding-left: 65px;
}
.navbar-search-input {
    height: 28px;
    padding: 6px 12px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    margin: 0;
}
@media (max-width: 991px){
.navbar-search-btn {
    line-height: 26px;
}}

到此，就可以实现justnews主题自带搜索框集成百度/谷歌/必应的搜索功能了。具体效果如下：

电脑端的效果

手机平板端的效果

文章目录

先放出该站长的文章代码
JustNews主题魔改实现搜索框集成
电脑端的效果
手机平板端的效果

原创文章，作者：古哥，转载需经过作者授权同意，并附上原文链接：https://iymark.com/articles/1445.html

发表回复

登录后才能评论

评论列表（10条）

2322 2022年04月17日 09:25
怎么修改成默认搜索直接是百度站内搜索
回复
- 古哥 2022年04月18日 18:34
  @2322：看第二部分啊
  回复
喵桑 2023年04月08日 14:46
代码没给全，搜索结果只定义了InputName，没定义site name和site value 导致搜索结果是全网搜索
回复
- 古哥 2023年04月08日 17:07
  @喵桑：确实少了几个input
  input name=si type=hidden value=”iymark.com” id=”site”
  input name=tn type=hidden value=”bds”
  input name=cl type=hidden value=”3″
  input name=ct type=hidden value=”2097152″
  input type=hidden name=sitesearch value=”iymark.com” id=”site1″
  回复
祥子 2023年05月04日 19:50
justnews主题默认的搜索框怎么展开啊每次还要去点下图标
回复
- 古哥 2023年05月04日 19:50
  @祥子：没办法，是要点图标
  回复
- 祥子 2023年05月04日 19:55
  @古哥：默认展开就好了，能付费给修改下不古哥
  回复
- 古哥 2023年05月04日 20:02
  @祥子：form#SearchForm {
  display: block!important;
  }
  默认展开，你得自己调整位置
  回复
- 古哥 2023年05月04日 20:05
  @祥子：.navbar-search-icon.j-navbar-search {
  display: none!important;
  }
  再加个这个隐藏默认的搜索图标
  回复
- 祥子 2023年05月05日 11:52
  @古哥：不太会搞