WordPress 站点集成 Google 自定义搜索引擎

<?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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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 ('沙发还在','还有板凳','%条评论'); ?>&nbsp;&nbsp; <?php edit_post_link('编辑本文', '', ''); ?></span>
					<a rel="nofollow noopener noreferrer" 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>没有找到任何内容</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(); ?>

<?php get_header(); ?>
<div id="content" class="group">

</div>
<?php get_footer(); ?>

<?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(); ?>

var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
	var search = decodeURIComponent(match[1]);
	customSearchControl.execute(search);
}