Google自定义搜索样式HotNewsPro主题定制版

  • A+
所属分类：Wordpress

【Google自定义搜索样式HotNewsPro主题定制版】

Google自定义搜索样式HotNewsPro主题定制版

当你对HotNewsPro主题爱不释手时会不会觉得添加上Google自定义搜索是一个很明智的决定呢，用Google自定义搜索可以减轻服务器的负载，但更重要的原因是 Google 搜索有强大的词语分割、智能匹配、拼写纠正功能等，这款主题正好有这个模板，不过谷歌默认的样式是不是不还不够个性呢，想打造自己的个性搜索引擎？那就跟我来吧！（以下样式是针对现在我的主题色调什么的修改的，如果要修改请适应自己的主题哦）

修改主题内google_s.php文件，用以下代码替换：

  1. <?php   
  2. /*
  3. Template Name: 谷歌搜索  
  4. */  
  5. ?>   
  6. <?php get_header(); ?>   
  7.     <div id="map_box">   
  8.         <div id="map_l">   
  9.             <div class="browse">现在位置 ＞<a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> ＞搜索结果</div>   
  10.         </div>   
  11.         <div id="map_r">   
  12.             <div id="feed"><a href="<?php echo get_option('swt_rsssub'); ?>" title="RSS">RSS</a></div>   
  13.         </div>   
  14.     </div>   
  15.     <div class="clear"></div>   
  16.     <div class="entry_box_s_g">   
  17.   
  18. <!-- 自定义搜索代码 -->      
  19.   
  20. <!--google自定义搜索开始-->   
  21.   
  22. <div id="loop_page">               
  23.     <div class="content">   
  24.         <div class="tl right gray">   
  25.             <div class="br inner">   
  26.                 <p>已在 heyongchao.com 中搜索：<br /><span class="p"><b> </b></span></p>   
  27.   
  28.             </div>   
  29.         </div>   
  30.         <div id="cse">   
  31.             <p class="loading">正在搜索...</p>   
  32.         </div>   
  33.     </div>   
  34. </div>         
  35.                            
  36. <script type="text/javascript" src="https://www.google.com/jsapi"></script>   
  37.   
  38. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
  39.   
  40. <script type="text/javascript">   
  41. google.load('search', '1', {language : 'zh-CN' , "nocss" : true });   
  42. google.setOnLoadCallback(function(){   
  43.     var customSearchControl = new google.search.CustomSearchControl('<?php echo get_option('swt_search_ID'); ?>');   
  44.     customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);   
  45.     customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);   
  46.     customSearchControl.setNoResultsString('<img src="<?php bloginfo('template_url'); ?>/images/googlesearch/b.gif" class="wp-smiley sm-sad">&nbsp;&nbsp;什么也没找到，请重试');   
  47.     customSearchControl.setSearchCompleteCallback(null,function() {   
  48.         $('input.gsc-input').select();   
  49.         var searchwords = $('input.gsc-input').val();   
  50.         $('.p > b').text(searchwords);   
  51.         $('a.gs-title').addClass('new').unwrap().wrap('<h3></h3>').each(function() {   
  52.             var title = $(this).html().replace(/\|.*/g, '');   
  53.             $(this).html(title);   
  54.         });   
  55.         $('b:contains("...")').contents().unwrap();   
  56.         $('.gsc-cursor-current-page').removeClass('gsc-cursor-page');   
  57.     });   
  58.     var options = new google.search.DrawOptions();   
  59.     options.setSearchFormRoot('cse-search-form');   
  60.     options.setAutoComplete(true);   
  61.     customSearchControl.draw('cse', options);   
  62.     var match = location.search.match(/q=([^&]*)(&|$)/);   
  63.     if(match && match[1]){   
  64.         var search = decodeURIComponent(match[1]);   
  65.         customSearchControl.execute(search);   
  66.     }   
  67. });   
  68. </script>   
  69.   
  70. <div class="clear"></div>   
  71.   
  72. <!--google自定义搜索结束-->                   
  73. <!-- 自定义搜索代码结束 -->   
  74.   
  75.         <i class="lt"></i>   
  76.         <i class="rt"></i>   
  77.     </div>   
  78.     <div class="entry_sb_l">   
  79.         <i class="lb"></i>   
  80.         <i class="rb"></i>   
  81.     </div>   
  82. <?php get_footer(); ?>   

