- A+
所属分类:Wordpress
【Google自定义搜索样式HotNewsPro主题定制版】
当你对HotNewsPro主题爱不释手时会不会觉得添加上Google自定义搜索是一个很明智的决定呢,用Google自定义搜索可以减轻服务器的负载,但更重要的原因是 Google 搜索有强大的词语分割、智能匹配、拼写纠正功能等,这款主题正好有这个模板,不过谷歌默认的样式是不是不还不够个性呢,想打造自己的个性搜索引擎?那就跟我来吧!(以下样式是针对现在我的主题色调什么的修改的,如果要修改请适应自己的主题哦)
修改主题内google_s.php文件,用以下代码替换:
- <?php
- /*
- Template Name: 谷歌搜索
- */
- ?>
- <?php get_header(); ?>
- <div id="map_box">
- <div id="map_l">
- <div class="browse">现在位置 ><a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> >搜索结果</div>
- </div>
- <div id="map_r">
- <div id="feed"><a href="<?php echo get_option('swt_rsssub'); ?>" title="RSS">RSS</a></div>
- </div>
- </div>
- <div class="clear"></div>
- <div class="entry_box_s_g">
- <!-- 自定义搜索代码 -->
- <!--google自定义搜索开始-->
- <div id="loop_page">
- <div class="content">
- <div class="tl right gray">
- <div class="br inner">
- <p>已在 heyongchao.com 中搜索:<br /><span class="p"><b> </b></span></p>
- </div>
- </div>
- <div id="cse">
- <p class="loading">正在搜索...</p>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript">
- google.load('search', '1', {language : 'zh-CN' , "nocss" : true });
- google.setOnLoadCallback(function(){
- var customSearchControl = new google.search.CustomSearchControl('<?php echo get_option('swt_search_ID'); ?>');
- customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
- customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
- customSearchControl.setNoResultsString('<img src="<?php bloginfo('template_url'); ?>/images/googlesearch/b.gif" class="wp-smiley sm-sad"> 什么也没找到,请重试');
- customSearchControl.setSearchCompleteCallback(null,function() {
- $('input.gsc-input').select();
- var searchwords = $('input.gsc-input').val();
- $('.p > b').text(searchwords);
- $('a.gs-title').addClass('new').unwrap().wrap('<h3></h3>').each(function() {
- var title = $(this).html().replace(/\|.*/g, '');
- $(this).html(title);
- });
- $('b:contains("...")').contents().unwrap();
- $('.gsc-cursor-current-page').removeClass('gsc-cursor-page');
- });
- var options = new google.search.DrawOptions();
- options.setSearchFormRoot('cse-search-form');
- options.setAutoComplete(true);
- customSearchControl.draw('cse', options);
- var match = location.search.match(/q=([^&]*)(&|$)/);
- if(match && match[1]){
- var search = decodeURIComponent(match[1]);
- customSearchControl.execute(search);
- }
- });
- </script>
- <div class="clear"></div>
- <!--google自定义搜索结束-->
- <!-- 自定义搜索代码结束 -->
- <i class="lt"></i>
- <i class="rt"></i>
- </div>
- <div class="entry_sb_l">
- <i class="lb"></i>
- <i class="rb"></i>
- </div>
- <?php get_footer(); ?>
下面是CSS样式,同样需要添加进google_s.php文件中的适当位置(因为有些可能须强制替换引入样式,所以放在了php文件中),当然自己针对自己的主题修改适应即可,不限于HotNews主题哦!
- <style type="text/css">
- p.loading, .gs-no-results-result .gs-snippet {
- background-color: #fea;
- text-align: center;
- padding: 3px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
- -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
- box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
- width: 180px;
- border: none;
- margin-left: 170px;
- }
- #cse {
- width: 600px;
- }
- .tl.rightright .br {
- width: 200px;
- min-height: 80px;
- _height: 80px;
- }
- /*搜索框样式及位置*/
- form.gsc-search-box {
- width: 205px;
- margin-left: 715px;
- position: absolute;
- z-index: 1;
- top: 0;
- }
- input.gsc-input {
- width: 150px;
- background: white url(<?php bloginfo('template_url'); ?>/images/googlesearch/input.png) repeat-x 0 -60px !important;
- }
- /*技术提供:Google 样式*/
- .gsc-branding {
- position: absolute;
- top: 110px;
- margin-left: 60px;
- color: #888;
- text-shadow: 0 1px 0 #fff;
- }
- img.gsc-branding-img {
- position: relative;
- top: 2px;
- left: 3px;
- }
- /*设置需要隐藏的元素*/
- .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 {
- display: none;
- }
- /*搜索结果样式*/
- .gs-bidi-start-align, .gs-snippet{
- clear:both;
- margin-top:5px;
- }
- .gs-result {
- height: 6.5em;
- margin-bottom: 1em;
- overflow: hidden;
- }
- b {
- padding: 1px 3px;
- background-color: #fea;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- text-shadow: none;
- }
- .gs-snippet b, .p b {
- font-weight: normal;
- }
- .p b {
- padding: 2px 4px;
- font-size: 120%;
- line-height: 220%;
- }
- .gs-visibleUrl-long {
- color: #aaa;
- margin-left: 42px;
- }
- .gsc-cursor-box {
- margin-top: 20px;
- }
- .gsc-cursor-page, a.gsc-trailing-more-results {
- color: #bb6f02;
- cursor: pointer;
- }
- .gsc-completion-container {
- cursor: pointer;
- position: absolute;
- background-color: #fff;
- margin-top: -5px;
- opacity: 0.9;
- -moz-border-radius-bottomleft: 3px;
- -moz-border-radius-bottomright: 3px;
- -webkit-border-bottom-left-radius: 3px;
- -webkit-border-bottom-rightright-radius: 3px;
- border-bottom-left-radius: 3px;
- border-bottom-rightright-radius: 3px;
- -moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
- -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
- box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
- }
- .gsc-completion-selected {
- background-color: #fe8;
- }
- #content {
- width: 940px;
- padding: 20px 40px 120px 40px;
- }
- #loop_page {
- width: 940px;
- float: left;
- margin-top:15px;
- }
- .tl {
- background: #f4f4ec url(<?php bloginfo('template_url'); ?>/images/googlesearch/avatar.png) no-repeat -76px -204px;
- }
- .rightright {
- float: rightright;
- margin-top:20px;
- }
- .gray, .widget ul {
- color: #888;
- }
- .br {
- background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/br.png) no-repeat rightright bottombottom;
- }
- .inner {
- padding: 15px;
- }
- .p {
- color: #382e1f;
- }
- /* Pagebar Styles ----------------------------------------------- */
- .gsc-cursor-page, .gsc-cursor-current-page, .twitter_pagebar a, .twitter_pagebar a:visited, .twitter_pagebar strong, .pagebar a, .pagebar a:visited, .this-page {
- float: left;
- line-height: 16px;
- background: #f3f3ec;
- border-bottom: 1px solid #bbb;
- border-right: 1px solid #ddd;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- text-decoration: none;
- padding: 0.3em 0.8em;
- margin-left: 0.8em;
- text-shadow: 0 1px 0 #fff;
- }
- .gsc-cursor-page:hover, .twitter_pagebar a:hover, .pagebar a:hover {
- border: none;
- border-top: 1px solid #bbb;
- border-left: 1px solid #ddd;
- text-decoration: none;
- text-shadow: 0 -1px 0 #fff;
- }
- .twitter_pagebar a:active, .pagebar a:active {
- background: #EBC476;
- color: #fff;
- outline: none;
- }
- .gsc-cursor-current-page, .twitter_pagebar strong, .this-page {
- border: none;
- border-top: 1px solid #743;
- border-left: 1px solid #854;
- background: #bb6f02;
- font-weight: bold;
- color: #fff;
- text-shadow: 0 1px 0 #630;
- }
- .break {
- float: left;
- padding: 0.3em 0;
- margin-left: 0.8em;
- border: none;
- }
- p {
- margin: 0 0 20px 0;
- }
- /* Pagebar Styles ----------------------------------------------- */
- .gsc-cursor-page, .gsc-cursor-current-page, .twitter_pagebar a, .twitter_pagebar a:visited, .twitter_pagebar strong, .pagebar a, .pagebar a:visited, .this-page {
- float: left;
- line-height: 16px;
- background: #f3f3ec;
- border-bottom: 1px solid #bbb;
- border-right: 1px solid #ddd;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- text-decoration: none;
- padding: 0.3em 0.8em;
- margin-left: 0.8em;
- text-shadow: 0 1px 0 #fff;
- }
- .gsc-cursor-page:hover, .twitter_pagebar a:hover, .pagebar a:hover {
- border: none;
- border-top: 1px solid #bbb;
- border-left: 1px solid #ddd;
- text-decoration: none;
- text-shadow: 0 -1px 0 #fff;
- }
- .twitter_pagebar a:active, .pagebar a:active {
- background: #EBC476;
- color: #fff;
- outline: none;
- }
- .gsc-cursor-current-page, .twitter_pagebar strong, .this-page {
- border: none;
- border-top: 1px solid #743;
- border-left: 1px solid #854;
- background: #bb6f02;
- font-weight: bold;
- color: #fff;
- text-shadow: 0 1px 0 #630;
- }
- .break {
- float: left;
- padding: 0.3em 0;
- margin-left: 0.8em;
- border: none;
- }
- .new {
- background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icona.png) no-repeat rightright -177px;
- padding-right: 20px;
- }
- .new:visited {
- background: none;
- padding-right: 0;
- }
- /* Header Layout ----------------------------------------------------------- */
- #searchbox, form.gsc-search-box {
- background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icona.png) no-repeat rightright -297px;
- display: inline;
- margin-top: 20px;
- }
- #input_search, input.gsc-input {
- width: 150px;
- opacity: 0.7;
- }
- #input_search:focus, input.gsc-input:focus {
- opacity: 1;
- }
- #button_search, input.gsc-search-button {
- width: 25px;
- height: 20px;
- border: none;
- cursor: pointer;
- background: transparent;
- text-indent: -1000px;
- }
- .gs-title{
- color: #BB6F02;
- }
- .gs-title:hover{
- color: #e58802;
- }
- h3 {
- font-size: 150%;
- float:left;
- color: #444;
- margin:10px 0px 5px 0px;
- font-weight: bold;
- line-height: 100%;
- text-shadow: 0px 2px 3px rgba(0,0,0,0.3);
- font-family: Optima, "Trebuchet MS", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", simhei, Sans-serif;
- }
- p {
- margin: 0 0 20px 0;
- }
- .input, input.gsc-input {
- background: white url(<?php bloginfo('template_url'); ?>/images/googlesearch/input.png) repeat-x 0 -60px;
- border: 1px solid #a79d8f;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- margin: 0;
- padding: 2px;
- line-height: 15px;
- display: inline;
- width: 178px;
- }
- .wp-smiley {
- background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/icons.png) no-repeat 0 -212px;
- width: 16px;
- height: 16px;
- position: relative;
- top: 3px;
- background: url(<?php bloginfo('template_url'); ?>/images/googlesearch/iconc.png) no-repeat 0 -30px;
- }
- .sm-sad {
- background-position: 0 -150px;
- }
- </style>
当然还需要下载一点点图片素材,我是把图片放到了主题文件夹内的HotNewspro\images\googlesearch路径下的,图片打包下载如下:
最后上传修改后的google_s.php文件以及相应图片文件到相应目录即可,在此我保留了原主题的后台设置谷歌自定义搜索ID的功能,大家仍然可以在后台自由设置自定义搜索功能。
在此非常感谢“老肥博客”“打造完美的 ajax 版 Google 自定义搜索”一文,原文地址:http://fis.io/ajax-google-custom-search-engine.html