小站的搜索功能出現(xiàn)了點(diǎn)問題，索性直接更改為Google自定義搜索引擎。可在折騰搜索功能的時候經(jīng)歷了一些坎坷，所以整理了下內(nèi)容分享給大家。
1.登入https://accounts.google.com/ServiceLogin?continue=http://www.google.com/cse/all&service=cprose&hl=zh-CN&gl=us&passive=true，若沒有Google的帳號可去簡單注冊一個。登入后，我們開始創(chuàng)建一個“定制Google搜索引擎“，如下圖：
在輸入框內(nèi)輸入要搜索的網(wǎng)站，這里需要注意的是索引整個網(wǎng)站還是只是文章部分。若是整個網(wǎng)站直接按照圖中的提示填寫即可，若是單純搜索全部文章頁面就可能會麻煩些。
若只想讓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)站語言哦！完成后下一步吧。
2.接下來可以根據(jù)需要來更改Google搜索頁面的背景顏色，按鈕顏色等等。不過最重要的一點(diǎn)是將布局更改為全寬：
3.接下來我們對主題的搜索頁面進(jìn)行修改。在WordPress中輸入一個搜索詞，它將會顯示出搜索頁面，并按照搜索詞來顯示內(nèi)容。不過現(xiàn)在我們需要變一下：顯示出搜索頁面后按照輸入的內(nèi)容來調(diào)用Google搜索引擎幫你搜索。
在主題目錄中找到類似于search.php這樣的文件，以我的主題來做個示例：
<?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ā)還在','還有板凳','%條評論'); ?> <?php edit_post_link('編輯本文', '', ''); ?></span>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="more" target='_blank'><img src="http://www.mywpku.com/wp-content/themes/LeiFeng/img/readmore.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(); ?>
我將它刪除至只剩下一個大概的結(jié)構(gòu)：
<?php get_header(); ?>
<div id="content" class="group">
</div>
<?php get_footer(); ?>
去剛剛的自定義搜索引擎頁面那獲取代碼吧，這是最后一步了。
很顯然普通的代碼已經(jīng)不能滿足我們的需求了，下方點(diǎn)擊獲取V1代碼。
將獲得的代碼與search.php合并：
<?php get_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>
<?php get_footer(); ?>
保存代碼吧。
4.我們的工作還沒有完成，接下來可能會出現(xiàn)輸入搜索詞無效的問題。因?yàn)槭菑耐獠空{(diào)用谷歌搜索引擎，它自然不知道你要搜索什么，所以要從URL中提取出搜索詞：
在剛剛修改完成的search.php文件中搜索
customSearchControl.draw('cse', options);
在它的下面添加如下代碼：
var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
var search = 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才可正常使用。并且由于某些原因，有時使用Google的服務(wù)可能會被………………所以請慎重考慮。
聲明：本站所有文章，如無特殊說明或標(biāo)注，均為本站原創(chuàng)發(fā)布。任何個人或組織，在未征得本站同意時，禁止復(fù)制、盜用、采集、發(fā)布本站內(nèi)容到任何網(wǎng)站、書籍等各類媒體平臺。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。
很詳細(xì)，很久之前就在鳥哥那兒看到過類似教程。