高速Ajax検索とページ送りを実現するjQueryプラグインflexibleSearch 2.0.0をWordPressで使ってみた (サンプルテーマ付き)

web制作 Tags: , ,
flexibleSearch.js

検索用のJSONファイルを生成してAjax検索とページ送りを可能にするjQueryプラグインflexibleSearch.jsの新バージョンをWordPressで試してみました！
WordPress用のサンプルテーマも配布しちゃいます:)

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

サンプルテーマのダウンロード

WordPress3.8.1で確認したサンプルテーマです。よろしければどうぞ。

wp-theme-flexiblesearch-sample· GitHub

過去の「flexibleSearch.js」に関する記事

INDEX

1. テーマを作成する

flexiblesearch-wordpress-01
WordPressのテーマを作成します。

WordPressをインストールしているディレクトリの wp-content/themes の配下に flexiblesearch というテーマフォルダとファイル郡を作成しました。

2. flexibleSearchをダウンロードする

flexiblesearch-wordpress-02
flexibleSearchのバージョン2.0.0をダウンロードしてテーマフォルダの js フォルダ配下に flexibleSearchを配置します。

3. パーマリンクを変更する

flexiblesearch-wordpress-03
デフォルトのパラメータベースのパーマリンクですとflexibleSearchが誤作動で検索するので、パーマリンクを数字ベースに変更しました。

デフォルトでなければ数字ベースのパーマリンク以外を選択しても大丈夫です。

4. 検索用のJSONファイルを生成する

検索用のJSONファイルを生成する為の処理をテーマの functions.php に記述します。
今回はお試しでテーマを表示した時に flexiblesearch.json という検索用のJSONファイルをWordPressをインストールしているディレクトリの wp-content の配下に書き出すようにしました。
flexiblesearch-wordpress-04

<?php
/**
 * 改行コードとタグの除去します
 */
if ( ! function_exists( 'del_tags_escapestring' ) ) :

function del_tags_escapestring( $value ) {
    $value = str_replace( array( "\n","\t" ), "", $value );
    $value = strip_tags( $value );
        
    return $value;
}

endif;

/**
 * flexibleSearchの検索用のJSONファイルを生成します
 * お気軽に試せるようにinitフックを使用していますが、本来は別のタイミングが良いでしょう
 */
add_action( 'init', 'hook_init' );
if ( ! function_exists( 'hook_init' ) ) :

function hook_init() {
    $items = '';
    
    // 管理画面および、flexibleSearchの検索結果ページではJSONファイルを生成しません
    if( is_admin() || isset( $_GET[ 'search' ] ) ) return;
    
    // 投稿データを全件取得します
    $posts = get_posts( array( 'posts_per_page'  => -1 ) );
    foreach ( $posts as $post ) {
        $width = '';
        $height = '';
    
        // 本文を取得します
        $content = apply_filters( 'the_content', $post->post_content );
        $content = del_tags_escapestring( $content );
         
        // 抜粋を取得します
        $excerpt = $post->post_excerpt;
        $excerpt = del_tags_escapestring( $excerpt );
        
        // get_the_post_thumbnailを使用するとimgタグを生成するので、タグが検索キーワードとして引っかかってしまい注意が必要です
        //$image = get_the_post_thumbnail( $post->ID );
        
        // アイキャッチ画像のURLを取得します
        $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' );
        $image = '';
        if ( $image_attributes ) {
            $image = $image_attributes[0];
            
            // 必要に応じてwitdhやheight属性を使用してください
            //$width = $image_attributes[1];
            //$height = $image_attributes[2];
        }
        
        
        // カテゴリを取得します
        $post_categorys = get_the_category( $post->ID );
        $categorys = '';
        if ( $post_categorys ) {
            foreach( $post_categorys as $category ) {
                // カンマ区切りでカテゴリの名称を入れます
                $categorys = $categorys . $category->name;
                if( $category !== end( $post_categorys ) ) {
                    $categorys = $categorys . ','; 
                }
            }
        }
         
        // タグを取得します
        $post_tags = get_the_tags( $post->ID );
        $tags = '';
        if ( $post_tags ) {
            foreach( $post_tags as $tag ) {
                // カンマ区切りでタグの名称を入れます
                $tags = $tags . $tag->name;
                if( $tag !== end( $post_tags ) ) {
                    $tags = $tags . ','; 
                }
            }
        }
        
        // JSON形式で出力するデータを配列にセットします
        $items[] = array(
            'title' => $post->post_title,
            'excerpt' => $excerpt,
            'content' => $content,
            'permalink' => get_permalink( $post->ID ),
            'tag' => $tags,
            'image' => $image,
            'category' => $categorys,
            // 必要に応じてwitdhやheight属性を使用してください
            //'width' => $width,
            //'height' => $height,
        );
    }
        
    $result[ 'items' ] = $items;
    
    // wp-content配下に検索用のJSONファイル "flexiblesearch.json" を書き出します
    file_put_contents( WP_CONTENT_DIR . '/flexiblesearch.json', json_encode( $result ) );
}

endif;

5. flexibleSearchをWordPressで読み込む

flexibleSearch関連のJSファイルを読み込む処理を functions.php に記述します。

ただし<?php の部分を2回書かないように注意してください。
<?php
/**
 * flexibleSearch関連のJSファイルを読み込みます
 */
