高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ~WordPress編~

flexibleSearch for WordPress

前回Movable Type編を書きましたが、今回はWordPressでflexibleSearchを試してみました!

今回WordPressのバージョン3.7を使用して、試しています。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

INDEX

1. 検証バージョン

  • WordPress 3.7
  • flexibleSearch.js 1.0.0

2. flexibleSearch.jsのダウンロードと配置

GitHubからflexibleSearch.jsのZIPファイルをダウンロードします。

解凍後
ダウンロードしたファイルを解凍して、フォルダ名を flexibleSearch に変更しました。

使用テーマの js ディレクトリに flexibleSearch をアップロードします。

3. 検索用JSONファイルの作成

page-search.php

<?php global $wp_query; ?>
 
<?php /** 投稿タイプがpostの投稿一覧を取得します */ ?>
<?php query_posts( array( 'post_type' => 'post' ) ); ?>
<?php if ( have_posts()) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php
		
		// 改行コードとタグの除去
		$content = get_the_content();
		$content = str_replace( "\n", "", $content );
		$content = str_replace( "\t", "",$content );
		$content = strip_tags( $content );
		
		$excerpt = get_the_excerpt();
		$excerpt = str_replace( "\n", "", $excerpt );
		$excerpt = str_replace( "\t", "",$excerpt );
		$excerpt = strip_tags( $excerpt );
		
		// タグの取得
		$posttags = get_the_tags();
		$tags = '';
		if ( $posttags ) {
			foreach( $posttags as $tag ) {
				$tags = $tags . $tag->name;
				if( $tag !== end( $posttags ) ) {
					$tags = $tags . ','; 
				}
			}
		}
		
		// JSON形式で出力するデータを配列にセットします
		$item[] = array(
			'content' => $content, 
			'url' => get_permalink(), 
			'tag' => $tags, 
			'title' => get_the_title(), 
			'excerpt' => $excerpt
		);
		?>
	<?php endwhile; ?>
	<?php $result[ 'item' ] = $item; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
 
<?php /** データをJSON形式で出力します */ ?>
<?php header( 'Content-type: application/json' ); ?>
<?php echo json_encode( $result ); ?>

取り敢えず page-search.php というテンプレートを作成して、 search というスラッグで固定ページを作成しました。
URLが http://example.com/search/ でJSON形式のデータにアクセスできるようにしています。

固定ページの作成

あくまでお試しなので実際はJSON形式のデータを 静的ファイル に書き出した方が良いとは思います。

http://example.com/search/にブラウザからアクセス

{"item":[
	{
		"content":"この投稿はテスト投稿です。",
		"url":"http://example.com/2013/10/flexible-search-wordpress.html",
		"title":"高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ~WordPress編~",
		"tag":"jQuery,WordPress",
		"excerpt":"かたつむりくんのWWWの奥脇さんが作られた、ページネーション対応の高速Ajax検索のjQueryプラグインflexibleSearchを試してみました!\n今回、Movable Type 6と組み合わせて使ってみました。"
	},
	{
		"content":"この投稿はテスト投稿です。",
		"url":"http://example.com/2013/10/flexible-search-mt.html",
		"title":"高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ~Movable Type編~",
		"tag":"jQuery,MovableType",
		"excerpt":"かたつむりくんのWWWの奥脇さんが作られた、ページネーション対応の高速Ajax検索のjQueryプラグインflexibleSearchを試してみました!\n今回、Movable Type 6と組み合わせて使ってみました。"
	}
]}

http://example.com/search/ にブラウザからアクセスするとこのようなデータが返ってきます。

検索用のJSONのフォーマットに関しては以下も参考にどうぞ:)

4. 検索用ページの作成

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	
	<title><?php wp_title( '-' , true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
	
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<script type="text/javascript">
	jQuery(function($){
		// flexibleSearchの設定
		$('#search_content').flexibleSearch({
			resultTargetId : "fs-result-target",
			loadingImgPath : "<?php echo get_template_directory_uri(); ?>/js/flexibleSearch/loading.gif",
			searchDataPath : "<?php bloginfo( 'url' ); ?>/search/"
		});
	});
	</script>
	<div id="search_content"></div>
	<div id="fs-result-target"></div>

</body>
</html>

functions.php

<?php
/**
 * flexibleSearch関連のJSファイルを読み込む
 */
add_action( 'wp_enqueue_scripts', 'hook_wp_enqueue_scripts' );
if ( ! function_exists( 'hook_wp_enqueue_scripts' ) ) :

function hook_wp_enqueue_scripts() {	
	wp_enqueue_script( 'hashchange', get_template_directory_uri() . '/js/flexibleSearch/hashchange.js', array( 'jquery' ) );
	wp_enqueue_script( 'flexibleSearch', get_template_directory_uri() . '/js/flexibleSearch/flexibleSearch.min.js', array( 'jquery' ) );
}

endif;

検索結果

検索結果
WordPressにアクセスして検索した状態。
検索結果が多い場合はページングも表示されます:)

  

共有やブックマークなど