SearchWP Live Ajax Searchを使ってみる

WordPressの検索フォームで検索結果を動的に表示できるプラグイン「SearchWP Live Ajax Search」を使ってみます。

インストール

管理画面でプラグイン > 新規追加 を選択して、右上の検索ボックスから「SearchWP Live Ajax Search」を検索します。
一覧に「SearchWP Live Ajax Search」が表示されるので、今すぐインストールをクリックします。

使い方

プラグインを有効化すると、特に設定をせずに使えるようです。
検索フォームでget_search_form()を使用している場合、検索フォームでキーワードを入力すると、以下のようにローディングが表示されます。

少し待つと、入力したキーワードの検索結果が表示されました。

get_search_form()を使用していない場合、data属性を付与することでライブ検索を有効にできます。

変更前

<form method="get" action="/">
	<input type="search" name="s" />
	<input type="submit" value="検索" />
</form>

変更後

<form method="get" action="/">
	<input type="search" name="s" data-swplive="true" />
	<input type="submit" value="検索" />
</form>

検索結果のカスタマイズ

検索結果部分の表示は「/wp-content/plugins/searchwp-live-ajax-search/templates/」内にある「search-results.php」を使用していますが、このファイルはプラグインのアップデート時などに変更される恐れがあるので、テーマディレクトリ内で変更できるようにします。

テーマディレクトリ内に「searchwp-live-ajax-search」という名前のフォルダを作成して、先ほどの「search-results.php」をコピーすればOKです。
あとはこのファイルを変更することで、検索結果部分を変更できます。

タイトルの後に表示される投稿タイプを削除してみます。

変更前

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php $post_type = get_post_type_object( get_post_type() ); ?>
		<div class="searchwp-live-search-result" role="option" id="" aria-selected="false">
			<p><a href="<?php echo esc_url( get_permalink() ); ?>">
				<?php the_title(); ?> (<?php echo esc_html( $post_type->labels->singular_name ); ?>) &raquo;
			</a></p>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<p class="searchwp-live-search-no-results" role="option">
		<em><?php esc_html_x( 'No results found.', 'swplas' ); ?></em>
	</p>
<?php endif; ?>

変更後

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php $post_type = get_post_type_object( get_post_type() ); ?>
		<div class="searchwp-live-search-result" role="option" id="" aria-selected="false">
			<p><a href="<?php echo esc_url( get_permalink() ); ?>">
				<?php the_title(); ?> &raquo;
			</a></p>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<p class="searchwp-live-search-no-results" role="option">
		<em><?php esc_html_x( 'No results found.', 'swplas' ); ?></em>
	</p>
<?php endif; ?>

これで投稿タイプ部分を削除することができました。

【参考サイト】

• Live Search – SearchWP