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

4.7
(6)

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

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

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动作为网站地址(代码第一行),否则在非首页无法搜索。懂得应该懂,不懂得直接用代码就行了。

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

接着,在主题设置,插入代码,自定义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主题自带搜索框集成百度/谷歌/必应的搜索功能了。具体效果如下:

电脑端的效果

手机平板端的效果

共计6人评分,平均4.7

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/justnews-diy-search.html

发表评论

登录后才能评论
本站APP
本站APP
分享本页
返回顶部