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

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

INDEX

1. 検証バージョン
2. flexibleSearch.jsのダウンロードと配置
3. 検索用JSONファイルの作成
4. 検索用ページの作成

1. 検証バージョン

WordPress 3.7
flexibleSearch.js 1.0.0

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

jq-plugin-flexibleSearch-1.0.0.zip

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

flexibleSearch · GitHub

ダウンロードしたファイルを解凍して、フォルダ名を 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のフォーマットに関しては以下も参考にどうぞ:)

flexibleSearch.js – ページ送りに対応した高速 Ajax 検索が可能な jQuery プラグイン | かたつむりくんのWWW

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にアクセスして検索した状態。
検索結果が多い場合はページングも表示されます:)