add_action( 'wp_enqueue_scripts', 'hook_wp_enqueue_scripts' );
if ( ! function_exists( 'hook_wp_enqueue_scripts' ) ) :
 
function hook_wp_enqueue_scripts() {   
    // "mustache.js" と "flexibleSearch.min.js" の読み込みます
    wp_enqueue_script( 'mustache', get_template_directory_uri() . '/js/flexibleSearch/mustache.js', array( 'jquery' ) );
    wp_enqueue_script( 'flexible-search', get_template_directory_uri() . '/js/flexibleSearch/flexibleSearch.min.js', array( 'jquery' ) );
    
    // "flexibleSearch-config.js" は "(function ($) {" の部分を "jQuery(function ($) {" とWordPress用に書き換える必要があるため今回は使用しません
    //wp_enqueue_script( 'flexible-search-config', get_template_directory_uri() . '/js/flexibleSearch/flexibleSearch-config.js', array( 'jquery' ) );
}
 
endif;

上記の functions.php のコードが実際に展開されると以下のようになります。

<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-content/themes/flexiblesearch/js/flexibleSearch/mustache.js?ver=3.8.1'></script>
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-content/themes/flexiblesearch/js/flexibleSearch/flexibleSearch.min.js?ver=3.8.1'></script>

6. flexibleSearchを使用するための設定を行う

テーマの header.php に flexibleSearch を使用するための処理を記述します。

wp_head();は必ず定義します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
    <link rel="stylesheet" href="<?php bloginfo ( 'stylesheet_url' ); ?>" >
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rancho" />
    
    <?php /** wp_head();を定義していない場合、functions.phpで定義しているスクリプトの読み込みが行われません */ ?>
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <script>
    // WordPressでは "(function($){" ではなく、"jQuery(function($){" のように書くようにしましょう
    jQuery(function($){
            // flexibleSearchの設定を行います
            $( '#search' ).flexibleSearch({
                // 検索中のローディング画像のパスを指定します
                loadingImgPath : "<?php echo get_template_directory_uri(); ?>/js/flexibleSearch/loading.gif",
                
                // 検索用のJSONファイルまでのパスを指定します
                searchDataPath : "<?php echo esc_url( home_url() ); ?>/wp-content/flexiblesearch.json",
                
                // 検索結果を表示するHTML要素のidを指定します
                //resultBlockId : "content",
                
                // 検索結果のメッセージのテンプレートを指定します
                resultMsgTmpl: ['<div id="fs-result-msg">',
                                    '<p>{{#keywords}}「{{keywords}}」が {{/keywords}}{{count}} 件見つかりました。',
                                    '（{{firstPage}}〜{{lastPage}} ページ中 {{currentPage}} ページ目を表示）</p>',
                                '</div>'].join(""),
                                
                // 検索結果のテンプレートを指定します
                resultItemTmpl: ['<div id="fs-result-item">',
                                    '<ul>',
                                    '{{#items}}',
                                        '<li><a href="{{permalink}}">',
                                            '{{#image}}',
                                                '<img src="{{image}}" alt=""{{#width}} width="{{width}}"{{/width}}{{#height}} height="{{height}}"{{/height}} />',
                                            '{{/image}}',
                                            '<br />{{&title}}',
                                        '</a></li>',
                                    '{{/items}}',
                                    '</ul>',
                                '</div>'
                                ].join(""),
                                
                // 1ページあたりの最大表示件数を指定します
                paginateCount: 5
            });
        });
    </script>

7. 検索フォーム用と検索結果表示用のHTML要素を配置する

テーマの index.php に検索フォーム用と検索結果表示用のHTML要素を記述します。

<?php /** flexibleSearchの検索フォームを使用するための要素です */ ?>
<div id="search"></div>
    
<?php /** flexibleSearchの検索結果を表示するための要素です */ ?>
<div id="fs-result"></div>

8. テーマの表示

トップページ

flexiblesearch-wordpress-04
テーマのトップページを見てみましょう。この時に検索用のJSONファイル flexiblesearch.json が生成されます。

検索結果ページ

flexiblesearch-wordpress-05
検索キーワードを入力して検索してみます。

ページネーション

flexiblesearch-wordpress-06
ページネーションも表示されます。

いかがでしたでしょうか？
flexibleSearchのバージョンアップで検索ワードを保持するようになったので、リクエストは発生してしまいますが、StaticPressなどの静的サイト生成のプラグインと組み合わせると高速検索を組み込んだサイトが構築可能かもしれませんね！

あわせて読みたい記事

  1. flexibleSearch for WordPress 高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ～WordPress編～
  2. flexibleSearch & Movable Type 高速Ajax検索のjQueryプラグイン「flexibleSearch.js」を試してみた ～Movable Type編～
  3. ｊQuery PHPからMySQLのデータをJSON形式で出力してjQueryとAjax通信を使って取得して表示するサンプル
  4. flexibleSearch 高速Ajax検索のjQueryプラグイン「flexibleSearch.js」のバージョン2.0.0がリリースされました！
  5. jQuery TabPager Plugin タブ切り替えとタブ内でページネーションをAjaxなしで実装するjQueryプラグイン「jQuery TabPager」を作ったので公開
  6. Custom Field GUI Utility カスタムフィールドを扱いやすくするWordPressプラグイン「Custom Field GUI Utility」をアップデートしました！WordPress3.5に対応！
  

共有やブックマークなど

コメントは受け付けていません。