WordPress無縫集成Google自定義搜索引擎
2019-03-22 來源：mywpku.com
前幾天突然發(fā)現(xiàn)本站的搜索功能出現(xiàn)了點(diǎn)問題，索性直接更改為Google自定義搜索引擎�？稍谡垓v搜索功能的時(shí)候經(jīng)歷了一些坎坷，所以整理了下內(nèi)容分享給大家。
1、創(chuàng)建搜索引擎
登入https://accounts.google.com/ServiceLogin？continue=http://www.google.com/cse/all&service=cprose&hl=zh-CN&gl=us&passive=true，若沒有Google的帳號(hào)可去簡(jiǎn)單注冊(cè)一個(gè)。登入后，我們開始創(chuàng)建一個(gè)“定制Google搜索引擎“，如下圖：
#FormatImgID_0#
在輸入框內(nèi)輸入要搜索的網(wǎng)站，這里需要注意的是索引整個(gè)網(wǎng)站還是只是文章部分。若是整個(gè)網(wǎng)站直接按照?qǐng)D中的提示填寫即可，若是單純搜索全部文章頁面就可能會(huì)麻煩些。
若只想讓Google搜索網(wǎng)站的文章頁面，首先要確定WordPress固定鏈接的設(shè)置。
默認(rèn)：http://www.domain.com/？p=123 在輸入框中填入http://www.domain.com/？p=*
日期和名稱型：http://www.domain.com/2013/03/19/sample-post/ 在輸入框中填入http://www.domain.com/年份/月份/天/*
月份和名稱型以此類推
數(shù)字型：http://www.domain.com/archives/123 在輸入框中填入http://www.domain.com/archives/*
文章型：http://www.mywpku.com/sample-post/ 在輸入框中填入http://www.mywpku.com/*/
偽靜態(tài)HTML型：http://www.mywpku.com/sample-post.html 在輸入框中填入http://www.mywpku.com/*.html
其余可以此類推。
可別忘了選擇網(wǎng)站語言哦！完成后下一步吧。
#FormatImgID_1#
2、更改搜索外觀 更改原主題文件
接下來可以根據(jù)需要來更改Google搜索頁面的背景顏色，按鈕顏色等等。不過最重要的一點(diǎn)是將布局更改為全寬：
#FormatImgID_2#
接下來我們對(duì)主題的搜索頁面進(jìn)行修改。在WordPress中輸入一個(gè)搜索詞，它將會(huì)顯示出搜索頁面，并按照搜索詞來顯示內(nèi)容。不過現(xiàn)在我們需要變一下：顯示出搜索頁面后按照輸入的內(nèi)容來調(diào)用Google搜索引擎幫你搜索。
在主題目錄中找到類似于search.php這樣的文件，以我的主題來做個(gè)示例：
<？php get_header（）; ？>
<div id=“content” class=“group”>
<div id=“content_main”>
<？php if （have_posts（）） ： while （have_posts（）） ： the_post（）; ？>
<？php $fmimg = get_post_meta（$post->ID， “fmimg_value”， true）; ？>
<article <？php post_class（） ？> id=“post-<？php the_ID（）; ？>” data-posttime=“<？php the_time（‘Y-m-d H:i：s’）; ？>”><header>
<figure class=“post_category”><？php the_category（‘ ’）; ？></figure>
<a href=“<？php the_permalink（）; ？>” rel=“bookmark” title=“<？php the_title（）; ？>” target=‘_blank’><？php has_post_thumbnail（）; if （ has_post_thumbnail（） ）{ the_post_thumbnail（‘fmimg’）; } elseif（$fmimg） { ？><img src=“<？php echo $fmimg; ？>” /><？php } else { ？><img src=“<？php echo catch_that_image（）; ？>” /><？php } ？></a><strong><h4 class=“post_title”>
<a href=“<？php the_permalink（）; ？>” rel=“bookmark” title=“<？php the_title（）; ？>” target=‘_blank’><？php the_title（）; ？></a></h4></strong>
</header>
<div class=“entry group”>
<？php echo mb_strimwidth（strip_tags（apply_filters（‘the_content’， $post->post_content））， 0， 180，“。。。”，“utf-8”）; ？></div>
<footer class=“post_meta”>
Written By
<a href=“<？php echo get_author_posts_url（get_the_author_meta（ ‘ID’ ））; ？>” rel=“nofollow”><？php echo the_author_meta（ ‘display_name’ ）; ？></a>
<span class=“info-category-icon”><？php the_category（‘， ’） ？></span>
<span class=“info-comment-icon”><？php comments_popup_link （‘沙發(fā)還在’，‘還有板凳’，‘%條評(píng)論’）; ？> <？php edit_post_link（‘編輯本文’， ‘’， ‘’）; ？></span>
<a href=“<？php the_permalink（）; ？>” title=“<？php the_title（）; ？>” class=“more” target=‘_blank’><img src=“https://upload.chinaz.com/2013/0321/1363835608792.png”></a>
<div class=“clear”></div>
</footer>
</article>
<？php endwhile;？>
<？php else ： ？>
<article class=“post”>
<h2>沒有找到任何內(nèi)容</h2>
<？php get_search_form（）; ？>
</article>
<？php endif; ？>
<div class=“navigation group”>
<div class=“wp-pagenavi”><？php par_pagenavi（9）; ？></div>
</div>
</div>
<？php get_sidebar（）; ？>
</div>
<？php get_footer（）; ？>
我將它刪除至只剩下一個(gè)大概的結(jié)構(gòu)：
<?phpget_header();?> <div id="content"class="group"><span style="line-height: 1.6em;"></span> </div> <?phpget_footer();?>
去剛剛的自定義搜索引擎頁面那獲取代碼吧，這是最后一步了。
#FormatImgID_3#
很顯然普通的代碼已經(jīng)不能滿足我們的需求了，下方點(diǎn)擊獲取V1代碼。
將獲得的代碼與search.php合并：
<？phpget_header（）;？>
<div id=“content”class=“group”>
<div id='cse' style='width： 100%;'>
Loading
</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load（'search'， '1'， {language： 'zh-Hans'， style： google.loader.themes.V2_DEFAULT}）;
google.setOnLoadCallback（function（） {var customSearchOptions = {};var orderByOptions = {};orderByOptions［‘keys’］ = ［{label： ‘Relevance’， key： ‘’} ， {label： ‘Date’， key： ‘date’}］;
customSearchOptions［‘enableOrderBy’］ = true;customSearchOptions［‘orderByOptions’］ = orderByOptions;customSearchOptions［‘overlayResults’］ = true;
var customSearchControl = new google.search.CustomSearchControl（'002417144856058510941:uk_1aiwj0ok'， customSearchOptions）;
customSearchControl.setResultSetSize（google.search.Search.FILTERED_CSE_RESULTSET）;var options = new google.search.DrawOptions（）;
options.setAutoComplete（true）;customSearchControl.draw（'cse'， options）;}， true）;
</script>
<style type='text/css'>.gsc-control-cse {
font-family:Arial，sans-serif;border-color：#FFFFFF;background-color：#FFFFFF;}
.gsc-control-cse .gsc-table-result {font-family:Arial，sans-serif;
}
input.gsc-input， .gsc-input-box， .gsc-input-box-hover， .gsc-input-box-focus {border-color：#D9D9D9;
}
input.gsc-search-button， input.gsc-search-button:hover， input.gsc-search-button:focus {border-color：#666666;background-color：#CECECE;background-image:none;filter:none;}
.gsc-tabHeader.gsc-tabhInactive {border-color：#FF9900;background-color：#FFFFFF;}
.gsc-tabHeader.gsc-tabhActive {border-color：#E9E9E9;background-color：#E9E9E9;border-bottom-color：#FF9900}
.gsc-tabsArea {border-color：#FF9900;}
.gsc-webResult.gsc-result， .gsc-results .gsc-imageResult {border-color：#FFFFFF;background-color：#FFFFFF;}
.gsc-webResult.gsc-result:hover， .gsc-imageResult:hover {border-color：#FFFFFF;background-color：#FFFFFF;}
.gs-webResult.gs-result a.gs-title:link， .gs-webResult.gs-result a.gs-title:link b， .gs-imageResult a.gs-title:link， .gs-imageResult a.gs-title:link b {color：#0000CC;}
.gs-webResult.gs-result a.gs-title:visited， .gs-webResult.gs-result a.gs-title:visited b， .gs-imageResult a.gs-title:visited， .gs-imageResult a.gs-title:visited b {color：#0000CC;}
.gs-webResult.gs-result a.gs-title:hover， .gs-webResult.gs-result a.gs-title:hover b， .gs-imageResult a.gs-title:hover， .gs-imageResult a.gs-title:hover b {color：#0000CC;}
.gs-webResult.gs-result a.gs-title:active， .gs-webResult.gs-result a.gs-title:active b， .gs-imageResult a.gs-title:active， .gs-imageResult a.gs-title:active b {color：#0000CC;}
.gsc-cursor-page {color：#0000CC;}a.gsc-trailing-more-results:link {color：#0000CC;}
.gs-webResult .gs-snippet， .gs-imageResult .gs-snippet， .gs-fileFormatType {color：#000000;}
.gs-webResult div.gs-visibleUrl， .gs-imageResult div.gs-visibleUrl {color：#008000;}.gs-webResult div.gs-visibleUrl-short {color：#008000;}.gs-webResult div.gs-visibleUrl-short {display:none;}
.gs-webResult div.gs-visibleUrl-long {display:block;}.gs-promotion div.gs-visibleUrl-short {display:none;}
.gs-promotion div.gs-visibleUrl-long {display:block;}.gsc-cursor-box {border-color：#FFFFFF;}
.gsc-results .gsc-cursor-box .gsc-cursor-page {border-color：#E9E9E9;background-color：#FFFFFF;color：#0000CC;}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {border-color：#FF9900;background-color：#FFFFFF;color：#0000CC;}
.gsc-webResult.gsc-result.gsc-promotion {border-color：#336699;background-color：#FFFFFF;}
.gsc-completion-title {color：#0000CC;}.gsc-completion-snippet {color：#000000;}
.gs-promotion a.gs-title:link，.gs-promotion a.gs-title:link *，.gs-promotion .gs-snippet a:link {color：#0000CC;}
.gs-promotion a.gs-title:visited，.gs-promotion a.gs-title:visited *，.gs-promotion .gs-snippet a:visited {color：#0000CC;}
.gs-promotion a.gs-title:hover，.gs-promotion a.gs-title:hover *，.gs-promotion .gs-snippet a:hover {color：#0000CC;}
.gs-promotion a.gs-title:active，.gs-promotion a.gs-title:active *，.gs-promotion .gs-snippet a:active {color：#0000CC;}
.gs-promotion .gs-snippet， .gs-promotion .gs-title .gs-promotion-title-right， .gs-promotion .gs-title .gs-promotion-title-right * {color：#000000;}
.gs-promotion .gs-visibleUrl，
.gs-promotion .gs-visibleUrl-short {color：#008000;}
</style>
</div>
<？phpget_footer（）;？>
保存代碼吧，我們的工作還沒有完成，接下來可能會(huì)出現(xiàn)輸入搜索詞無效的問題。因?yàn)槭菑耐獠空{(diào)用谷歌搜索引擎，它自然不知道你要搜索什么，所以要從URL中提取出搜索詞：
在剛剛修改完成的search.php文件中搜索}, true，用下面的代碼替換它：
varmatch=location.search.match(/q=([^&]*)(&|$)/);
if(match&&match[1])
{
varsearch=decodeURIComponent(match[1]);
customSearchControl.execute(search); }
}
大功告成！不過需要注意的是，在上面的代碼中找到match(/q=([^&]*)(&|$)/)，里面的q是根據(jù)搜索網(wǎng)址格式?jīng)Q定的，如果你搜索關(guān)鍵字XX得到的網(wǎng)址為http://domain.com/?s=XX，那么必須將q改成s才可正常使用。并且由于某些原因，有時(shí)使用Google的服務(wù)可能會(huì)被………………所以請(qǐng)慎重考慮。
標(biāo)簽： google wordpress如何集成google wordpress如何使用google
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