下面是CSS样式，同样需要添加进google_s.php文件中的适当位置（因为有些可能须强制替换引入样式，所以放在了php文件中），当然自己针对自己的主题修改适应即可，不限于HotNews主题哦！

  1. <style type="text/css">   
  2. p.loading, .gs-no-results-result .gs-snippet {   
  3.     background-color: #fea;   
  4.     text-align: center;   
  5.     padding: 3px;   
  6.     -moz-border-radius: 5px;   
  7.     -webkit-border-radius: 5px;   
  8.     border-radius: 5px;   
  9.     -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);   
  10.     -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);   
  11.     box-shadow: 1px 1px 5px rgba(0,0,0,0.1);   
  12.     width: 180px;   
  13.     border: none;   
  14.     margin-left: 170px;   
  15. }   
  16.   
  17. #cse {   
  18.     width: 600px;   
  19. }   
  20.   
  21. .tl.rightright .br {   
  22.     width: 200px;   
  23.     min-height: 80px;   
  24.     _height: 80px;   
  25. }   
  26.   
  27. /*搜索框样式及位置*/  
  28. form.gsc-search-box {   
  29.     width: 205px;   
  30.     margin-left: 715px;   
  31.     position: absolute;   
  32.     z-index: 1;   
  33.     top: 0;   
  34. }   
  35.   
  36. input.gsc-input {   
  37.     width: 150px;   
  38.     background: white url(<?php bloginfo('template_url'); ?>/images/googlesearch/input.png) repeat-x 0 -60px !important;   
  39. }   
  40.   
  41. /*技术提供：Google 样式*/  
  42. .gsc-branding {   
  43.     position: absolute;   
  44.     top: 110px;   
  45.     margin-left: 60px;   
  46.     color: #888;   
  47.     text-shadow: 0 1px 0 #fff;   
  48. }   
  49. img.gsc-branding-img {   
  50.     position: relative;   
  51.     top: 2px;   
  52.     left: 3px;   
  53. }   
  54.   
  55. /*设置需要隐藏的元素*/  
  56. .gs-image, .gsc-tabsArea, .gsc-clear-button, .gsc-tabHeader, .gsc-resultsHeader, .gsc-trailing-more-results, a.gsc-trailing-more-results, .gs-visibleUrl, .gs-watermark, .gsc-adBlock, .gsc-adBlockVertical {   
  57.     display: none;   
  58. }   
  59.   
  60. /*搜索结果样式*/  
  61. .gs-bidi-start-align, .gs-snippet{   
  62.     clear:both;   
  63.     margin-top:5px;   
  64.     }   
  65. .gs-result {   
  66.     height: 6.5em;   
  67.     margin-bottom: 1em;   
  68.     overflow: hidden;   
  69. }   
  70.   
  71. b {   
  72.     padding: 1px 3px;   
  73.     background-color: #fea;   
  74.     -moz-border-radius: 3px;   
  75.     -webkit-border-radius: 3px;   
  76.     border-radius: 3px;   
  77.     text-shadow: none;   
  78. }   
  79.   
  80. .gs-snippet b, .p b {   
  81.     font-weight: normal;   
  82. }   
  83.   
  84. .p b {   
  85.     padding: 2px 4px;   
  86.     font-size: 120%;   
  87.     line-height: 220%;   
  88. }   
  89.   
  90. .gs-visibleUrl-long {   
  91.     color: #aaa;   
  92.     margin-left: 42px;   
  93. }   
  94.   
  95. .gsc-cursor-box {   
  96.     margin-top: 20px;   
  97. }   
  98.   
  99. .gsc-cursor-page, a.gsc-trailing-more-results {   
  100.     color: #bb6f02;   
  101.     cursor: pointer;   
  102. }   
  103.   
  104. .gsc-completion-container {   
  105.     cursor: pointer;   
  106.     position: absolute;   
  107.     background-color: #fff;   
  108.     margin-top: -5px;   
  109.     opacity: 0.9;   
  110.     -moz-border-radius-bottomleft: 3px;   
  111.     -moz-border-radius-bottomright: 3px;   
  112.     -webkit-border-bottom-left-radius: 3px;   
  113.     -webkit-border-bottom-rightright-radius: 3px;   
  114.     border-bottom-left-radius: 3px;   
  115.     border-bottom-rightright-radius: 3px;   
  116.     -moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);   
  117.     -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);   
  118.     box-shadow: 1px 2px 5px rgba(0,0,0,0.3);   
  119. }   
  120.   
  121. .gsc-completion-selected {   
  122.     background-color: #fe8;   
  123. }   
  124. #content {   
  125.     width: 940px;   
  126.     padding: 20px 40px 120px 40px;   
  127. }   
  128. #loop_page {   
  129.     width: 940px;   
  130.     float: left;   
  131.     margin-top:15px;   
  132. }   
  133. .tl {   
  134.     background: #f4f4ec url(<?php bloginfo('template_url'); ?>/images/googlesearch/avatar.png) no-repeat -76px -204px;   
  135. }   
  136. .rightright {   
  137.     float: rightright;   
  138.     margin-top:20px;   
  139. }   
  140. .gray, .widget ul {   
  141.     color: #888;   
  142. }   
  143. .br {   
  144.     background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/br.png) no-repeat rightright bottombottom;   
  145. }   
  146. .inner {   
  147.     padding: 15px;   
  148. }   
  149. .p {   
  150.     color: #382e1f;   
  151. }   
  152. /* Pagebar Styles ----------------------------------------------- */  
  153.   
  154. .gsc-cursor-page, .gsc-cursor-current-page, .twitter_pagebar a, .twitter_pagebar a:visited, .twitter_pagebar strong, .pagebar a, .pagebar a:visited, .this-page {   
  155.     float: left;   
  156.     line-height: 16px;   
  157.     background: #f3f3ec;   
  158.     border-bottom: 1px solid #bbb;   
  159.     border-right: 1px solid #ddd;   
  160.     -moz-border-radius: 4px;   
  161.     -webkit-border-radius: 4px;   
  162.     border-radius: 4px;   
  163.     text-decoration: none;   
  164.     padding: 0.3em 0.8em;   
  165.     margin-left: 0.8em;   
  166.     text-shadow: 0 1px 0 #fff;   
  167. }   
  168.   
  169. .gsc-cursor-page:hover, .twitter_pagebar a:hover, .pagebar a:hover {   
  170.     border: none;   
  171.     border-top: 1px solid #bbb;   
  172.     border-left: 1px solid #ddd;   
  173.     text-decoration: none;   
  174.     text-shadow: 0 -1px 0 #fff;   
  175. }   
  176.   
  177. .twitter_pagebar a:active, .pagebar a:active {   
  178.     background: #EBC476;   
  179.     color: #fff;   
  180.     outline: none;   
  181. }   
  182.   
  183. .gsc-cursor-current-page, .twitter_pagebar strong, .this-page {   
  184.     border: none;   
  185.     border-top: 1px solid #743;   
  186.     border-left: 1px solid #854;   
  187.     background: #bb6f02;   
  188.     font-weight: bold;   
  189.     color: #fff;   
  190.     text-shadow: 0 1px 0 #630;   
  191. }   
  192.   
  193. .break {   
  194.     float: left;   
  195.     padding: 0.3em 0;   
  196.     margin-left: 0.8em;   
  197.     border: none;   
  198. }   
  199. p {   
  200.     margin: 0 0 20px 0;   
  201. }   
  202. /* Pagebar Styles ----------------------------------------------- */  
  203.   
  204. .gsc-cursor-page, .gsc-cursor-current-page, .twitter_pagebar a, .twitter_pagebar a:visited, .twitter_pagebar strong, .pagebar a, .pagebar a:visited, .this-page {   
  205.     float: left;   
  206.     line-height: 16px;   
  207.     background: #f3f3ec;   
  208.     border-bottom: 1px solid #bbb;   
  209.     border-right: 1px solid #ddd;   
  210.     -moz-border-radius: 4px;   
  211.     -webkit-border-radius: 4px;   
  212.     border-radius: 4px;   
  213.     text-decoration: none;   
  214.     padding: 0.3em 0.8em;   
  215.     margin-left: 0.8em;   
  216.     text-shadow: 0 1px 0 #fff;   
  217. }   
  218.   
  219. .gsc-cursor-page:hover, .twitter_pagebar a:hover, .pagebar a:hover {   
  220.     border: none;   
  221.     border-top: 1px solid #bbb;   
  222.     border-left: 1px solid #ddd;   
  223.     text-decoration: none;   
  224.     text-shadow: 0 -1px 0 #fff;   
  225. }   
  226.   
  227. .twitter_pagebar a:active, .pagebar a:active {   
  228.     background: #EBC476;   
  229.     color: #fff;   
  230.     outline: none;   
  231. }   
  232.   
  233. .gsc-cursor-current-page, .twitter_pagebar strong, .this-page {   
  234.     border: none;   
  235.     border-top: 1px solid #743;   
  236.     border-left: 1px solid #854;   
  237.     background: #bb6f02;   
  238.     font-weight: bold;   
  239.     color: #fff;   
  240.     text-shadow: 0 1px 0 #630;   
  241. }   
  242.   
  243. .break {   
  244.     float: left;   
  245.     padding: 0.3em 0;   
  246.     margin-left: 0.8em;   
  247.     border: none;   
  248. }   
  249.   
  250. .new {   
  251.     background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icona.png) no-repeat rightright -177px;   
  252.     padding-right: 20px;   
  253. }   
  254.   
  255. .new:visited {   
  256.     background: none;   
  257.     padding-right: 0;   
  258. }   
  259.   
  260. /* Header Layout ----------------------------------------------------------- */  
  261.   
  262. #searchbox, form.gsc-search-box {   
  263.     background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icona.png) no-repeat rightright -297px;   
  264.     display: inline;   
  265.     margin-top: 20px;   
  266. }   
  267.   
  268. #input_search, input.gsc-input {   
  269.     width: 150px;   
  270.     opacity: 0.7;   
  271. }   
  272.   
  273. #input_search:focus, input.gsc-input:focus {   
  274.     opacity: 1;   
  275. }   
  276.   
  277. #button_search, input.gsc-search-button {   
  278.     width: 25px;   
  279.     height: 20px;   
  280.     border: none;   
  281.     cursor: pointer;   
  282.     background: transparent;   
  283.     text-indent: -1000px;   
  284. }   
  285.   
  286. .gs-title{   
  287.     color: #BB6F02;   
  288.     }   
  289.   
  290. .gs-title:hover{   
  291.     color: #e58802;   
  292.     }   
  293.   
  294. h3 {   
  295.     font-size: 150%;   
  296.     float:left;   
  297.     color: #444;   
  298.     margin:10px 0px 5px 0px;   
  299.     font-weight: bold;   
  300.     line-height: 100%;   
  301.     text-shadow: 0px 2px 3px rgba(0,0,0,0.3);   
  302.     font-family: Optima, "Trebuchet MS", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", simhei, Sans-serif;   
  303. }   
  304.   
  305. p {   
  306.     margin: 0 0 20px 0;   
  307. }   
  308.   
  309. .input, input.gsc-input {   
  310.     background: white url(<?php bloginfo('template_url'); ?>/images/googlesearch/input.png) repeat-x 0 -60px;   
  311.     border: 1px solid #a79d8f;   
  312.     -moz-border-radius: 3px;   
  313.     -webkit-border-radius: 3px;   
  314.     border-radius: 3px;   
  315.     margin: 0;   
  316.     padding: 2px;   
  317.     line-height: 15px;   
  318.     display: inline;   
  319.     width: 178px;   
  320. }   
  321. .wp-smiley {   
  322.     background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icons.png) no-repeat 0 -212px;   
  323.     width: 16px;   
  324.     height: 16px;   
  325.     position: relative;   
  326.     top: 3px;   
  327.     background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/iconc.png) no-repeat 0 -30px;   
  328. }   
  329. .sm-sad {   
  330.     background-position: 0 -150px;   
  331. }   
  332. </style>                 

当然还需要下载一点点图片素材，我是把图片放到了主题文件夹内的HotNewspro\images\googlesearch路径下的，图片打包下载如下：

最后上传修改后的google_s.php文件以及相应图片文件到相应目录即可，在此我保留了原主题的后台设置谷歌自定义搜索ID的功能，大家仍然可以在后台自由设置自定义搜索功能。

在此非常感谢“老肥博客”“打造完美的 ajax 版 Google 自定义搜索”一文，原文地址：http://fis.io/ajax-google-custom-search-engine.html

发表评论

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